Brakująca rola nadrzędna ARIA

Silktide sprawdza elementy, których rola ARIA ma sens tylko wewnątrz określonego rodzaju kontenera, takiego jak karta, która musi znajdować się na pasku kart, i weryfikuje, czy wymagany kontener jest obecny.

<!-- Problem: karta bez otaczającej jej listy kart -->
<button role="tab">Przegląd</button>

<!-- Poprawka: umieść karty w wymaganym kontenerze -->
<div role="tablist">
  <button role="tab">Przegląd</button>
</div>

Dlaczego to ważne

Role elementów w są definiowane przez ich kontekst: tab jest trzecią z pięciu kart, option jest jednym wyborem na liście, a row jest częścią tabeli. wyprowadzają pozycję, liczbę i sposób nawigacji z widżetu nadrzędnego. Bez niego element może zostać błędnie zidentyfikowany, ogłoszony bez żadnego kontekstu albo całkowicie pominięty — autor dodał połowę widżetu, a użytkownicy nie otrzymują niezawodnie żadnej z jego połówek.

Jak to naprawić

Umieść element w kontenerze z wymaganą rolą — na przykład umieść elementy role="tab" wewnątrz elementu role="tablist".
Jeśli element nadrzędny nie może fizycznie otaczać elementów podrzędnych w kodzie, dodaj aria-owns do logicznego elementu nadrzędnego, aby je przejąć.
Jeśli element nie jest w rzeczywistości takim rodzajem elementu, usuń lub popraw jego rolę.

Typowe pary: tab wymaga tablist; option wymaga listbox; menuitem wymaga menu lub menubar; radio w grupie ARIA wymaga radiogroup; treeitem wymaga tree; row wymaga grid, table, treegrid lub rowgroup; komórki i nagłówki wymagają row.

Jak Silktide to testuje

Znajduje każdy element, którego rola ARIA wymaga określonej roli nadrzędnej, pomijając wszystko wewnątrz regionu oznaczonego data-silktide="ignore" oraz wszystko, co pasuje do wykluczenia kontroli skonfigurowanego dla Twojej witryny.
Przechodzi w górę po jego przodkach, uwzględniając również każde przejęcie przez aria-owns, aby znaleźć element z wymaganą rolą nadrzędną.
Zgłasza elementy, dla których nie znaleziono takiego przodka.

Rozwiązywanie problemów

Rola nadrzędna znajduje się na elemencie z rolą niejawną

Elementy natywne są uwzględniane: element <option> wewnątrz <select> lub <li> wewnątrz <ul>, <ol> albo <menu> nie wymaga jawnych ról, ponieważ oba elementy mają właściwe role niejawnie. Wyniki pojawiają się, gdy rola elementu jest używana bez żadnego kwalifikującego elementu nadrzędnego, jawnego lub niejawnego.

Element znajduje się w kodzie zewnętrznym, którego nie możesz zmienić

Niektóre widżety, takie jak osadzona mapa, generują znaczniki, których nie możesz edytować. Dodaj data-silktide="ignore" do elementu zawierającego widżet, a ta kontrola pominie wszystko wewnątrz niego podczas następnego testu.