37. Bases de l'accessibilité (ARIA et balises sémantiques)

L'accessibilité du web (A11y) consiste à concevoir des sites web utilisables par les personnes en situation de handicap. Le HTML est la première étape vers la construction de sites accessibles.

37.1 Le rôle du HTML sémantique

Les lecteurs d'écran s'appuient sur les balises sémantiques pour interpréter la structure de la page.

• Si vous utilisez une balise <nav>, un utilisateur de lecteur d'écran peut sauter directement à la navigation.
• Si vous n'utilisez que des éléments <div>, le lecteur d'écran ne voit que des boîtes génériques, ce qui rend la navigation difficile.

37.2 Attributs ARIA (Accessibility Rich Internet Applications)

Les attributs ARIA fournissent une signification sémantique supplémentaire aux éléments non sémantiques ou dynamiques.

Rôles ARIA

Si vous devez utiliser un <div> pour un bouton, vous pouvez lui donner un rôle pour indiquer aux technologies d'assistance ce qu'il est.

html

États et propriétés ARIA

aria-label est utilisé pour fournir une étiquette descriptive aux éléments qui manquent de texte visible, comme les boutons avec icône uniquement.

html

Règle d'or d'ARIA : Si un élément HTML natif (comme <button>) fait l'affaire, utilisez-le plutôt que d'essayer d'ajouter de l'ARIA à un <div>.