Construisez une page qui reste lisible sur mobile et fonctionne au clavier.
<a class="skip-link" href="#content">Aller au contenu</a>
<header>
<nav aria-label="Navigation principale">
<a href="#program">Programme</a>
<a href="#register">Inscription</a>
</nav>
</header>
<main id="content">
<h1>Apprendre le Web en construisant</h1>
<form id="register">
<label for="email">Adresse e-mail</label>
<input id="email" type="email" required autocomplete="email">
<button type="submit">S’inscrire</button>
</form>
</main>* { box-sizing: border-box; }
main { width: min(100% - 2rem, 70rem); margin-inline: auto; }
a:focus-visible, button:focus-visible, input:focus-visible {
outline: .2rem solid #f0a000;
outline-offset: .2rem;
}
.skip-link { position: absolute; transform: translateY(-150%); }
.skip-link:focus { position: fixed; transform: none; }Testez sans souris, zoomez à 200 %, réduisez la fenêtre à environ 320 pixels et vérifiez que le focus reste visible. Les outils automatiques complètent mais ne remplacent pas ces tests manuels.