Skips links are mainly useful for sighted keyboard only users on desktop and some screen reader users. While they’re a recommendation rather than a requirement of WCAG 2.0 it’s a feature that many websites built with accessibility choose to include.
The value of skip links is debatable for screen reader users who have the ability to navigate content using headings, WAI ARIA Landmarks, forms, lists and links with relative ease. However they are used by some screen reader users and helpful if not familiar with the keyboard shortcuts on offer in screen reader software.
So while I’m not a huge fan of skip links there is a place for them on desktop, but is there a place for them on mobile?
If browsing on a keypad only device, without a directional controller or pointing device, skip links can be hugely helpful. They allow you to jump straight to the main content of the page and avoid repeatedly pressing the navigation key.
If browsing with a touch device however it’s unlikely you’ll use a skip link as you are not restricted to navigating in a linear fashion. The same is also the case for mobile screen reader users. iOS Voiceover uses Web Rotor so you can jump between types of content and Android 4 has introduced explore by touch with Talkback, the built in screen reader. The point is you aren’t forced to navigate in a linear fashion.
A well thought out mobile website should see content getting precedence over navigation. Navigation systems that dominate desktop work better if they are reduced, collapsed into a single menu item or a placed after the main content on small screen devices. The screen shots below shows the BBC main navigation as seen on desktop, tablet and mobile.
BBC navigation collapses from ten focusable elements on desktop to six on tablet and three on mobile – links gradually get packed away into the ‘More’ drop down menu. In other words mobile completely engineers itself out of the need for skip links as does tablet to a large extent. In fact, if the three BBC skip links did exist on mobile it would double the main navigation on mobile creating clutter and noise.
So in summary, a few things to keep in mind when deciding whether to include skip links for tablet and mobile:
- Ensure pages have a good heading structure and make good use of WAI ARIA landmarks
- Collapse or reduce main navigation so you remove the need for skip links
- Remove skip links from the code base for responsive sites on tablet and mobile
- Remove skip links for touch devices
- Rather than use traditional skip links (skip to content, skip navigation) consider using visible anchored links
- Apps generally don’t need skip links