string

aria-activedescendant

Identifie l'élément descendant actuellement actif dans un widget composite qui conserve le focus sur l'élément parent.

Description

aria-activedescendant permet à un widget composite (listbox, grid, tree, combobox…) de conserver le focus DOM sur son conteneur, tout en indiquant aux AT quel enfant est “actif” virtuellement. C’est le mécanisme recommandé pour gérer la navigation clavier dans de longues listes sans déplacer le focus réel.

Syntaxe

<ul role="listbox"
    tabindex="0"
    aria-activedescendant="option-2"
    aria-label="Pays">
  <li role="option" id="option-1">France</li>
  <li role="option" id="option-2">Allemagne</li>
  <li role="option" id="option-3">Italie</li>
</ul>

Exemples

Liste déroulante clavier :

<input type="text"
       role="combobox"
       aria-expanded="true"
       aria-autocomplete="list"
       aria-controls="liste-pays"
       aria-activedescendant="opt-de" />
<ul id="liste-pays" role="listbox">
  <li role="option" id="opt-fr">France</li>
  <li role="option" id="opt-de" aria-selected="true">Allemagne</li>
  <li role="option" id="opt-it">Italie</li>
</ul>

Navigation clavier :

listbox.addEventListener('keydown', e => {
  if (e.key === 'ArrowDown') {
    const nextId = getNextOptionId();
    listbox.setAttribute('aria-activedescendant', nextId);
    document.getElementById(nextId).scrollIntoView({ block: 'nearest' });
  }
});

Notes

Focus sur le parent : avec aria-activedescendant, le focus DOM reste sur le conteneur. L’élément “actif” n’a pas de focus DOM réel — les lecteurs d’écran lisent l’ID référencé.

IDs uniques requis : chaque descendant potentiellement actif doit avoir un id unique dans la page.

Alternative : déplacer le vrai focus sur chaque option (roving tabindex) est plus simple à implémenter mais moins adapté aux très longues listes.

Support navigateurs