Accessible pages: screen readers and hidden content

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 1×1 blank pixel with ALT text end up not getting read aloud nbso online casino reviews 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.