Une structure qui a du sens
<header>…</header>
<nav aria-label="Navigation principale">…</nav>
<main id="content">
<h1>Mes livres</h1>
…
</main>
<footer>…</footer>Ces éléments décrivent leur rôle, contrairement à une suite de div anonymes. Une page possède normalement un titre principal h1, puis des h2 pour ses grandes sections.
Les formulaires doivent rester compréhensibles
- Chaque input possède un label relié par for et id.
- Les erreurs apparaissent près du champ et utilisent role=alert.
- Le focus reste visible au clavier.
- Le bouton décrit l’action : Enregistrer plutôt que OK.
- La couleur n’est jamais le seul signal d’erreur.
input:focus-visible,
button:focus-visible,
a:focus-visible {
outline: 3px solid #5b35e8;
outline-offset: 3px;
}Métadonnées minimales par page
<html lang="fr">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mes livres — Reading List</title>
<meta name="description" content="Gérez votre bibliothèque personnelle.">lang aide la prononciation par les technologies d’assistance. title distingue les onglets. La description résume la page pour les moteurs et les aperçus, sans garantir à elle seule un bon référencement.
Contrôle manuel en cinq minutes
- Parcourez toute la page avec Tab uniquement.
- Zoomez à 200 % et cherchez un contenu coupé.
- Réduisez la fenêtre à la largeur d’un téléphone.
- Soumettez un formulaire invalide et lisez l’ordre des messages.
- Désactivez le CSS : le document doit conserver un ordre logique.