views:

89

answers:

1

There is a requirement in Section 508 to code a "Skip Navigation" at the top of all web pages in order to allow the Seeing Impaired to bypass lengthy and repetitive top navigation.

Originally, I thought the best way to do this would be to put the words in the page and use CSS "display:none" to not show them. But I have read that you can't do this either.

Does someone know of a best practice to do a "Skip Navigation" hyper link at the top of all pages, but not have it visible on the screen to people with sight or without another disability? Can this be done with CSS without using the "Display:none" comment?

+3  A: 

I'm under the impression that when you display:none screen readers may discard that element. I don't follow completely why they do that, but I suppose it's why they're "screen" readers and not "HTML" readers.

I tend to use position:absolute to remove an element which I still want to be visible to a screen reader. Something like...

a#skip_to_content {
    position:absolute;
    top:-10000px;
    left:-10000px;
}

... but I've read nothing to confirm that this is the suggested solution.

If you're trying to develop accessible web sites and want to very quickly test your page, you should check out the Fangs FireFox plugin. It simulates how a popular screen reader, Jaws, would see and organize the information on your site.

LeguRi
As a footnote, I've recently discovered this technique can cause problems for the iPad's [VoiceOver](http://www.apple.com/ipad/features/accessibility.html#voiceover) functionality.
LeguRi
@LeguRi Can you elaborate on the iPad problems?
David Kolar
@David Kolar - When using VoiceOver (the iPad's OOTB screen reader) I found that items positioned like that weren't read - no different than the `display:none` for more conventional screen readers. The problem is that VoiceOver reads out what you _point at_ - and this technique involves removing the content from the visible page; therefore you can't point at it. I had to use opacity to instead make the content transparent.
LeguRi