Best Way to do "Skip Navigation" with CSS for 508 Compliancy

Question

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?

Answer 1

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.