Presentable Accessibility Elements with CSS
Mozilla is full of brilliant developers who the mass developer community doesn't know well enough. Toward the top of that list is Craig Cook, a front-end web developer who works on Mozilla.org and other popular Mozilla sites. One technique he recently brought to my attention is his creative handling of elements usually only thought of as helpers to screen readers. Let me show you how we can make those hidden elements useful for all users.
The HTML
The HTML is simple, just a list of elements which link to different parts of the page:
<ul class="a11y-menu"> <li><a href="#content">Skip to content</a></li> <li><a href="#search">Skip to search</a></li> <li><a href="#languages">Skip to languages</a></li> </ul>
Create links to relevant popular and useful parts of the page, both for sighted and unsighted users.
The CSS
The first part of the CSS is simple and exactly what you'd expect: simply hide the elements offscreen:
ul.a11y-menu {
position: absolute;
top: -500px;
}
The code above leaves the elements offscreen, so that the sighted user doesn't see them, but they're still tab-focusable so that screen readers can see them. But looking at these links, wouldn't they also be useful to sighted users who prefer to use the keyboard? Let's make that happen!
ul.a11y-menu a:focus {
display: block;
position: absolute;
top: 520px; /* overcome the URL's 500px, then with some padding */
left: 0;
/* visual styles here, like padding, border, background, etc. */
}
While the entire list element stays out of site, any focused link is featured at the top of the screen so that it may be seen.
This post is more about the technique than the cleverness in code. If you want to see this technique used in production, visit the Mozilla Blog; press the tab key a few times and you'll see the accessibility links display one by one in the top left side of the site. This technique is excellent -- useful to the both the sighted and unsighted!
Been using this technique for years, most recently here: http://target.chatelaine.com
oops, i shall continue this thought…
Nice to see other people use it and even better to have it published by someone who didn’t use it previously..
Cheers.
I think is better use position fixed if the object are relative of body, because the browser scroll to the focus object. (Have not tried)
@DP: http://target.chatelaine.com is best demo, i thought
This technique has been around for some time, but it’s always good to see things like this clearly documented and shared.
One note is that too many skip links can be more of a hinderance than a help. Mouse users are oblivious to them, screen reader users can ignore them, but sighted keyboard users must tab through every single one.
Three (as you have in your example) is probably about the maximum number of skip links you’d want at the top of a page. Otherwise it can be almost as awkward to tab through the skip links as it would be to tab through the content they’re intended to bypass.
The implementation on the Mozilla blog is nice, I’ve been using a slightly more inelegant approach for a while but I’ve never gotten any real feedback on the effectiveness of it: http://jsfiddle.net/i_like_robots/zusHE/
Nice way of accessibility, I would of done the same thing- thanks for sharing this :)
Well, this technique is rather old. It is used in YAML since 2005: http://www.yaml.de/docs/index.html#yaml-accessibility
Unfortunately it is rarely used.