Skip Link Implementation

A skip link is the simplest and most universally supported accessible pattern
on the web. Implemented correctly it takes fewer than ten lines of HTML and
CSS, requires no JavaScript, and dramatically improves the experience for
keyboard and screen reader users on every page of a site.
^[1]

---

The complete pattern

HTML — place as the very first element inside body:

• a href="#main-content" class="skip-link" — Skip to main content — /a
• (rest of page including navigation)
• main id="main-content" tabindex="-1" — (page content) — /main

CSS:

• .skip-link — position: absolute; left: -9999px; top: auto; width: 1px;
  height: 1px; overflow: hidden;
• .skip-link:focus — position: static; width: auto; height: auto;
  overflow: visible; padding: 8px 16px; background: #000; color: #fff;

The tabindex="-1" on main is essential — without it, activating the skip
link scrolls the page but does not move keyboard focus, so the next Tab
press lands back in the navigation.
^[2]

---

Styling considerations

The skip link must become visible when it receives focus. Sighted keyboard
users need to see it. Design it to be clearly readable — high contrast,
legible font size, positioned at the top of the viewport on focus.

A common pattern is to position it absolutely at the top-left of the screen
on focus, above the navigation bar, so it appears as a visible banner.

---

Multiple skip links

On pages with distinct navigable regions, multiple skip links may be
appropriate. Place them in a group at the top of the page:

• Skip to main content
• Skip to search
• Skip to navigation (useful on pages where navigation follows main content)

Each skip link must point to an element with a matching id and tabindex="-1".
^[3]

---

Verifying it works

After implementing, test as follows:

1. Load the page and immediately press Tab
2. The skip link should be the first element to receive focus and become visible
3. Press Enter — focus must move inside the main element
4. Press Tab again — the next focus stop should be the first interactive
   element inside main, not a navigation link

If step 3 fails, check that the target element has tabindex="-1" and that
the id matches the href exactly.

---

References

1. W3C Web Accessibility Initiative. Understanding Success Criterion 2.4.1: Bypass Blocks. https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html ↑
2. WebAIM. Skip Navigation Links. https://webaim.org/techniques/skipnav/ ↑
3. W3C. Technique G1: Adding a link at the top of each page that goes directly to the main content area. https://www.w3.org/WAI/WCAG22/Techniques/general/G1 ↑