home · blog · groups · about us · contact us
DevelopmentNow Blog
 Tuesday, November 21, 2006
 
 

When developing a web site for screen readers and other accessible browsers, you often have to wrestle with the demands of Section 508 compliance and a nice design.

One WCAG guideline is to provide a "skip navigation" link near the top of the pages. Since you want this link to be available for screen readers, but hidden for normal browsers, your first instinct would be to do something like this:

<div style="display:none"><a href="#content">skip to main content</a></div>

... a bunch of navigation here ...

<a name="content" />
Main content here ...

However, you'd be wrong. I found this screen reader test at Access Matters that indicates that many screen readers try to obey CSS commands, and so many "hidden CSS tricks" like display:none or a 1x1 blank pixel with ALT text end up not getting read aloud by browsers.

It seems like the best solution, if you need to hide the "skip to content" link, is to use something like this

<div style="position:absolute;top:-100px;"><a href="#content">skip to main content</a></div>

Edit: FYI, Jaws and Window-Eyes are the first & second most popular screen readers, at least in 2003 when they commanded 65 & 35 percent of the market, respectively. But more recent articles imply the same thing -- those are the two to support.

 

November 21, 2006    Bookmark to Digg or other social bookmarking
#    Disclaimer  |  Comments [0]

Related posts:
Roll Back Subversion Files to a Previous Version
Unfuddle Ticket Submission Form
How to Lose 20 Dollars an Hour
10 Articles All Bloggers Should Read
Excel Scrolling Tales from IM
SubSonic DAL layers in Visual Studio


« When will my hard drive fail? | Main | Free Screen Reader Testing Tools »