Qu'est-ce que l'Arbre d'Accessibilité?
Chaque page web possede un arbre DOM que le navigateur construit à partir de votre HTML. A partir de ce DOM, le navigateur construit également un arbre d'accessibilité; une structure parallele reduite uniquement aux informations dont les technologies d'assistance ont besoin. Cela inclut les rôles des éléments, les noms accessibles, les états et les relations. Les lecteurs d'écran et autres outils utilisent exclusivement cet arbre pour présenter la page aux utilisateurs.
HTML-AAM: Comment les Éléments se Mappent aux Rôles
La spécification HTML Accessibility API Mappings définit comment chaque élément HTML se mappe à un rôle d'accessibilité. Par exemple, header devient banner, nav devient navigation et button conserve son rôle button. Les éléments génériques comme div et span se mappent au rôle generic, qui ne dit rien aux technologies d'assistance sur l'objectif ou la fonction de l'élément.
Le Problème du Div Soup
Quand les développeurs utilisent div et span pour tout au lieu d'éléments semantiques, l'arbre d'accessibilité resultant est plat et sans signification. Les utilisateurs de lecteurs d'écran ne peuvent pas sauter entre les landmarks, trouver les titres ou naviguer dans les listes. L'apparence visuelle peut être identique, mais la structure sous-jacente ne fournit aucune information aux utilisateurs de technologie d'assistance qui en dependent.
Meilleures Pratiques pour le Balisage Sémantique
Utilisez des éléments HTML natifs qui portent des rôles ARIA implicites chaque fois que possible. Reservez les attributs ARIA pour les cas ou aucun élément natif n'existe. Assurez-vous que tous les landmarks ont des noms accessibles, toutes les images ont du texte alt descriptif et tous les contrôles de formulaire ont des labels associés. Testez avec de vrais lecteurs d'écran en plus des outils automatises pour détecter les problèmes que l'analysé statique ne peut pas détecter.
