aria-activedescendant

Kiedy używać

W złożonym widżecie, gdzie chcemy utrzymać jeden punkt Tab, lecz użytkownik nadal musi przesuwać zaznaczenie po wielu elementach — pole komboboxu z wyskakującym listboxem, listbox z jednym punktem Tab, treegrid, datagrid. Fokus DOM pozostaje na elemencie kontenera (polu wejściowym, listboxie, gridzie). Gdy użytkownik naciska klawisze strzałek, aktualizujesz aria-activedescendant do ID nowo podświetlonego elementu potomnego, a technologia asystująca ogłasza go tak, jakby fokus naprawdę się tam przeniósł.

Alternatywnym wzorcem jest roving tabindex: faktyczne przesuwanie fokusu DOM i korygowanie wartości tabindex. Wybierz aria-activedescendant, gdy utrzymanie fokusu przeglądarki na kontenerze upraszcza kod — zazwyczaj dlatego, że kontener jest miejscem, gdzie użytkownik wpisuje tekst lub gdzie są przypisane skróty klawiaturowe.

Jak działa

Wartością jest pojedyncze ID elementu — nigdy lista. Element wskazany przez ID musi być potomkiem kontenera z atrybutem aria-activedescendant (lub być własnością przez aria-owns). Gdy wartość się zmienia, „wirtualny fokus” w drzewie dostępności przenosi się na ten element, a technologia asystująca ogłasza jego etykietę, rolę i stan.

Dwie rzeczy nadal należą do Ciebie:

• Stylizacja wizualna. Technologia asystująca wie, gdzie jest wirtualny fokus, lecz przeglądarka nie rysuje pierścienia fokusu na potomku. Dodaj własny wyróżnik CSS, często przez przełączanie klasy w synchronizacji.
• Przewijanie. Jeśli aktywny potomek jest poza widocznym obszarem, musisz go przewinąć do widoku — przeglądarka tego nie zrobi.

Gdy wyskakujące okno się zamknie lub widżet straci fokus, wyczyść aria-activedescendant do pustego ciągu lub usuń atrybut.

Częste błędy

• Wskazywanie ID, które nie jest potomkiem kontenera (i nie jest własnością przez aria-owns). Technologia asystująca ignoruje takie odwołanie.
• Mieszanie wzorców: zastosowanie zarówno tabindex="0" na potomku, jak i aria-activedescendant na kontenerze. Wybierz jedną strategię fokusu — obie razem wzajemnie się wykluczają.
• Zapomnienie o aktualizacji wizualnego wyróżnika przy zmianie atrybutu — widzący użytkownicy nie widzą ruchu, podczas gdy użytkownicy technologii asystujących go słyszą.
• Pozostawienie nieaktualnego ID po usunięciu opcji z listy (np. po przefiltrowaniu wyników w comboboxie).
• Aktualizowanie aria-activedescendant przy najechaniu myszą. Atrybut powinien śledzić wyłącznie element aktywowany klawiaturą.
• Ustawianie go na elemencie, który nie zawiera potomka w drzewie AT (zapomniano aria-owns dla listy w portalu).

Przykład

<label for="fruit">Owoc</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>