Brakująca rola podrzędna ARIA

Silktide sprawdza widżety kontenerowe zbudowane z użyciem ról ARIA, takie jak listy kart, menu i pola listy, oraz weryfikuje, czy każde z nich zawiera odpowiedni rodzaj elementów, które powinno zawierać. Lista kart bez kart lub menu bez elementów menu jest ogłaszane jako widżet, ale nie oferuje niczego, czym można sterować.

<!-- Problem: a tablist must contain elements with role="tab" -->
<div role="tablist">
  <button>Overview</button>
</div>

<!-- Fix: give the children their required role -->
<div role="tablist">
  <button role="tab">Overview</button>
</div>

Dlaczego jest to ważne

Złożone role opisują widżet jako całość: tablist wymaga kart, listbox wymaga opcji, a menu wymaga elementów menu. przełączają się na wyspecjalizowaną nawigację dla tych widżetów, oczekując obiecanych elementów podrzędnych. Gdy elementy podrzędne nie mają swoich ról, widżet ogłasza się, a następnie zachowuje się jak pusta powłoka — użytkownicy mogą do niego dotrzeć, ale nie znajdują w nim niczego, podczas gdy użytkownicy widzący widzą w pełni działającą kontrolkę.

Jak to naprawić

Dodaj wymaganą rolę do każdego elementu w kontenerze — na przykład role="tab" do każdej kontrolki wewnątrz role="tablist".
Jeśli elementy muszą znajdować się w innym miejscu kodu, połącz je za pomocą aria-owns w kontenerze.
Jeśli kontener nie jest w rzeczywistości tego rodzaju widżetem, usuń lub popraw jego rolę.

Typowe pary: tablist wymaga tab; listbox wymaga option; menu i menubar wymagają menuitem (lub jego wariantów wyboru i opcji); radiogroup wymaga radio; tree wymaga treeitem; grid i table wymagają row; row wymaga komórek lub nagłówków.

Jak Silktide to testuje

Znajdź każdy element, którego rola ARIA wymaga określonych ról podrzędnych.
Pomiń kontenery oznaczone aria-busy="true", które nadal ładują swoje elementy.
Przeszukaj elementy potomne każdego pozostałego kontenera, w tym wszelkie elementy dołączone za pomocą aria-owns, aby znaleźć co najmniej jeden element z wymaganą rolą podrzędną. Elementy natywne są uwzględniane z rolą, którą mają domyślnie: wiersz tabeli (<tr>) spełnia wymaganie dzięki komórkom <td> i <th>.
Zgłoś kontenery, w których nie znaleziono żadnego takiego elementu.

Rozwiązywanie problemów

Elementy są ładowane później przez skrypt

Silktide testuje stronę podczas jej ładowania. Jeśli pole listy lub menu jest wypełniane tylko na żądanie, do tego czasu jest ogłaszane jako puste; tam, gdzie to możliwe, wyrenderuj przynajmniej początkowe elementy razem ze stroną. Gdy kontener nadal ładuje swoje elementy, oznacz go za pomocą aria-busy="true" i usuń ten atrybut, gdy wszystkie elementy znajdą się na miejscu. Silktide nie zgłasza kontenera oznaczonego jako zajęty.