I’ve been looking for a solution to an accessibility issue I identified using WAVE.
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
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.