aria-activedescendant

Wanneer gebruiken

Op een samengestelde widget waarbij één tab-stop volstaat maar de gebruiker toch een markering over meerdere items moet kunnen bewegen — een combobox-invoerveld met een keuzelijst-popup, een listbox met één tab-stop, een treegrid, een datagrid. De DOM-focus blijft op het containerelement (het invoerveld, de listbox, het raster). Wanneer de gebruiker pijltjestoetsen indrukt, werkt men aria-activedescendant bij naar het ID van het nieuw gemarkeerde kind, en kondigt hulptechnologie het aan alsof de focus daarheen is verplaatst.

Het alternatieve patroon is roving tabindex: de DOM-focus daadwerkelijk verplaatsen en tabindex-waarden aanpassen. Kies aria-activedescendant wanneer het vasthouden van de browserfocus op de container de code vereenvoudigt — doorgaans omdat de container ook de plek is waar de gebruiker typt of waar toetsenbordsnelkoppelingen zijn gekoppeld.

Gedrag

De waarde is een enkel element-ID — nooit een lijst. Het gerefereerde element moet een afstammeling zijn van de container die het attribuut aria-activedescendant heeft (of via aria-owns wordt beheerd). Wanneer de waarde verandert, verschuift de positie van de “virtuele focus” in de toegankelijkheidsstructuur naar dat element en kondigt hulptechnologie het label, de rol en de toestand aan.

Twee zaken blijven de verantwoordelijkheid van de ontwikkelaar:

• Visuele opmaak. Hulptechnologie weet waar de virtuele focus is, maar de browser tekent geen focusring op het onderliggende element. Voeg zelf markeringsstijlen toe, vaak via een klasse die synchroon wordt in- en uitgeschakeld.
• Scrollen. Als het actieve onderliggende element buiten beeld valt, moet men het in beeld scrollen; de browser doet dat niet automatisch.

Wanneer de popup sluit of de widget de focus verliest, dient men aria-activedescendant te wissen naar een lege tekenreeks of het attribuut te verwijderen.

Veelvoorkomende fouten

• Verwijzen naar een ID dat geen afstammeling is (en niet via aria-owns wordt beheerd). De hulptechnologie negeert de verwijzing.
• Patronen mengen: zowel tabindex="0" op het onderliggende element instellen als aria-activedescendant op de container. Kies één focusstrategie; beide tegelijk werken elkaar tegen.
• Vergeten de visuele markering bij te werken wanneer het attribuut verandert — ziende gebruikers zien geen beweging terwijl gebruikers van hulptechnologie de verplaatsing horen.
• Een verouderd ID laten staan nadat de optie uit de lijst is verwijderd (gefilterde combobox-resultaten, bijvoorbeeld).
• aria-activedescendant bijwerken bij het bewegen van de muis. Het attribuut moet uitsluitend het door het toetsenbord aangestuurde actieve item bijhouden.
• Het instellen op een element dat het onderliggende element niet in de toegankelijkheidsstructuur bevat (vergeten aria-owns voor een geportalde lijst).

Voorbeeld

<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>