Assistive text vs. IE7

Not everyone uses “sighted” browsers to view webpages. People with vision problems rely on screen readers to do just that: Read aloud a web page, from navigation to footer. Whenever necessary, we add assistive code to pages, including navigation that let users skip right to a page’s content.

For example, one client’s skip-to-content code:

<div class="skip-link">
<a href="#primary-content" title="Skip to primary content">
Skip to primary content
</a>
</div>
<nav>…</nav>
<div id="primary-content">
</div>

.skip-link { visibility: hidden; }

Since screen readers won’t read anything marked display:none in CSS, I used visibility: hidden. It worked in everything but IE7. Took me a while to figure out that the navigation wasn’t nudged down by padding or some strange margin.

I tried display: none, which worked but defeated the purpose. I also tried font-size: 1px; and height: 1px. Neither worked.

Solution

I used absolute positioning to (visually) take the link out of the DOM:

.skip-link{visibility: hidden; position: absolute; top: 0; left: 0;}

Alternatives

• Accessibility Tips recommends setting left to -999em in CSS.
• WebAIM describes using negative text-indent to hide text from sighted browsers, among other techniques.