ARIA Authoring Practices Guide

La spécification ARIA définit un vocabulaire de rôles, d’états et de propriétés. L’ARIA Authoring Practices Guide explique comment les utiliser concrètement : quelles interactions au clavier chaque patron requiert, comment le focus se déplace dans un composant, ce qui doit être annoncé lors d’un changement d’état, et quelle structure le DOM doit avoir.

Ce que contient l’APG

L’APG documente l’implémentation canonique de chaque patron de composant que la spécification ARIA a été conçue pour prendre en charge :

• Zones de liste déroulante (comboboxes) — le patron de saisie avec autocomplétion, dont le comportement au clavier est presque systématiquement implémenté incorrectement.
• Boîtes de dialogue — modales et non modales, avec piège au focus complet et restauration du focus à la fermeture.
• Composants de divulgation — le patron simple afficher/masquer.
• Menus et barres de menus — ceux qui nécessitent une navigation par touches fléchées, pas seulement par tabulation.
• Onglets — paires onglet/panneau avec navigation au clavier par flèches et sémantique d’activation automatique ou manuelle.
• Arborescences (treeviews) — navigation hiérarchique de type arbre de fichiers.
• Zones de liste (listboxes) — sélection simple et multiple.
• Boutons de spin, curseurs, carrousels et une douzaine d’autres.

Chaque page de patron comprend trois parties : un exemple interactif en direct, le tableau des interactions au clavier, et les attributs ARIA utilisés. On y trouve également des patrons de points de repère — des indications sur <header>, <nav>, <main> et les rôles ARIA correspondants — ainsi qu’une section sur les anti-patrons expliquant ce qu’il ne faut pas faire.

Quand y recourir

L’APG est particulièrement utile lorsqu’on s’apprête à créer un composant pour lequel il n’existe pas d’élément HTML natif. Avant d’écrire la moindre ligne de code, il convient de vérifier si l’APG propose déjà le patron. Presque toujours :

• Les interactions au clavier à implémenter sont déjà spécifiées.
• La structure du DOM est déjà documentée.
• Les attributs ARIA sont déjà définis.

Négliger cette étape, c’est risquer de livrer des composants « accessibles » qui déroutent les lecteurs d’écran d’une façon qu’aucun outil automatisé ne détecte. L’APG fait la différence entre une combobox qui fonctionne pour tout le monde et une qui compile mais casse pour les utilisateurs de lecteur d’écran.

Ce que l’APG n’est pas explicitement

L’APG n’est pas une spécification normative. Les documents normatifs sont la spécification ARIA elle-même et WCAG. L’APG est un guide : implémenter un composant exactement comme l’APG l’indique est la voie recommandée, mais pas la seule voie valide. Cela dit, s’en écarter sans raison documentée est le signe qu’on ne comprend peut-être pas entièrement le patron.

L’APG ne remplace pas non plus le HTML natif. Si <select> convient pour votre liste déroulante, il faut utiliser <select> — et ne pas recourir au patron de combobox de l’APG simplement parce qu’il paraît plus avancé.