Skip links on mobile and tablets

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.

BBC has three skip links that become visible onFocus

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 global navigation on desktop

BBC Global navigation on tablet

BBC global navigation on 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.

Skip links are a breakpoint for responsive design and as such can be removed from the code base using  CSS media queries and JavaScript so they aren’t available for smaller viewports and touch screens. The only possible drawback, or group that may miss out, are users of touchscreen devices with external keyboards. Knowing exactly how many people this may affect is the tricky part however if following the principles of content first this shouldn’t be a problem.

Summary

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

12 thoughts on “Skip links on mobile and tablets

  1. What I’ve been doing so far is leaving them in the markup, and if I start with mobile-first… the “skip” is just there on the page like a button. Touchy people scroll past it, and they don’t work anyway on webkit (til that bug is fixed).

    Only when I get to around tablet sizes (which can also be small desktops, or tablets with keyboards such as the Asus Transformer) do I start hiding the skip link and letting keyboard focus show the skip link onscreen like usual.

    Since I know developers think “mobile” means iOS/Android and more easily forget the Nokias, Blackberries and Samsungs (who tend to still have keyboards or limited keypads), I’m more likely to hang on to these older things unless they actively cause problems on touch devices.

    FWIW, I’m currently in the trend of the skip link offering to take people to the navigation, which is not the first thing on the page (but absolutely positioned to the top on tablet-area+).

    Henny Reply:

    Thanks Stomme, we have similar approaches and as with all this stuff it needs to be thought of within the context of the site you are working on and the audience.

    Skip links offering to take people to navigation makes sense. My comments to Joe below talk a little about this.

    Skips are definitely useful on keypad only devices for fuller sites but I don’t see a use case for touch so much.

  2. A personal peeve when browsing on my iPad (and I realise I’ll often be accessing the full, non-mobile site this way), is when browsing very long pages, in order to return to the top of the page, I have to swipe like crazy to cover that distance.

    No handy keyboard to press ctrl+home on, or a mouse to drag the scrollbar up for instant top-of-page. In these cases, I would love better use of ‘jump to top’ links. I realise this is more of a usability concern, but is something to consider on mobile sites I think.

    Henny Reply:

    If on iOS Joe double tap the time at the top to jump to the very top on a screen’s content. A handy trick to mitigate against endless swiping and your equivalent of CTRL + HOME in Jaws as it works with Voiceover too.

    I also use Web Rotor so I can cut down content. If it’s a page with no forms but a search (as many pages are) this means a quick couple of swipes up and you’re in or around the main navigation already.

    Jump to top links are welcome in full sites on mobile however for those of us browsing on keypad only devices. I think there is a good case for visible anchored links such as this for certain types of content as well as Jump to Navigation links which could be a labelled menu icon. Something that Stommes above alludes to.

  3. Pingback: Usable landmarks across desktop and mobile | » Henny Swan's blog

  4. Pingback: Podcast #95: Global Accessibility Awareness Day, Surveys, more | Web Axe

  5. I always used to study piece of writing in news papers but now as I am a user of net thus from now I am using net for articles
    or reviews, thanks to web.

  6. I know this website presents quality dependent articles or reviews and extra
    information, is there any other web site which provides such information in quality?

Comments are closed.