Dostępne modalne okno dialogowe

Okna z zapisem do newslettera, szybki podgląd, tabele rozmiarów, nakładki „Dodano do koszyka”, formularze logowania, preferencje cookies – sklepy internetowe pełne są modalnych okien dialogowych, a to jedna z najczęstszych przyczyn, dla których użytkownicy klawiatury i czytników ekranu utykają. Ta strona pokazuje poprawny wzorzec. Należy do serii dostępne wzorce interfejsu.

Kiedy używać okna modalnego

APG definiuje okno dialogowe jako „okno nałożone na okno główne lub inne okno dialogowe” i mówi: „okna pod modalnym oknem dialogowym są nieaktywne (inert)” – użytkownicy nie mogą działać na stronie, dopóki okno się nie zamknie. Okna modalnego warto użyć, gdy użytkownik musi dokończyć lub odrzucić zadanie, zanim pójdzie dalej: potwierdzić usunięcie, zalogować się, wybrać wariant w szybkim podglądzie. Dla informacji, które nie blokują zadania (komunikat „Dodano do koszyka”), zwykle mniej uciążliwy jest komunikat niemodalny lub komunikat o stanie.

Kryteria WCAG

• 2.1.1 Klawiatura (A) i 2.1.2 Bez pułapki na klawiaturę (A): okno można obsługiwać i zamknąć klawiaturą. Utrzymanie fokusu wewnątrz okna modalnego jest w porządku, o ile użytkownik może je opuścić.
• 2.4.3 Kolejność fokusu (A): fokus przechodzi do okna, a potem wraca do elementu, który je wywołał.
• 2.4.11 Fokus niezasłonięty (minimum) (AA): W3C zauważa, że poprawnie zbudowane okno modalne zawsze to kryterium spełnia, natomiast nakładki niemodalne mogą zasłonić element z fokusem.
• 4.1.2 Nazwa, rola, wartość (A): rola dialog i nazwa.
• 1.3.1 Informacje i relacje (A): tytuł jest nagłówkiem, a struktura jest zapisana w kodzie.
• 1.4.10 Dopasowanie do ekranu (AA): okno mieści się na wąskim ekranie i przy powiększeniu 400% bez przewijania w dwóch kierunkach.
• 2.2.1 Dostosowanie czasu (A): okna pop-up nie mogą zamykać się na czas, zanim użytkownicy zdążą je przeczytać.

Przykład kodu

<button type="button" id="open-size-guide">Tabela rozmiarów</button>

<dialog id="size-guide" aria-labelledby="size-guide-title">
  <h2 id="size-guide-title">Tabela rozmiarów</h2>
  <table>…</table>
  <button type="button" id="close-size-guide">Zamknij</button>
</dialog>

<script>
  const dialog = document.getElementById('size-guide');
  document.getElementById('open-size-guide')
    .addEventListener('click', () => dialog.showModal());
  document.getElementById('close-size-guide')
    .addEventListener('click', () => dialog.close());
</script>

Co robi natywny element według standardu HTML:

• showModal() umieszcza okno w warstwie najwyższej, blokuje dokument, więc reszta staje się nieaktywna, zapamiętuje element, który miał wcześniej fokus, i uruchamia kroki ustawiania fokusu okna, które respektują atrybut autofocus.
• Żądanie zamknięcia (np. Escape) wywołuje anulowalne zdarzenie cancel, a następnie zamyka okno. Atrybut closedby określa, czy kliknięcie poza oknem też je zamyka.
• close() zwraca fokus do elementu, który miał go wcześniej, jeśli okno było modalne.

Jeśli okno budują Państwo samodzielnie z ARIA, należy postępować zgodnie z APG: kontener ma role="dialog", aria-modal="true" i aria-labelledby wskazujące widoczny tytuł; aria-describedby jest opcjonalne i lepiej je pominąć, gdy treść zawiera listy lub tabele. Wtedy trzeba samodzielnie unieczynnić tło, uwięzić Tab w oknie, obsłużyć Escape i przywrócić fokus.

Obsługa klawiaturą

Z wzorca okna dialogowego (modalnego) w APG:

Fokus przy otwarciu: „fokus przechodzi na element zawarty w oknie”, zazwyczaj pierwszy element przyjmujący fokus. Fokus przy zamknięciu: „wraca do elementu, który wywołał okno”, chyba że ten element już nie istnieje – wtedy do innego elementu zachowującego logiczny przebieg pracy. Po „Usuń pozycję” fokus może na przykład trafić na nagłówek koszyka.

Typowe błędy w sklepach internetowych

• Okno newslettera przy załadowaniu strony, które kradnie fokus, nie ma nazwy i nie ma przycisku zamykania osiągalnego z klawiatury.
• Przycisk zamykania „×” bez dostępnej nazwy albo ikona zamykania będąca elementem div.
• Fokus zostaje za nakładką: Tab przechodzi po stronie pod ciemnym tłem.
• Brak Escape i brak widocznego sposobu zamknięcia na telefonie, gdy okno jest dłuższe niż ekran.
• Utrata fokusu po zamknięciu, skok na początek strony zamiast na przycisk „Szybki podgląd”.
• Okna szybkiego podglądu odbudowujące stronę produktu ze zduplikowanymi identyfikatorami i zagnieżdżonymi formularzami.
• Banery cookies, które nie są ani modalne, ani nie schodzą z drogi, i zasłaniają element z fokusem u dołu ekranu – według W3C to niespełnienie kryterium 2.4.11.

Co wychwytuje kontrola automatyczna, a co wymaga testu ręcznego

Wszystkie to karty z naszej biblioteki reguł. Cotygodniowy skan widzi stronę taką, jaka się ładuje: okno zamknięte nie jest testowane, okno otwierające się automatycznie – tak. Dzięki rozszerzeniu do przeglądarki można otworzyć okno, a potem uruchomić kontrolę. Test ręczny: proszę otworzyć okno klawiaturą, przejść przez nie Tabem do końca i z powrotem, nacisnąć Escape, sprawdzić, gdzie ląduje fokus, powiększyć do 400% i posłuchać, jak ogłasza je czytnik ekranu. Kroki opisano w jak testować WCAG.

Darmowa kontrola jednej strony to automatyczna kontrola, a nie pełny audyt.

Najczęstsze pytania

Co sprawia, że modalne okno dialogowe jest dostępne?

Fokus przechodzi do okna po jego otwarciu, Tab i Shift + Tab pozostają wewnątrz niego, Escape je zamyka, fokus wraca na przycisk, który je otworzył, treść w tle jest nieaktywna (inert), a okno ma nazwę pochodzącą z widocznego tytułu.

Czy używać elementu HTML dialog?

Dla okna modalnego element dialog otwierany przez showModal() robi sporą część pracy: standard HTML umieszcza go w warstwie najwyższej (top layer), czyni resztę dokumentu nieaktywną, obsługuje fokus początkowy i zamyka go na żądanie zamknięcia, takie jak Escape. Warto przetestować go w przeglądarkach i czytnikach ekranu, których używają klienci.

Gdzie powinien trafić fokus po otwarciu okna?

APG mówi, że fokus przechodzi na element wewnątrz okna, zazwyczaj pierwszy element przyjmujący fokus. Przy długim tekście lepiej może być ustawić fokus na początku treści. W elemencie dialog wybiera się go atrybutem autofocus.

Czy baner cookies to modalne okno dialogowe?

Tylko jeśli został tak zbudowany. Baner niemodalny nie może zasłaniać elementów z fokusem: W3C mówi, że przyklejony baner cookies nie spełnia kryterium 2.4.11 Fokus niezasłonięty, jeśli całkowicie zakrywa komponent otrzymujący fokus.

Czy kontrola automatyczna przetestuje okno modalne?

Częściowo. Znajduje okna bez nazwy, przyciski zamykania bez nazwy i elementy przyjmujące fokus ukryte przez aria-hidden. Nie sprawdzi przenoszenia fokusu, pułapki fokusu ani Escape, a zamknięte okno nie jest sprawdzane wcale.

Źródła

• W3C WAI, APG Dialog (Modal) pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
• WHATWG, HTML Living Standard, the dialog element: https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element
• W3C, Understanding 2.4.11 Focus Not Obscured (Minimum): https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html