Nieaktywne tło i aria-modal

Nawet gdy fokus jest przechwycony, treść znajdująca się za modalem nadal istnieje w DOM. Czytnik ekranu może do niej przejść, jeśli mu tego nie uniemożliwisz.

Atrybut inert sprawia, że element i wszystkie jego elementy potomne nie mogą otrzymać fokusu ani zostać kliknięte, a technologie asystujące pomijają je za jednym razem.

Po otwarciu modalu dodaj inert do wszystkiego, co znajduje się poza nim. Dzięki temu nikt nie będzie mógł dotrzeć do strony znajdującej się w tle.

Po zamknięciu modalu usuń atrybut inert, aby strona ponownie stała się interaktywna. Jeśli o tym zapomnisz, strona pozostanie zablokowana.

Natywny element dialog otwarty za pomocą showModal() automatycznie ustawia resztę strony jako inert, więc otrzymujesz tę ochronę bez dodatkowego kodu.

Ustawienie aria-modal na true informuje technologie asystujące, że zawartość poza tym oknem dialogowym jest niedostępna, dopóki pozostaje ono otwarte.

Uważaj: aria-modal jedynie informuje czytnik ekranu. Nie blokuje faktycznie fokusu ani kliknięć, dlatego nadal potrzebujesz inert.

Solidny wzorzec łączy inert na tle z aria-modal na oknie dialogowym. Jedno rozwiązanie wymusza granicę, a drugie ją ogłasza.

Zanim inert zyskał szerokie wsparcie, programiści umieszczali aria-hidden na tle. Ukrywało to treść przed czytnikami, ale nie blokowało fokusu klawiatury.

Jeden z klasycznych błędów polega na zastosowaniu aria-hidden tak szeroko, że obejmuje również okno dialogowe. Upewnij się, że Twój modal nie znajduje się w ukrytym obszarze.

Przy otwartym modalu otwórz w przeglądarce drzewo dostępności. Upewnij się, że strona znajdująca się w tle zniknęła z drzewa i pozostało w nim tylko okno dialogowe. ✅

Dowiedziałeś się, jak ustawić stronę w tle jako inert i zadeklarować aria-modal, aby modal był naprawdę jedynym elementem, do którego użytkownicy mogą uzyskać dostęp. 🎯