Sémantique HTML
La sémantique HTML consiste à choisir les éléments HTML selon leur signification, pas leur apparence. Un <nav> dit « ceci est une navigation » aux navigateurs et aux lecteurs d'écran, là où un <div> ne transmet aucune information. C'est la base de l'accessibilité côté code : un HTML bien structuré rend le contenu compréhensible sans JavaScript ni attributs ARIA supplémentaires.
Un lecteur d'écran qui parcourt une page faite de <div> imbriqués annonce « groupe, groupe, groupe, cliquable ». Aucun repère. Aucune structure. C'est la « div soup ». Selon MDN, la sémantique en HTML consiste à utiliser chaque élément selon son rôle, pas selon son rendu visuel.
#Quel élément pour quel rôle ?
Un élément HTML sémantique communique sa fonction au navigateur et aux technologies d'assistance. Le critère WCAG 1.3.1 l'exige : la structure visible à l'écran doit aussi être lisible par le code.
Les balises de structure HTML5 créent automatiquement des landmarks :
<header>→ rôlebanner<nav>→ rôlenavigation<main>→ rôlemain<footer>→ rôlecontentinfo
Les lecteurs d'écran exploitent ces repères pour proposer des raccourcis de navigation. Un utilisateur de JAWS ou VoiceOver atteint le contenu principal en une touche, sans parcourir la page entière. La technique H101 du W3C détaille ce mécanisme.
La même logique s'applique aux éléments interactifs :
<!-- Non sémantique -->
<div class="btn" onclick="save()">Enregistrer</div>
<!-- Sémantique -->
<button type="button" onclick="save()">Enregistrer</button>Le <button> est focusable au clavier, activable avec Entrée ou Espace, et annoncé comme « bouton » par un lecteur d'écran. Sans une ligne de code supplémentaire. Le <div> ne fait rien de tout cela. Pour obtenir le même résultat, il faut ajouter role="button", tabindex="0" et des gestionnaires d'événements clavier.
#Le piège du sémantique cosmétique
L'erreur inverse est fréquente : choisir un élément pour son style par défaut. Un <blockquote> pour indenter du texte qui n'est pas une citation. Un <h3> parce que la taille de police convient.
Le lecteur d'écran annoncera « citation » ou « titre de niveau 3 ». Des informations fausses qui désorientent l'utilisateur.
La spécification ARIA in HTML du W3C pose un principe connu sous le nom de « première règle d'ARIA » : si un élément HTML natif fait le travail, utilisez-le. ARIA n'existe que pour les composants sans équivalent natif : onglets, carrousels, menus contextuels.
#En résumé
Chaque <nav>, <main>, <button> ou <header> donne un repère gratuit aux technologies d'assistance. Pas de JavaScript. Pas d'attributs ARIA. Choisissez vos éléments selon leur sens, pas selon leur apparence.