Skip links: the 5 most common mistakes

Usability | September 2016

0916_skiptocontent2

Get your implementation right to improve accessibility

Skip links play an important role in website accessibility. They provide users with some mobility impairments with a means to quickly and easily skip navigation menus and other blocks of content. But to maximise the accessibility benefits, you need to avoid common skip link mistakes.

What is a skip link?

If you ever navigate websites using the keyboard instead of the mouse, you may have noticed that on more and more pages a ‘Skip to main content’ (or similar) link appears as soon as you press the Tab key to start moving through the page – this link is known as a skip link.

Which users benefit from skip links?

Skip links are particularly beneficial for people with mobility impairments who interact with the keyboard via the use of assistive technologies, such as a mouth stick or a head wand. Having to press the Tab key many times just to go past the navigation menu can be a big problem for this group of users, and may cause some to abandon the site.

skip link example egypt airWe hope that skip links will soon become a standard feature of all sites. However, when conducting website accessibility audits, we often find that skip links are not implemented correctly: this can render them completely useless to users.

Here’s our hit list of the 5 most common skip link mistakes.

Mistake 1: Permanently hidden links
When a page first loads, skip links are generally not visible as they are positioned off-screen; they only become visible when users start pressing the tab key. However, on some websites they don’t appear as they should do. This means that although they are present in the HTML code, they are inaccessible to sighted keyboard users (the very people who would benefit from them the most).

 

Mistake 2: Links do not work as expected in some browsers

Once they become visible, skip links can be used to jump to a specific section of the page. Many times, when we test websites in Internet Explorer and Chrome, upon activating skip links, the page scrolls and the focus seems to move to the correct section of content, until we press the Tab key again: and we see the focus moving back to the skip link. This is due to a well-known bug in these browsers, but workarounds exist and must be applied to make sure that this does not happen.

 

Mistake 3: Wrong location

One of the more unexpected issues we’ve seen involves the ‘Skip to content’ link being located right after the navigation menu. Although different skip links can be used throughout pages to assist keyboard users, the link that allows users to jump to the main content area should be at the very beginning of every page, or at least before the navigation menu.

 

Mistake 4: Unclear labels

Labels such as ‘Skip to site tools’ or ‘Skip to secondary navigation’ may be difficult to understand for some users, including older people or users with cognitive impairments. As for any other link on the website, it is important that skip links have clear and simple labels that do not include technical terms.

 

Mistake 5: Too many skip links

In some cases providing multiple skip links (e.g. ‘Skip to Search’, ‘Skip to booking form’) can be useful to users. However, the purpose of having skip links on a site is to prevent keyboard users from having to press the Tab key many times. Adding several skip links to the beginning of a page will defeat their purpose. We believe that there should be no more than 5 skip links on a page.

Accessibility training courses available

Attend one of our accessibility training courses to quickly enhance your theoretical and practical knowledge. Courses are run by our expert consultants: we can create a bespoke course for your business, and also offer ‘off the shelf’ courses.

Avoiding these 5 common skip link mistakes will help you improve web accessibility and usability.