aria-activedescendant

När du ska använda det

På en sammansatt widget där du vill ha ett enda tabbstopp men användaren ändå behöver flytta markering bland många element — combobox-inmatning med en listbox-popup, listbox med ett tabbstopp, treegrid, datagrid. DOM-fokus stannar på behållaren (inmatningsfältet, listboxen, tabellgittret). När användaren trycker på piltangenter uppdaterar du aria-activedescendant till ID:t för det nyfokuserade barnet, och hjälpmedelsteknik meddelar det som om fokus hade flyttat dit.

Det alternativa mönstret är roving tabindex: flytta DOM-fokus faktiskt och justera tabindex-värden. Välj aria-activedescendant när det förenklar din kod att hålla webbläsarfokus på behållaren — typiskt för att behållaren också är platsen där användaren skriver eller där tangentbordsgenvägar är kopplade.

Hur det fungerar

Värdet är ett enstaka element-ID — aldrig en lista. Det refererade elementet måste vara ett barn till behållaren som har attributet aria-activedescendant (eller ägas via aria-owns). När värdet ändras flyttas “virtuellt fokus” i tillgänglighetsträdet till det elementet och hjälpmedelsteknik meddelar dess etikett, roll och tillstånd.

Två saker du fortfarande ansvarar för:

• Visuell stil. Hjälpmedelsteknik vet var det virtuella fokuset är, men webbläsaren ritar inte en fokusring runt barnet. Lägg till din egen markerings-CSS, vanligen via en klass som växlas i synk.
• Rullning. Om det aktiva barnet är utanför vyns nederkant måste du rulla det in i vyn; webbläsaren gör det inte.

När popupen stängs eller widgeten tappar fokus, rensa aria-activedescendant till en tom sträng eller ta bort attributet.

Vanliga fel

• Pekar på ett ID som inte är ett barn (och inte ägs via aria-owns). Hjälpmedelsteknik ignorerar referensen.
• Blandade mönster: att tillämpa tabindex="0" på barnet och sätta aria-activedescendant på behållaren. Välj en fokusstrategi; att göra båda skapar konflikt.
• Glömmer att uppdatera den visuella markeringen när attributet ändras — seende användare ser ingen rörelse medan hjälpmedelsanvändare hör rörelsen.
• Lämnar ett föråldrat ID kvar efter att alternativet tagits bort från listan (t.ex. filtrerade combobox-resultat).
• Uppdaterar aria-activedescendant vid muspekaren. Attributet ska bara spåra det tangentbordsdrivna aktiva elementet.
• Sätter det på ett element som inte innehåller barnet i AT-trädet (glömde aria-owns för en portallad lista).

Exempel

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