aria-activedescendant

Hvornår bruges den

På et sammensat widget, hvor du vil have ét enkelt tab-stop, men brugeren stadig skal kunne flytte en markering hen over mange elementer — komboboks-input med listboks-popup, listboks med ét tab-stop, treegrid, datagrid. DOM-fokus forbliver på beholderelementet (input, listboks, gitteret). Når brugeren trykker på piletasterne, opdaterer du aria-activedescendant til ID’et på det nyligt fremhævede barn, og hjælpeteknologi annoncerer det, som om fokus var flyttet dertil.

Det alternative mønster er roving tabindex: flyt faktisk DOM-fokus og juster tabindex-værdier. Vælg aria-activedescendant, når det at holde browserfokus på beholderen forenkler din kode — typisk fordi beholderen også er stedet, hvor brugeren skriver, eller hvor tastaturgenveje er tilknyttet.

Hvordan den fungerer

Værdien er et enkelt element-ID — aldrig en liste. Det refererede element skal være et underordnet element i den beholder, der har aria-activedescendant-attributten (eller ejes via aria-owns). Når værdien ændres, flyttes det “virtuelle fokus’” position i tilgængelighedstræet til det element, og hjælpeteknologi annoncerer dets label, rolle og tilstand.

To ting har du stadig ansvar for:

• Visuel styling. Hjælpeteknologi ved, hvor det virtuelle fokus er, men browseren tegner ikke en fokusring på det underordnede element. Tilføj din egen fremhævnings-CSS, typisk via en klasse, der slås til/fra synkront.
• Rulning. Hvis det aktive underordnede element er under fold, skal du rulle det ind i visningen; browseren gør det ikke.

Når pop-up lukkes, eller widgetten mister fokus, skal du rydde aria-activedescendant til en tom streng eller fjerne attributten.

Hyppige fejl

• Pege på et ID, der ikke er et underordnet element (og ikke ejes via aria-owns). Hjælpeteknologi ignorerer referencen.
• Blande mønstre: anvende både tabindex="0" på det underordnede element og sætte aria-activedescendant på beholderen. Vælg én fokusstrategi; begge på én gang modvirker hinanden.
• Glemme at opdatere den visuelle fremhævning, når attributten ændres — seende brugere ser ingen bevægelse, mens hjælpeteknologi-brugere hører flytningen.
• Efterlade et forældet ID, efter at et valg er fjernet fra listen (f.eks. filtrerede komboboks-resultater).
• Opdatere aria-activedescendant ved musehover. Attributten bør kun spore det tastaturstyrte aktive element.
• Sætte den på et element, der ikke indeholder det underordnede element i tilgængelighedstræet (glemte aria-owns for en portalled liste).

Eksempel

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