Une page utilisable par tous

Beaucoup de personnes naviguent sans voir la page : avec un lecteur d'écran, qui la lit à voix haute, ou au clavier seul. Tout ce que les leçons précédentes ont montré les aide déjà : une langue déclarée, un plan de titres, des étiquettes, des textes de remplacement, des zones sémantiques.

Ce qui n'a pas de texte

Un bouton qui ne contient qu'une icône -- une croix, une loupe -- n'a pas de nom lisible :

<button class="fermer">✕</button>

Un lecteur d'écran annonce « bouton, multiplication » ou « bouton », sans plus. L'attribut aria-label lui donne un nom :

<button class="fermer" aria-label="Fermer la fenêtre">✕</button>

Un bouton est un bouton

Un <div> qu'un script rend cliquable ressemble à un bouton, mais ne l'est pas : il ne reçoit pas le focus au clavier, ne réagit pas à la touche Entrée, et n'est pas annoncé comme bouton. <button> fait tout cela sans une ligne de code. De même, un lien (<a>) emmène ailleurs, un bouton agit sur la page.

La règle générale

Utiliser l'élément HTML prévu pour ce qu'on fait. Les attributs aria- ne servent qu'à combler ce qu'aucun élément ne dit : ils ne rendent pas un <div> accessible.