Wednesday, May 10, 2006

"Skip to content" link code

You can improve accessibility to a web page by adding a "Skip to content" link that jumps past the header and any navigation area on your web page and goes straight to the text ("meat") of the information on the page. But you don't necessarily want sighted people seeing a link they might not use. What to do?

One solution is to add a special class that hides the text. Example:
.skip2content {display: none}

This lets screen readers for the visually handicapped hear the link and use it but hides it form the display for a sighted person.

Are there any situations where you'd want to display that link? Perhaps. Consider a person with a motor handicap -- they can see just fine, but it takes them much longer to move a mouse or other pointing device around. They may well want the ability to Tab to that link and press Enter to jump to the page's text. In such a case, they'd need to be able to see the link.

No comments: