Improve accessibility with “skip to content” links

“Accessibility” is being an important topic for me for many years. Therefore I take care that the content of my web site is useable with any browser or device.

Anyway I’ve overlooked one thing: people have a problem if they are blind or may use computers only with limited physical abilities and the web site displays an extensive menu above the content.

To evaluate the situation, Lynx – a text based browser – is suitable very well. For example the article “How to use a WiFi USB adapter on the RasPi” once in Firefox:

And for comparison the text based version in Lynx in a console window with a size of 120×50 characters:

arnowelzel.de in Lynx without link to content

You quickly recognize the problem: in graphical browsers the main menu is just a bar at the top with expandable sub menus.  However in the text based version the menu items cover most of the display and have to be skipped to get to the content – more than 25 items.

But even when the graphical display may look good at the first glance – when you try to use the [Tab] key to navigate through the page to select links in the article for further information you realize that you have to press the key many times before you get the article itself.

Link to the content

On WebAIM I found a quite elegant solution of the problem.

For users who can’t skip the menu easily a link at the top of the document is useful which skips to the actual content in the following way:

<a href="#content">Skip to main content</a>

<div id="menu">
Here is the menu.
</div>

<div id="content">
This is the actual content of the article.
</div>

Due to design considerations you may not want to have the link always visible in a graphical browser like Firefox but only if using the [Tab] key to focus the element. On the same hand it should not be invisible for screen readers. This can be accomplished with the following CSS rules:

a.skip {
    padding:0.5em;
    position:absolute;
    top:-4em;
    left:0px;
    color:white;
    border-right:1px solid white;
    border-bottom:1px solid white;
    border-bottom-right-radius:0.5em;
    background:#bf1722;
    -webkit-transition: top 1s ease-out;
    transition: top 1s ease-out;
    z-index: 100;
}

a.skip:focus {
    position:absolute;
    left:0px;
    top:0px;
    outline-style: none;
    -webkit-transition: top .1s ease-in;
    transition: top .1s ease-in;
}

Accordingly the link will be included using the respective CSS class:

<a class="skip" href="#content">Skip to main content</a>

Explanation:

To fulfill the requirement “should not be visible initially” you would usually use display:none. However, such rules not only hide elements visually but also for screen readers. The “hack” is now to position the element outside the viewport with the rules position:absolute; top:-4em; left;0px;. By using a negative value for top the element will be output above the viewport which achieves the same visual effect as display:none but without hiding the element in screen readers.

The second rule for the focused display a.skip:focus makes the element visible at the top left corner of the viewport. To keep it visible for a while even when using the [Tab] key quickly multiple times the rule a.skip contains an animation with a duration of one second.

In Firefox the web site is displayed as before – until you press the [Tab] key once and therefore focus the previously invisible link to the content:

arnowelzel.de, link to the content

In Lynx the link will always be displayed immediately after the meta links from the header which Lynx always show at the top (like the previous/next document or the RSS feed). But instead of more than 25 items you only have to skip four items and can then jump directly to the content:

arnowelzel.de in Lynx

Leave a Comment

Your email address will not be published. Required fields are marked *