Bypass
Why a page should contain a heading, skip link or landmark region
Accessibility
Why a page should contain a heading, skip link or landmark region
Some users will find themselves navigating your site without being able to use their mouse, so it may be difficult for them to navigate because of the repeated content: it would therefore be a good idea to provide a way of bypassing it.
How the SeoChecker audit is displayed
If a page does not give the possibility to skip repetitive content, SeoChecker will notify it.
The page should contain a skip link, a landmark or a <header> element.
How can I improve keyboard navigation?
If you add one of the previously mentioned elements, your page will pass the audit.
Anyway, we suggest you to improve the user experience by providing a skip link and by placing the page content in a landmark element, making sure that every landmark reflects its contents.
Have a look at the example below, where the content is inside a landmark, there is a skip link and headings are not skipped:
<!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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<h3>Sub-section heading</h3>
<p>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
</section>
</main>
</body>
</html>
Remember to hide the skip link with CSS:
/* style.css */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000000;
color: white;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}