aria-controls

Kiedy używać

Na kontrolce, której aktywacja zmienia inny element na stronie — kanonicznym przykładem jest relacja zakładka → tabpanel oraz przycisk ujawniania → odsłaniany panel. Informuje technologie wspomagające, że „obsługa tego widżetu wpłynie na tamten element”, dając zaawansowanym użytkownikom możliwość przeskoczenia od kontrolki do kontrolowanego elementu.

Nie stosuj go przy każdej interakcji. Większość procedur obsługi kliknięcia nie potrzebuje aria-controls; zarezerwuj go dla przypadków, gdy kontrolowany element jest naprawdę oddzielony w DOM, a użytkownik korzysta na znajomości tego powiązania.

Jak działa

Wartość to lista identyfikatorów elementów oddzielona spacjami dla kontrolowanych elementów. Kontrolowany element musi istnieć w DOM w chwili odpytywania relacji — jeśli tabpanel montujesz dopiero po aktywacji zakładki, referencja jest pusta dla użytkowników AT do momentu pojawienia się panelu.

Obsługa to słaby punkt. JAWS udostępnia skrót „przejdź do kontrolowanego elementu”, ale VoiceOver i NVDA w dużej mierze ignorują atrybut poza specyficznymi wzorcami (zakładki, combobox). Oznacza to, że aria-controls rzadko jest tym, co faktycznie zapewnia dostępność — to ulepszenie na bazie poprawnych ról, zarządzania fokusem i aria-expanded. Zbuduj wzorzec poprawnie, a aria-controls dodaj na końcu.

Typowe błędy

• Traktowanie aria-controls jako zastępstwa dla przeniesienia fokusa. Przycisk „Przejdź do wyników” musi przenosić fokus po aktywacji; dodanie aria-controls tego nie robi.
• Wskazywanie na element, którego nie ma jeszcze w DOM. Referencja nic nie wskazuje, dopóki panel się nie pojawi.
• Zapominanie o ustawieniu aria-expanded na przycisku ujawniania. aria-controls mówi „wpływam na tamten element”; aria-expanded mówi „i jest on teraz otwarty / zamknięty”.
• Użycie aria-controls na niestandardowym select do wskazania listy opcji — właściwym wzorcem jest role="combobox" z aria-controls na polu wejściowym i aria-activedescendant dla zaznaczonej opcji.
• Dodawanie aria-controls na każdym przycisku „dla kompletności”. Szum; nic na tym nie polega.

Przykład

<button
  type="button"
  aria-expanded="false"
  aria-controls="faq-1-answer"
>
  What is your refund policy?
</button>
<div id="faq-1-answer" hidden>
  Refunds are processed within 14 days …
</div>