RSS

Navigation images and accessibility

12 Jul

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à!

Advertisements
 
Leave a comment

Posted by on July 12, 2011 in CSS, HTML5

 

Tags: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: