Skip Links

Also known as "Skip Navigation" or "Skip to Content" links, Skip Links provides a user relying on keyboard or screen reader navigation a way to bypass the header navigation and get to the main content.

The Problem

Page content is often preceded by primary navigation, social icons, site search, and other header elements. Users navigating with a keyboard or screen reader need to navigate through this to get to the main content.

The Solution

A link at the top of the page before the header content that anchors to the main content of the page, allowing these users to skip the navigation much like a sighted user does visually.

Live Examples

Before illustrates the problem, After illustrates the solution. Click the header to see it larger in a modal.

Code Comparison

Code diff between the before and after examples above to show the changes necessary. To copy the final source click on the 'after' path link before the diff.

source

Comparing /examples/focus/skip-links/before/index.html to /examples/focus/skip-links/after/index.html

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Accessibility Solutions - Focus - Skip Links</title>

    <link rel="stylesheet" href="../../../presentation.css" />

    <link rel="stylesheet" href="skip-links.css" />

  </head>

  <body>

    <header>

      <a href="#main" class="sr-only sr-only-focusable">Skip to main content</a>

      <nav>

        <ul>

          <li><a href="#">Lorem</a></li>

          <li><a href="#">Architecto</a></li>

          <li><a href="#">Quas</a></li>

          <li><a href="#">Nobis</a></li>

          <li><a href="#">Eligendi</a></li>

          <li><a href="#">Quaerat</a></li>

        </ul>

      </nav>

    </header>

    <main id="main">

      <p>

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ea optio

        est adipisci beatae alias porro voluptatibus culpa dicta veniam, esse

        quidem nihil odio voluptatem error tempora nostrum minima magni et.

        Deleniti possimus corrupti mollitia cupiditate totam facere molestias,

        sunt amet exercitationem inventore odio veritatis eaque doloribus esse

        tenetur officia, odit hic obcaecati harum nostrum blanditiis ratione,

        fuga in? Dolorem tempore nemo saepe et tenetur nobis iste. Atque sequi a

        aliquid corrupti, ut fugit magni, laboriosam quo quidem fuga incidunt

        nemo modi consequatur distinctio quisquam provident impedit veritatis

        quam corporis recusandae. Amet delectus voluptatem ipsum earum debitis

        cupiditate iure, libero perferendis non eius explicabo porro minus

        temporibus nostrum corrupti iste. Accusamus, pariatur repudiandae!

        Exercitationem hic in deleniti culpa, rerum repellendus iure dolore

        blanditiis quisquam maiores, ipsa temporibus illum, sapiente officia

        repellat dignissimos minima beatae quaerat? Fugiat, molestiae sequi.

        Nulla assumenda quisquam, enim itaque voluptatem eum sed, suscipit

        doloribus ex officiis debitis vitae est. Excepturi ea, dicta expedita

        explicabo veritatis animi aspernatur quae, at molestias amet quasi ipsum

        ut labore totam ullam id accusamus, sit dolorem nihil repellendus?

        Excepturi et facere totam quibusdam vitae rerum, nulla a ut eveniet!

        Placeat dolor soluta consectetur praesentium obcaecati doloribus quidem

        consequuntur aliquam incidunt! Vel!

      </p>

      <p>

        Qui reiciendis nesciunt dignissimos facilis sed voluptates expedita nam

        assumenda quo dolore officia inventore mollitia repellat voluptatem,

        possimus architecto eos ad modi voluptatum sit vel? Fugiat, cumque

        voluptatum facilis consequatur ratione laudantium natus, voluptatibus

        dolores expedita harum repellendus sint nobis temporibus distinctio

        exercitationem accusantium porro iure praesentium. Dicta possimus

        numquam similique quisquam ullam repellat eos odio vel in cumque. Beatae

        quia vitae id itaque modi perspiciatis sit, aut incidunt fugit molestias

        ea quos dolores labore facere, totam unde. Maxime, saepe error tempora

        eius tenetur obcaecati assumenda nemo incidunt sit ea hic amet, dolorum,

        recusandae possimus autem optio. Voluptatibus nesciunt repellat saepe

        blanditiis odio, minus voluptate a quae quis eligendi harum ea

        architecto iste libero corporis laborum voluptatum illo, deleniti

        provident sunt illum? Quibusdam ratione aliquid, quasi vitae dignissimos

        culpa corrupti sapiente voluptate, commodi iusto tenetur nobis,

        blanditiis fugiat! Reprehenderit libero eveniet fuga doloribus eligendi

        a nostrum modi hic itaque placeat quaerat totam atque consectetur,

        dolorem cum, voluptate provident praesentium culpa impedit perferendis!

        Id obcaecati maxime magnam adipisci hic suscipit nemo. Impedit,

        distinctio autem sint incidunt ullam reprehenderit minima, consequuntur

        non ad maxime excepturi sed facere nulla tenetur magni nisi quae

        aspernatur repellat, assumenda aliquam. Nulla, voluptatem ullam.

        Maiores, labore sequi.

      </p>

      <p>

        Atque sint, porro asperiores quo voluptate aspernatur repellendus minima

        laborum! Laudantium doloribus accusamus quod voluptates repudiandae

        tenetur quo, quas rerum! Voluptatibus aspernatur dolor ea rem eum

        facilis maiores porro quas quis! Doloribus amet voluptatibus harum ex

        libero quod assumenda necessitatibus nulla porro incidunt fugit

        praesentium ab ad adipisci, commodi magni doloremque ipsa quaerat vero

        magnam? Eius qui fuga provident temporibus excepturi voluptatum? At

        asperiores officia dolorem laboriosam quasi voluptas veniam corrupti!

        Dolore eaque nemo nostrum sint assumenda, maxime et nisi similique!

        Totam sequi vitae amet eligendi sunt? Eius animi repudiandae expedita

        voluptate exercitationem doloremque voluptatum iure quae corporis

        blanditiis neque qui deserunt culpa praesentium dolor, officiis, iusto

        veniam inventore possimus eos doloribus nesciunt, sint facere odio.

        Tempora laudantium corrupti exercitationem excepturi rerum ipsam vitae

        cumque aspernatur, autem repellat ratione quam magni repellendus maiores

        saepe aperiam atque dolore eius eum esse ducimus ea! Architecto autem

        nobis facilis pariatur perferendis, aliquid atque asperiores numquam

        recusandae quaerat dolores at vitae blanditiis deserunt repellendus

        magnam consectetur, error voluptatem ex doloribus culpa sed repellat

        qui. Dolores temporibus nesciunt fugiat beatae, harum iure expedita,

        consequatur alias inventore reiciendis ut numquam? Dolore cumque error

        exercitationem sed, facere voluptatibus consequatur non maiores eos

        praesentium sapiente blanditiis id. Voluptates.

      </p>

    </main>

  </body>

</html>

styles

Comparing /examples/focus/skip-links/before/skip-links.css to /examples/focus/skip-links/after/skip-links.css

nav ul li {

  display: inline-block;

}



.sr-only {

  border: 0;

  clip: rect(0,0,0,0);

  height: 1px;

  margin: -1px;

  overflow: hidden;

  padding: 0;

  position: absolute;

  width: 1px;

}

.sr-only-focusable:active,.sr-only-focusable:focus {

  clip: auto;

  height: auto;

  margin: 0;

  overflow: visible;

  position: static;

  width: auto;

}