aria-activedescendant

Quand l’utiliser

Sur un widget composite où vous souhaitez un seul point de tabulation mais où l’utilisateur doit tout de même déplacer la mise en évidence entre de nombreux éléments — une saisie combobox avec un popup listbox, une listbox à point de tabulation unique, un treegrid, un datagrid. Le focus DOM reste sur l’élément conteneur (la saisie, la listbox, la grille). Lorsque l’utilisateur appuie sur les touches de direction, vous mettez à jour aria-activedescendant avec l’ID de l’enfant nouvellement mis en évidence, et les technologies d’assistance l’annoncent comme si le focus y avait été déplacé.

Le pattern alternatif est le tabindex itinérant : déplacer réellement le focus DOM et ajuster les valeurs tabindex. Choisissez aria-activedescendant lorsque maintenir le focus navigateur sur le conteneur simplifie votre code — typiquement parce que le conteneur est aussi l’endroit où l’utilisateur saisit du texte ou où les raccourcis clavier sont attachés.

Comportement

La valeur est un ID d’élément unique — jamais une liste. L’élément référencé doit être un descendant du conteneur qui porte l’attribut aria-activedescendant (ou possédé via aria-owns). Lorsque la valeur change, la position du « focus virtuel » dans l’arbre d’accessibilité se déplace vers cet élément et les technologies d’assistance annoncent son libellé, son rôle et son état.

Deux responsabilités vous incombent :

• Le style visuel. Les technologies d’assistance savent où se trouve le focus virtuel, mais le navigateur n’affiche pas d’anneau de focus sur le descendant. Ajoutez votre propre CSS de mise en évidence, souvent via une classe basculée en synchronisation.
• Le défilement. Si le descendant actif est hors de la zone visible, vous devez le faire défiler en vue ; le navigateur ne le fera pas.

Lorsque le popup se ferme ou que le widget perd le focus, effacez aria-activedescendant en lui attribuant une chaîne vide ou supprimez l’attribut.

Erreurs courantes

• Pointer vers un ID qui n’est pas un descendant (et non possédé via aria-owns). Les technologies d’assistance ignorent la référence.
• Mélanger les patterns : appliquer à la fois tabindex="0" sur le descendant et définir aria-activedescendant sur le conteneur. Choisissez une stratégie de focus ; les deux combinées se contrarient.
• Oublier de mettre à jour la mise en évidence visuelle lors du changement d’attribut — les utilisateurs voyants ne voient aucun mouvement tandis que les utilisateurs de technologies d’assistance entendent le déplacement.
• Laisser un ID obsolète après la suppression de l’option de la liste (par exemple, les résultats filtrés d’une combobox).
• Mettre à jour aria-activedescendant lors du survol à la souris. L’attribut doit uniquement suivre l’élément actif piloté au clavier.
• Le définir sur un élément qui ne contient pas le descendant dans l’arbre AT (oubli d’aria-owns pour une liste dans un portail).

Exemple

<label for="fruit">Fruit</label>
<input
  id="fruit"
  role="combobox"
  type="text"
  aria-controls="fruit-listbox"
  aria-expanded="true"
  aria-activedescendant="fruit-2"
  autocomplete="off"
>
<ul id="fruit-listbox" role="listbox">
  <li id="fruit-1" role="option">Apple</li>
  <li id="fruit-2" role="option" class="is-active">Banana</li>
  <li id="fruit-3" role="option">Cherry</li>
</ul>