Tag Archives: Seamus Leahy

Navigation images and accessibility

I am working on a homepage for my personal website. I have an image that I want to use as my navigation, but I also want to make my site accessible to text-only browsers and screen readers (not that there’s going to be any great stuff on my website, but I want to learn good practices). Making image navigation accessible is a lot harder than it sounds.

If you make the text of the image hidden using CSS, some screen readers won’t read the text. The same is true for the negative text indent, which advocates giving your text-indent a high negative value so that the text doesn’t appear on the screen. But both of these approaches don’t help when a user has a text-only browser, has images turned off, or is using certain types of screenreaders (some people turn off images on their portable devices to speed up download times, which can be agonizingly slow when you’re used to a broadband connection on a computer). So what to do?

There is a rather cumbersome workaround that involves putting an empty <span> element in each list item of the navigation so that you can put the navigational image on top of the text version, thereby showing the text if images are off or someone is using a screen reader. The empty <span> is certainly not good semantic use of html, and the process also involves giving each <li> in the nav its own id.

The best workaround I have found is Seamus Leahy’s “Image Replacement–No Span”. It is beautifully simple and gets the job done. Try it in your browser. You can easily view the “bare bones” html output in Firefox 4; View>Page Style>No style. For IE9, Tools>Internet Options>Advanced>Multimedia, uncheck “Show Pictures”. In Chrome 12, Wrench icon>Options>Under the Hood>Content Settings>Images>check “do not show any images”. (It would be really nice, IE and Chrome, if you could turn images off for just one page at a time like you can in Firefox!!) If you try this with Leahy’s code, you’ll see that without images, the text appears on the screen. In the case of navigation links, the links appear and are fully functional. Voilà!

Leave a comment

Posted by on July 12, 2011 in CSS, HTML5


Tags: , ,