The page does not contain a heading, skip link, or landmark region
For users who cannot use a mouse, content that's repeated on pages across your site can make navigation difficult. For example, screen reader users may have to move through many links in a navigation menu to get to the main content of the page.
Providing a way to bypass repetitive content makes non-mouse navigation easier.
How this Lighthouse audit fails #
Lighthouse flags pages that don't provide a way to skip repetitive content:
Lighthouse checks that the page contains at least one of the following:
How to improve keyboard navigation #
Passing the Lighthouse audit is straightforward: add a heading, a skip link, or a landmark to your page.
However, to meaningfully improve the navigational experience for assistive technology users,
- Place all page content inside a landmark element.
- Make sure each landmark accurately reflects the kind of content it contains.
- Provide a skip link.
In this example, all content is inside a landmark, the headings create an outline of the page's content, no headings are skipped, and a skip link is provided to skip the navigation menu:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<a class="skip-link" href="#maincontent">Skip to main</a>
<h1>Page title</h1>
<nav>
<ul>
<li>
<a href="https://google.com">Nav link</a>
<a href="https://google.com">Nav link</a>
<a href="https://google.com">Nav link</a>
</li>
</ul>
</nav>
<main id="maincontent">
<section>
<h2>Section heading</h2>
<p>
Bacon ipsum dolor amet brisket meatball chicken, cow hamburger pork belly
alcatra pig chuck pork loin jerky beef tri-tip porchetta shank. Kevin porchetta
landjaeger, ribeye bacon strip steak pork chop tenderloin andouille.
</p>
<h3>Sub-section heading</h3>
<p>
Prosciutto pork chicken chuck turkey tongue landjaeger shoulder picanha capicola
ball tip meatball strip steak venison salami. Shoulder frankfurter short ribs
ham hock, ball tip pork chop tenderloin beef ribs pastrami filet mignon.
</p>
</section>
</main>
</body>
</html>You usually don't want to show the skip link to mouse users, so it's conventional to use CSS to hide it offscreen until it receives focus:
/* style.css */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}See the Headings and landmarks post for more information.
Resources #
- Source code for The page does not contain a heading, skip link, or landmark region audit
- Page must have means to bypass repeated blocks (Deque University)