We implement skip links - allows a users to skip the main nav and get to the main content.

  • Skip links should be placed before the cookie popup (unless it interferes with the ability to navigate/use the site).
  • We don’t use a list as it should be one or two links and gets verbose for screen reader users.
  • At least link to main.
  • At most link to main, search and nav. This is because Search input already has a container with role="search" so is reasonably findable, likewise so does the Nav (role="navigation" on <nav> is negated as there is good support for it).
  • We don’t use access keys as we found a 50/50 preference for/against them (yearly a11y poll). If someone regularly uses them, they will likely have their own preferred key setup, and there’s no standard for what key does what. Gov.uk list some but they differ from well known a11y establishments and practices.
  • We shoulda/coulda/oughta add the tabindex fix as well.
<div class="o-skiplinks">
    <a href="#main-content">Skip to main content</a>
</div>

<nav>. . .</nav>
<header>. . .</header>

<main id="main-content" tabindex="-1">
. . .
</main>