Accessible objects

I’ve been looking for a solution to an accessibility issue I identified using WAVE.

screenshot of the WAVE error.
“If the link contains no text, the function or purpose of the link will not be presented to the user. This can introduce confusion for keyboard and screen reader users.”

Usability best practice states the logo should be a home link; a way for confused users to return to the start.

Traditionally, I’d use an image with alt or longdesc to describe its contents. I really believe in keeping this site Future Friendly so I used an SVG for the logo.

You can add an SVG as an img but I wanted it embedded as an object for future improvements.

The code behind the logo:


<h1>
<a href=“#” class="svg-link">
<object class="logo" type="image/svg+xml" data=“#logo.svg"> </object> </a> </h1>

Screen Readers will generally describe the label or graphic (alt text) present inside the link. Because this SVG is an object there’s nothing to describe its contents.

After a bit of research on the w3.org, I learned that you only need to add a bit of descriptive text inside the object.

My code now:


<object class="logo" type="image/svg+xml" data=“#logo.svg" > Home page
</object>

This was enough to fix the WAVE error mentioned above. Unfortunately Screen Readers were still non the wiser to the home logo/link.

I added a title to the link in the same context as the other navigation titles. After testing with Apple’s Voiceover application, I’m satisfied that the experience is a consistent one for the visually impaired.

Finally, I added a PNG backup incase any older browsers ever stumbled across my site. According to the analytics, IE9 is the oldest browser amongst my visitors and that supports SVGs. However the logo is so important that I’d rather ensure there’s support - just in case.

I still need to test this fallback on older browsers which I’ll do in The Unit device lab. As it stands, the PNG is only 9K so I haven’t implemented any feature detection yet.