01Utiliser les grandes zones de page
header introduit une page ou une section, nav regroupe la navigation, main contient le contenu principal et footer termine la page ou la section. Gardez un seul main visible par page.
<header><a href="index.html">Studio</a></header>
<nav aria-label="Main">...</nav>
<main>
<h1>Our work</h1>
</main>
<footer>Contact and credits</footer>02Section, article ou div ?
Utilisez section pour un ensemble thématique, généralement avec un titre, article pour un contenu autonome et div pour regrouper des éléments sans leur ajouter de sens particulier.
<section aria-labelledby="services-title">
<h2 id="services-title">Services</h2>
<article>
<h3>Kitchen design</h3>
<p>A complete design service.</p>
</article>
</section>03Respecter l’ordre de lecture
L’ordre du code doit rester logique même sans CSS. Déplacer visuellement une barre latérale ne doit pas perturber la navigation au clavier. Privilégiez les éléments HTML natifs avant d’ajouter ARIA.
04À vous de jouer
Ajoutez dans l’article une section avec un titre et deux paragraphes.
HTML et CSS uniquement. Les scripts et l’envoi des formulaires sont désactivés.
Pour aller plus loin
Consultez les guides MDN et standard HTML Living Standard pour approfondir et connaître les bonnes pratiques des navigateurs actuels.