Qu'est-ce que l'Arbre d'Accessibilite?
Chaque page web possede un arbre DOM que le navigateur construit a partir de votre HTML. A partir de ce DOM, le navigateur construit egalement un arbre d'accessibilite; une structure parallele reduite uniquement aux informations dont les technologies d'assistance ont besoin. Cela inclut les roles des elements, les noms accessibles, les etats et les relations. Les lecteurs d'ecran et autres outils utilisent exclusivement cet arbre pour presenter la page aux utilisateurs.
HTML-AAM: Comment les Elements se Mappent aux Roles
La specification HTML Accessibility API Mappings definit comment chaque element HTML se mappe a un role d'accessibilite. Par exemple, header devient banner, nav devient navigation et button conserve son role button. Les elements generiques comme div et span se mappent au role generic, qui ne dit rien aux technologies d'assistance sur l'objectif ou la fonction de l'element.
Le Probleme du Div Soup
Quand les developpeurs utilisent div et span pour tout au lieu d'elements semantiques, l'arbre d'accessibilite resultant est plat et sans signification. Les utilisateurs de lecteurs d'ecran ne peuvent pas sauter entre les landmarks, trouver les titres ou naviguer dans les listes. L'apparence visuelle peut etre identique, mais la structure sous-jacente ne fournit aucune information aux utilisateurs de technologie d'assistance qui en dependent.
Meilleures Pratiques pour le Balisage Semantique
Utilisez des elements HTML natifs qui portent des roles ARIA implicites chaque fois que possible. Reservez les attributs ARIA pour les cas ou aucun element natif n'existe. Assurez-vous que tous les landmarks ont des noms accessibles, toutes les images ont du texte alt descriptif et tous les controles de formulaire ont des labels associes. Testez avec de vrais lecteurs d'ecran en plus des outils automatises pour detecter les problemes que l'analyse statique ne peut pas detecter.
