Improving keyboard accessibility

My selfie

James Turner,

Tags: CSS HTML

Using keyboard input, either in a browser or a screen reader, is essential for blind, visually impaired, illiterate or learning disabled people to access online content. If we design sites without thinking about access via keyboard, those users who need to use one are likely to have a frustrating experience. With a bit of HTML and a dash of CSS, however, we can bring these users into the family with minimal effort.

Skip to navigation

Why keyboard access is a must

Here's a slightly old video which shows the experience of one blind screen reader user (from 2 minutes 7 seconds to 4 minutes 12 seconds): Keeping web accessibility in mind (YouTube), and another which shows a blind browser user navigating sites via the keyboard: Web accessibility for people with vision impairments (YouTube).

As described in both videos, one of the main ways that keyboard users can navigate a document is by tabbing through the links. But there are two things that can be really frustrating when you're navigating a web page using the keyboard and/or a screen reader. Firstly, there is often a lot of content that is repeated at the top of each web page on a site, including the site logo, strapline and main menu. Listening while your device reads through all this is fine the first time you land on a site, but if it's a site that you visit several times a day, this is torture. To solve this problem, W3C recommends adding a link at the top of each page that goes directly to the main content area.

The second point of annoyance is the difficulty of returning immediately to the main navigation. If you're using your sight and a mouse or touch to navigate a page, you can locate the content you're looking for, then quickly scroll back to the main navigation at the top of the screen, visually find the link you want, then click or tap to move on. This is not so easy with a screen reader. If you want to navigate to another page, you can go back to the start of the document, but you still have to listen as the device reads out the material in the header again, which is very frustrating. The solution is to sprinkle ‘Skip to main menu’ links throughout the document, particularly after each chunk or block of main content.

These are both problems that Responsive Web Design tackle, and here's how.

Skip to navigation

‘Skip to main content’ and ‘Skip to main menu’ links

The markup for this technique is simple. First, give the elements containing the main navigation and main content an id. Then, in strategic positions elsewhere in the document, add <a> anchors which point to these elements. “Strategic positions” could include at the very beginning of the document and after each main section of content. Also, give these links a class attribute that can be styled, usually class="a11y". Finally, in CSS style these anchors in such a way that they do not appear visually in the layout, but can be tabbed to via the keyboard. Hence, the nav and main content are marked up like this:

<nav id="nav">
...
</nav>

<article id="main-content">
...
</article>

The first elements inside the body are links to these elements:

<body>
    <a class="a11y" href="#nav">Skip to our site navigation</a>
    <a class="a11y" href="#main-content">Skip to our content</a>

    <!-- header section comes next -->
</body>

Then the ‘Skip to our site navigation’ link is repeated at various points throughout the document and again at the end. I suppose a good idea is to repeat it after each major section of content; in the case of this blog post, I would repeat it just before each <h2> element.

Skip to navigation

Hiding the links with CSS

Now for the styling. We want these links to be invisible, i.e. they exist but they can't be seen and don't affect the layout. We also want them to be accessible via keyboard. First, we scooch them off screen with absolute positioning and left: -1000em. Then we make doubly sure that they're hidden from view by setting height and width to 0.

One thing that Responsive Web Design doesn't do is to display these skip content links when they have the focus. In this presentation, Alastair Campbell: Designing for accessibility (YouTube), we can see that the BBC website has skip content links that do appear on focus, if only at the top. This helps the user to identify which element currently has the focus. The CSS markup below includes this functionality, and I've written a pen to demonstrate skip content links which appear on focus (requires keyboard).

.a11y {
    display:block;
    position:absolute;
    left:-1000em;
    width:0;
    height:0;
    overflow:hidden;
    color:#333;
    text-align:center;
    z-index:10000;
}

.a11y:focus {
    position: fixed;
    left: 0.5em;
    top: 0.5em;
    padding: 0.5em;
    width: 10em;
    height: auto;
    background:#fff;
    border: 5px solid #ccc;
    box-shadow: 5px 5px 10px #ccc;
    height:auto;
    overflow:visible;
}
Skip to navigation

Conclusion

As we can see, it's not that hard to increase keyboard accessibility for blind, visually impaired, learning disabled and other users who need to use a keyboard to navigate a site. We can do it quite easily: firstly, by concealing a link to the main content right at the top of the page, and secondly, by scattering links back to the main navigation after each block of main content. I have read online (can't remember where) a comment that the left: -1000em technique for hiding things can be picked up as bad practice by search engines. As another commenter pointed out, however, if Google wants to punish you for making your site more accessible, so be it; your audience is more important than Google.

Well, that's it for my posts on Responsive Web Design. Looking forward to returning in the new year with another site to give the Beautiful Web treatment. Happy holidays!

Skip to navigation