Design State: A weblog about government web design

[Updated on 26 May 2009] What’s the good of having an accessibility statement on your website if a user who is using a text only browser or screen reader can’t find it right away? In other words, why bury all of the usability cues that you’ve provided somewhere on the page so that it is too late to do any good when a user finally stumbles across it?

This hide-and-seek is something I’ve noticed across a lot of sites with accessibility statements. These statements are by no means ubiquitous, so even if I’m trained to look for one I’m probably going to stop looking altogether after going to the hundredth site that doesn’t have one. Thankfully, the solution is one that is blindingly obvious once you think of it, and quite easy to implement.

If you look at Mark Pilgrim‘s great accessibility resource, Dive Into Accessibility, with the stylesheet turned off, you’ll see a link near the top that says “Skip to Navigation.” This link is hidden by the CSS, so folks with regular browsers won’t see it. This navigation aid is supposed to make the site easier to use for the kind of people who need more accessible websites. So if you’re on a site that has an accessibility statement, you’re probably also on a site that has a hidden “Skip to” link or two. The markup is usually some variation of this:

<h1 class="title">
<a href="/" accesskey="1">Dive Into Accessibility</a>
</h1>
<p>30 days to a more accessible web site</p>
<a class="skip" href="#startnavigation">Skip to navigation</a>

and the CSS to hide it from view:

.divider, .invisibletitle, a.skip {
display: none;
}

Update: Based on the post Hiding with CSS: Problems and Solutions from Roger Johansson, it turns out using display: none; will hide elements even from screen readers. The alternative is to use the off-left CSS hack:


.divider, .invisibletitle, a.skip {
position:absolute;
left:-9999px;
}

which is definitely hacky, but gets the job done, without breaking anything.

If you try to find the accessibility statement, and you’re looking at the page without the benefit of layout from the stylesheet, the link to it is way down at the bottom in the site links, after all of the content and the navigation. There’s already a link up top to assist in jumping past the content to the navigation, so why not use that hidden space to invite the user to read the accessibility statement first thing? Here’s the additional markup:

<h1 class="title">
<a href="/" accesskey="1">Dive Into Accessibility</a>
</h1>
<p>30 days to a more accessible web site</p>
<a class="skip" title="Accessibility features of this site" href="/accessibility_statement.html">Please take a moment to review the accessibility features of this site.</a>
<a class="skip" href="#startnavigation">Skip to navigation</a>

Voilà, the user gets an immediate prompt that you’ve taken the time to make the site easier for them to use. Now I’ve just got to go back and put this in to all of the old sites I’ve worked on.