Accessibilité : alt, hiérarchie de titres et ARIA

Maîtrisez les textes alternatifs, une hiérarchie de titres exploitable au lecteur d'écran et un usage d'ARIA limité aux cas où le HTML natif ne suffit pas.

9 min · 3 questions

L'accessibilité n'est pas une couche cosmétique ajoutée en fin de projet : c'est une propriété structurelle de votre HTML. Premier chantier, l'attribut alt. Un bon texte alternatif décrit la fonction de l'image dans son contexte, pas son apparence pixel par pixel. Un graphique de ventes ne se décrit pas « graphique en barres bleues » mais par l'information qu'il porte. Et une image purement décorative doit recevoir un alt="" vide : c'est le signal explicite qui dit au lecteur d'écran de l'ignorer. Omettre l'attribut est pire que tout, car le lecteur d'écran annonce alors le nom du fichier.

<img src="sales-chart.png"
     alt="Ventes 2025 : +18 % au dernier trimestre">

<img src="divider-ornament.png" alt="">

Deuxième chantier : la hiérarchie de titres. Les utilisateurs de lecteurs d'écran naviguent massivement de titre en titre pour se construire une carte mentale de la page. Votre plan h1 → h2 → h3 doit donc refléter la structure logique du contenu, jamais la taille visuelle souhaitée. Deux règles non négociables : un seul h1 par page, et aucun saut de niveau (pas de h4 directement sous un h2). Si un titre vous semble « trop gros », corrigez-le en CSS, pas en dégradant le niveau sémantique.

<h1>Tableau de bord</h1>
<section>
  <h2>Statistiques</h2>
  <h3>Visites mensuelles</h3>
  <h3>Taux de conversion</h3>
</section>
<section>
  <h2>Rapports exportables</h2>
</section>

ARIA devient légitime quand le HTML natif n'exprime pas un état dynamique : un menu déplié ou replié, une zone mise à jour en direct, un onglet actif. Les attributs clés sont aria-expanded (état ouvert/fermé), aria-controls (lien vers l'élément piloté) et aria-live (annonce des mises à jour). Retenez le principe : le HTML natif fournit les rôles, ARIA complète avec les états et propriétés que votre JavaScript fait évoluer.

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/profile">Profil</a></li>
  <li><a href="/settings">Paramètres</a></li>
</ul>

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Comment traiter une image purement décorative ?
   • Lui donner un alt descriptif comme alt="ornement"
   • Lui donner un attribut alt vide : alt=""
   • Supprimer complètement l'attribut alt
   • Utiliser title à la place de alt
2. Sous un h2, vous voulez un sous-titre visuellement discret. Que faites-vous ?
   • Un h5, car il est plus petit par défaut
   • Un h3 dont vous réduisez la taille en CSS
   • Un div avec une classe de titre
3. Quand est-il pertinent d'ajouter des attributs ARIA ?
   • Sur tous les éléments interactifs, par précaution
   • Quand aucun élément HTML natif n'exprime le rôle ou l'état requis
   • Pour améliorer le référencement de la page