Etykiety okien dialogowych

Silktide sprawdza, czy okna dialogowe — wyskakujące okna pojawiające się nad stroną — deklarują nazwę, którą mogą odczytać , aby użytkownicy wiedzieli, co właśnie zostało otwarte.

Okno dialogowe jest oznaczane w przez nadanie elementowi roli dialog. Rola informuje technologie wspomagające, że pojawiło się osobne okno, ale sama w sobie nie mówi, do czego ono służy.

<!-- Problem: okno dialogowe bez dostępnej nazwy -->
<div role="dialog">
  <p>Twoja sesja wkrótce wygaśnie.</p>
</div>

Dlaczego to jest ważne

Gdy otwiera się okno dialogowe, ogłasza je i przenosi fokus odwiedzającego do jego wnętrza. Jeśli okno dialogowe ma nazwę, słuchacz słyszy coś w rodzaju „Limit czasu sesji, okno dialogowe” i od razu rozumie przerwanie. Bez nazwy słyszy tylko „okno dialogowe” — zostaje oderwany od tego, co robił, bez wyjaśnienia, i musi przejrzeć zawartość, aby ustalić dlaczego.

Jak to naprawić

Nadaj każdemu oknu dialogowemu , korzystając z jednego z poniższych sposobów:

aria-labelledby wskazującego na id widocznego tytułu okna dialogowego — jest to najlepsza opcja, ponieważ widzący odwiedzający widzą tę samą nazwę:

<!-- Naprawiono: okno dialogowe otrzymuje nazwę z nagłówka -->
<div role="dialog" aria-labelledby="timeout-title">
  <h2 id="timeout-title">Limit czasu sesji</h2>
  <p>Twoja sesja wkrótce wygaśnie.</p>
</div>

aria-label z nazwą jako tekstem, gdy okno dialogowe nie ma widocznego tytułu:

<div role="dialog" aria-label="Limit czasu sesji">
  ...
</div>

Jak Silktide to testuje

Znajduje na każdej stronie każdy element, którego role ma wartość dialog.
Ustala dostępną nazwę każdego okna dialogowego na podstawie atrybutów takich jak aria-label i aria-labelledby.
Zgłasza każde okno dialogowe, którego dostępna nazwa jest nieobecna lub pusta.

Rozwiązywanie problemów

Moje okno dialogowe pojawia się dopiero po interakcji użytkownika

Silktide analizuje każdą stronę podczas jej ładowania. Okno dialogowe, które jest dodawane do strony później — na przykład po kliknięciu przycisku — może nie zostać przetestowane, ale nadal potrzebuje etykiety dla odwiedzających, którzy do niego dotrą.

Używam natywnego elementu dialogowego

Ta kontrola analizuje elementy, które jawnie deklarują role="dialog". Natywny element <dialog> bez tej roli nie jest testowany, ale wskazówki nadal mają zastosowanie: nadaj mu dostępną nazwę za pomocą aria-labelledby lub aria-label.