Sémantique et accessibilité

Ce que tu vas apprendre

• Pourquoi choisir l'élément qui correspond au sens du contenu.
• Découper une page avec <header>, <nav>, <main>, <article> et <footer>.
• Les bases de l'accessibilité en HTML : titres, alt, liens d'évitement.

Le problème des div

Voici une page de recettes qui n'utilise que des <div> :

<div class="haut">Mes recettes</div>
<div class="menu">Accueil, Recettes</div>
<div class="contenu">...</div>
<div class="bas">Mentions légales</div>

Le navigateur n'y voit que des boîtes anonymes. Un lecteur d'écran ne sait pas où est le menu, ni où commence le contenu principal.

La sémantique consiste à choisir l'élément dont le sens correspond au contenu. Les éléments sémantiques disent à la machine ce qu'ils contiennent, pas seulement comment l'afficher.

La page découpée

<body>
  <header>
    <h1>Mes recettes</h1>
    <nav>
      <a href="/">Accueil</a>
      <a href="/recettes">Recettes</a>
    </nav>
  </header>
  <main>
    <article>
      <h2>Tarte aux pommes</h2>
      <p>Une recette simple.</p>
    </article>
  </main>
  <footer>
    <p>Mentions légales</p>
  </footer>
</body>

Les éléments de structure

Ces éléments se comportent comme des boîtes, et le CSS les met en forme. Leur valeur est dans le sens qu'ils portent.

Quelques règles

• Un seul <main> visible par page.
• <header> et <footer> peuvent aussi apparaître dans un <article> pour son propre en-tête ou pied.
• Une <section> doit avoir un titre. Sans titre, utilise <div>.
• <article> convient à un contenu qu'on pourrait republier ailleurs sans le reste de la page.

Reste le <div> : il a toujours sa place quand aucun élément ne convient, par exemple pour regrouper des éléments uniquement pour les styler.

Pourquoi c'est important

Quelqu'un qui utilise un lecteur d'écran (un logiciel qui lit la page à voix haute) peut sauter d'une zone à l'autre : « aller au menu », « aller au contenu principal ». Cela ne marche que si ces zones existent.

Les moteurs de recherche et les modes lecture des navigateurs s'appuient aussi sur la structure. Le même code profite donc à tout le monde.

Les titres forment un plan

Les lecteurs d'écran permettent de parcourir la liste des titres d'une page, comme une table des matières. Ton plan doit donc être cohérent :

<h1>Mes recettes</h1>
  <h2>Desserts</h2>
    <h3>Tarte aux pommes</h3>
  <h2>Plats</h2>

Vérifie que chaque titre respecte la hiérarchie : jamais un <h4> juste sous un <h2>. Et ne choisis pas un niveau pour sa taille : c'est le rôle du CSS.

Le lien d'évitement

Au clavier, un utilisateur doit traverser tout le menu avant d'arriver au contenu, sur chaque page. Un lien d'évitement lui permet de sauter directement au contenu principal.

<a href="#contenu">Aller au contenu principal</a>
...
<main id="contenu">...</main>

Place-le en tout début de <body>. On le masque souvent en CSS jusqu'à ce qu'il reçoive le focus au clavier.

Nommer les zones répétées

Quand une page a deux <nav>, un lecteur d'écran annonce deux fois « navigation » sans distinction. Donne un nom à chacun avec aria-label :

<nav aria-label="Menu principal">...</nav>
<nav aria-label="Catégories de recettes">...</nav>

aria-label est un attribut qui fournit un nom lu par les technologies d'assistance. Utilise-le avec parcimonie.

Une petite liste de contrôle

1. La page a une langue (lang) et un <title> précis.
2. Les zones principales utilisent <header>, <nav>, <main>, <footer>.
3. Les titres suivent un ordre logique.
4. Chaque image porte un alt, ou un alt vide si elle est décorative.
5. Chaque lien a un texte qui se comprend seul.
6. Tout fonctionne au clavier : touche Tab pour avancer, Entrée pour activer.

À retenir

• Choisis l'élément selon le sens du contenu : un menu est un <nav>, pas un <div>.
• <header>, <nav>, <main>, <article> et <footer> donnent des repères aux lecteurs d'écran.
• Les titres forment le plan de la page : une hiérarchie logique, sans saut de niveau.
• alt, lang, un titre de page clair et des textes de liens précis sont les bases de l'accessibilité.
• Préfère un élément natif à un attribut aria-* chaque fois que c'est possible.