Leçon 2 / 6

Leçon 02 · Partie 1 — Comprendre

HTML sémantique

Le HTML, c'est plus que du dessin

La plupart des débutants pensent que le HTML, c'est juste pour la structure visuelle. Une boîte ici, un titre là, du texte en dessous. Mais pour un lecteur d'écran, le HTML c'est le sens même du contenu.

Quand une personne aveugle visite ton site, son lecteur d'écran lit le HTML à voix haute. Il annonce : "Bouton : Valider". "Navigation principale". "Titre de niveau 2 : À propos". Si tu utilises des <div> pour tout, il lit : "Div. Div. Div." Impossible de comprendre quoi que ce soit.

⚠️

Le HTML non sémantique rend un site inutilisable avec un lecteur d'écran. C'est comme retirer tous les panneaux de signalisation d'une ville. On voit les rues, mais impossible de savoir où on est.

Les balises structurelles à connaître

HTML5 a introduit des balises sémantiques qui donnent un sens précis à chaque partie du contenu. Les voici, et ce qu'elles signifient pour un lecteur d'écran :

🔝

`<header>`

En-tête de la page ou d'une section. Souvent le logo + navigation. Annoncé "bannière" par les lecteurs d'écran.

🧭

`<nav>`

Zone de navigation principale. Permet aux utilisateurs de lecteurs d'écran de sauter directement au menu.

📄

`<main>`

Contenu principal de la page. Une seule balise par page. Les lecteurs d'écran proposent de sauter directement ici.

📰

`<article>`

Contenu autonome et réutilisable : un article de blog, une carte produit, un commentaire.

📦

`<section>`

Section thématique du contenu. Doit avoir un titre. Moins autonome qu'un article.

ℹ️

`<aside>`

Contenu secondaire, lié mais pas essentiel. Sidebar, encadré, publicité.

👇

`<footer>`

Pied de page. Souvent liens légaux, copyright, liens secondaires.

L'erreur classique : le <div> pour tout

Le <div> est une boîte sans aucune signification sémantique. Il est parfait pour regrouper des éléments visuellement. Mais il ne dit rien à un lecteur d'écran, ni à Google.

Structure HTML — Comparaison

<!-- ✗ Non sémantique : lecteur d'écran dit "div, div, div..." -->
<div class="header">Logo</div>
<div class="nav">Menu</div>
<div class="content">Texte</div>
<div class="footer">Bas</div>

<!-- ✓ Sémantique : chaque balise a un sens clair -->
<header>Logo</header>
<nav>Menu</nav>
<main>Texte</main>
<footer>Bas</footer>

Le cas critique : <button> vs <div>

C'est l'erreur la plus courante et la plus grave pour l'accessibilité. Un <div> stylisé en bouton ne se comporte pas comme un bouton pour un lecteur d'écran ou un utilisateur clavier.

button vs div

<!-- ✗ Mauvais : pas focusable au clavier, pas annoncé comme bouton -->
<div class="btn" onclick="valider()">Valider</div>

<!-- ✓ Bon : focusable au clavier, Entrée/Espace activent l'action -->
<button type="submit">Valider</button>

Un vrai <button> est automatiquement :

Focusable au clavier (Tab pour l'atteindre, Entrée ou Espace pour l'activer)
Annoncé "bouton" par les lecteurs d'écran
Activable avec les technologies d'assistance
Stylisable avec CSS exactement comme un div

✅

Règle simple : si ça clique et déclenche une action sur la page, utilise <button>. Si ça navigue vers une autre URL, utilise <a href>. Ne jamais utiliser un <div> ou <span> avec onclick.

Les liens doivent avoir du sens

Les lecteurs d'écran peuvent lister tous les liens d'une page. Imagine entendre une liste de : "Cliquez ici", "Cliquez ici", "En savoir plus", "Cliquez ici"… Impossible de savoir où chaque lien mène.

Textes de liens

<!-- ✗ Mauvais : aucun sens hors contexte -->
<a href="/article">Cliquez ici</a>

<!-- ✓ Bon : on sait où on va -->
<a href="/article">Lire l'article sur le HTML sémantique</a>

L'attribut role

Parfois on hérite d'un vieux code ou d'un composant personnalisé qui ne peut pas être refactorisé facilement. L'attribut role permet alors d'indiquer aux technologies d'assistance quel est le rôle de cet élément.

Attribut role

<!-- Informer le lecteur d'écran du rôle d'un élément custom -->
<div role="button" tabindex="0">Valider</div>

<!-- Roles courants : button, navigation, main, banner, contentinfo -->
<div role="navigation" aria-label="Menu principal">...</div>

⚠️

role est une solution de contournement, pas la solution idéale. La première règle des ARIA : ne pas utiliser ARIA si une balise HTML native fait le travail. Utilise <button> plutôt que role="button" dès que c'est possible.

Les titres : une structure qui guide

Les utilisateurs de lecteurs d'écran naviguent souvent de titre en titre pour trouver ce qui les intéresse. Comme on scanne visuellement une page en lisant les sous-titres. La structure des titres (h1 → h2 → h3) doit être logique et hiérarchique.

Hiérarchie des titres

<!-- ✗ Mauvais : sauts de niveaux, h3 sans h2 -->
<h1>Mon site</h1>
<h3>Section produits</h3>
<h2>À propos</h2>

<!-- ✓ Bon : hiérarchie logique -->
<h1>Mon site</h1>
  <h2>Section produits</h2>
    <h3>Produit 1</h3>
  <h2>À propos</h2>

// À retenir

Utilise les balises sémantiques HTML5 : <header>, <nav>, <main>, <article>, <footer>. Elles ont un sens pour les lecteurs d'écran.
Jamais de <div> ou <span> pour les boutons. Toujours <button>.
Les textes de liens doivent être compréhensibles hors contexte. Pas de "cliquez ici".
role est une solution de secours. Préfère toujours la bonne balise HTML native.
La hiérarchie des titres (h1 → h2 → h3) doit être logique et sans sauts.