Skip links and landmarks for the ADA

The forty-tab problem

A county site opens with a utility bar, a search box, a 60-link navigation menu and a language selector. Sighted mouse users look past all of it. A keyboard user presses Tab dozens of times on every single page before reaching anything unique.

Success Criterion 2.4.1 says a mechanism must be available to bypass blocks of content that are repeated on multiple pages. The mechanism can be a skip link, headings, landmarks or collapsible groups. The criterion covers blocks, not single links or short phrases, and it relies on the pages being a set that repeats the same blocks. The mechanism can be authored into the page or come from the browser or assistive technology, but you cannot assume every user has such a feature, so skip links or structure that you provide are the safer route.

Where public sites struggle

• Large megamenus that are always open in the tab order.
• Case-search and library catalog results pages with a long filter sidebar before the results.
• Alert bars and cookie bars that repeat above the page on every route.
• Pages with several <nav> regions that all sound the same to a screen reader.

Agencies often rely on one shared template, which is good news: one fix in the header repairs every page.

A skip link that lands somewhere useful

The first focusable element should be a link that jumps past repeated content. On a results page, a second link can jump past the filter sidebar. The target must exist and be focusable.

<body>
  <nav>… 60 links …</nav>
  <aside>… 25 filters …</aside>
  <section>…results…</section>
</body>

<body>
  <a class="skip" href="#results">Skip to search results</a>
  <nav aria-label="Primary">… 60 links …</nav>
  <aside aria-label="Filters">… 25 filters …</aside>
  <section id="results" tabindex="-1">…results…</section>
</body>

<style>
  .skip { position: absolute; top: -3rem; left: 0.5rem; }
  .skip:focus { top: 0.5rem; background: #fff; color: #000;
                padding: 0.5rem 1rem; z-index: 1000; }
</style>

Collapse the block instead

A technique that works without a link is to collapse the repeated block behind a button. Closed content is out of the tab order, so one Tab press passes it.

<nav id="site-menu">
  <a href="/a">…</a> <a href="/b">…</a> <!-- 60 links always focusable -->
</nav>

<button type="button" aria-expanded="false"
        aria-controls="site-menu" id="menu-btn">Menu</button>
<nav id="site-menu" aria-label="Primary" hidden>
  <a href="/a">…</a> <a href="/b">…</a>
</nav>
<script>
  const menuBtn = document.getElementById("menu-btn");
  const siteMenu = document.getElementById("site-menu");
  menuBtn.addEventListener("click", () => {
    const open = menuBtn.getAttribute("aria-expanded") === "true";
    menuBtn.setAttribute("aria-expanded", String(!open));
    siteMenu.hidden = open;
  });
</script>

Labelled landmarks

Screen reader users can jump between landmarks. When a page has more than one of the same kind, give each a distinct label so they can tell them apart. This is best practice rather than a failure of 2.4.1 itself.

<nav>…main site links…</nav>
<nav>…Home / Departments / Parks…</nav>

<nav aria-label="Primary">…main site links…</nav>
<nav aria-label="Breadcrumb">…Home / Departments / Parks…</nav>

Mobile apps

Native screens rarely repeat a large block of links on every screen, so this criterion maps mostly to web content. Where an app embeds repeated navigation, use heading traits and grouping so screen reader users can move past it.

How to test and when to ship

1. Load a page, press Tab once. Is there a skip link or a collapsed menu? Does it become visible on focus?
2. Activate it. Does focus land on the main content and does the next Tab move to the first control inside it?
3. With a screen reader, list landmarks and headings. Are multiple regions of the same type labelled?
4. Repeat on the results page and on pages with banners.

Common mistakes: display: none on the skip link, a target id that does not exist, and a link that moves the page but not the focus.

Ship it when the repeated header, menu and filters can be bypassed on every template, with the first Tab press or a collapsed control. For the barriers DOJ names, see common barriers.

Sources

• Understanding SC 2.4.1: Bypass Blocks (W3C), opens in a new tab
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), opens in a new tab

Standard version: WCAG 2.1 (W3C Recommendation, 5 June 2018), as named in the Title II web rule. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official ADA statute and regulations, and ask a lawyer how they apply to you.