Rola prezentacji w elemencie interaktywnym

Silktide sprawdza elementy interaktywne, takie jak przyciski, łącza i pola formularza, które zostały oznaczone jako wyłącznie dekoracyjne. Oznaczenie elementu interaktywnego w ten sposób pozbawia go znaczenia dla technologii wspomagających, pozostawiając jednocześnie możliwość kliknięcia go na ekranie.

<!-- Problem: przycisk nadal działa, ale nie jest w żaden sposób komunikowany -->
<button role="presentation">Usuń</button>

<!-- Poprawka: usuń rolę -->
<button>Usuń</button>

Dlaczego to jest ważne

Role presentation i none informują , że element nie ma znaczenia — służą do usuwania semantyki z takich elementów jak tabele układu. Zastosowane do elementu interaktywnego tworzą najgorszy rodzaj bariery: kontrolkę, którą widzący użytkownicy myszy klikają każdego dnia, ale którą przedstawia jako nieaktywną treść lub całkowicie pomija. Użytkownik nie ma możliwości dowiedzenia się, że przycisk w ogóle istnieje.

Jak to naprawić

Usuń role="presentation" lub role="none" z elementu interaktywnego. Elementy natywne już udostępniają prawidłowe znaczenie bez żadnej roli.
Jeśli element rzeczywiście nie powinien być interaktywny, zmień go na taki: zastąp go elementem nieinteraktywnym, takim jak <div>, i usuń wszelkie tabindex.
Jeśli próbujesz usunąć znaczenie elementu opakowującego (na przykład tabeli układu wokół kontrolek), umieść rolę na elemencie opakowującym, a nie na kontrolkach wewnątrz niego.

Jak Silktide to testuje

Znajduje każdy element na stronie z role="presentation" lub role="none".
Określa, czy element jest interaktywny: jest przyciskiem, łączem lub obszarem mapy obrazu z atrybutem href, polem formularza albo dowolnym elementem umieszczonym w kolejności tabulacji klawiatury z wartością tabindex równą 0 lub większą.
Raportuje każdy element interaktywny mający rolę prezentacyjną.

Elementy usunięte z kolejności tabulacji za pomocą ujemnego tabindex nie są raportowane, podobnie jak elementy dekoracyjne, takie jak obrazy lub grafiki SVG.

Rozwiązywanie problemów

Rola została dodana przez framework lub bibliotekę

Niektóre biblioteki interfejsu użytkownika stosują role="presentation" do wewnętrznych elementów opakowujących, a czasem do niewłaściwego elementu. Sprawdź zgłoszony element: jeśli faktycznie można go obsługiwać myszą, ale jest wyciszony dla technologii wspomagających, poprawka powinna zostać wprowadzona w sposobie użycia biblioteki lub w samej bibliotece.