Bypass
Come mai una pagina dovrebbe contenere un'intestazione, uno skip link o una landmark region?
Accessibility
Perché una pagina dovrebbe contenere un'intestazione, uno skip link o una landmark region
Alcuni utenti si saranno trovati a navigare nel vostro sito senza poter usare il mouse, quindi potrebbe essere difficile per loro navigare a causa dei contenuti ripetuti: sarebbe quindi una buona idea fornire un modo per bypassarli.
Come viene visualizzato l'audit SeoChecker
Se una pagina non offre la possibilità di saltare i contenuti più ripetuti, SeoChecker lo segnalerà.
La pagina deve contenere uno skip link (un link di salto), un landmark (un punto di riferimento) o un elemento <header>.
Come posso migliorare la navigazione da tastiera?
Se aggiungete uno degli elementi precedentemente citati, la vostra pagina passerà l'audit.
In ogni caso, vi suggeriamo di migliorare l'esperienza dell'utente fornendo un link di salto e inserendo il contenuto della pagina in un elemento di riferimento, assicurandovi che ogni punto di riferimento rifletta il suo contenuto.
Date un'occhiata all'esempio seguente, in cui il contenuto si trova all'interno di un elemento di riferimento, è presente un link di salto e le intestazioni non vengono saltate:
<!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>
Ricordatevi di nascondere il link di salto con i 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;
}