Presentable Accessibility Elements with CSS

By  on  

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!

Recent Features

  • By
    5 HTML5 APIs You Didn&#8217;t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

Incredible Demos

  • By
    JavaScript Copy to Clipboard

    "Copy to clipboard" functionality is something we all use dozens of times daily but the client side API around it has always been lacking; some older APIs and browser implementations required a scary "are you sure?"-style dialog before the content would be copied to clipboard -- not great for...

  • By
    Font Replacement Using Cufón

    We all know about the big font replacement methods. sIFR's big. Image font replacement has gained some steam. Not too many people know about a great project named Cufón though. Cufón uses a unique blend of a proprietary font generator tool...

Discussion

  1. DP

    Been using this technique for years, most recently here: http://target.chatelaine.com

  2. DP

    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.

  3. 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)

  4. @DP: http://target.chatelaine.com is best demo, i thought

  5. 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.

  6. 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/

  7. Nice way of accessibility, I would of done the same thing- thanks for sharing this :)

  8. 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.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!