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.

Related Articles

Live Examples

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

before

after

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 role="banner">
<
a href="#main" class="sr-only sr-only-focusable">Skip to main content</a>
<
nav role="navigation">
<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" role="main" tabindex="-1">
<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;
}