Zalecana praktyka Priorytet: Umiarkowane
Wyskakujące okno nie ma nazwy
Okno dialogowe, takie jak wysuwany koszyk, baner cookie, pop-up newslettera czy szybki podgląd produktu, ma role="dialog" lub role="alertdialog", ale nie ma dostępnej nazwy. To zalecana praktyka, a nie samodzielny wymóg WCAG na poziomie AA.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Gdy okno się otwiera, czytnik ekranu mówi tylko „okno dialogowe”, nie wyjaśniając, czego dotyczy. Klienci muszą je przejrzeć, aby się dowiedzieć, czy to koszyk, oferta rabatowa czy pytanie o cookie. To dezorientuje w ważnych momentach, na przykład po dodaniu do koszyka.
Kogo to dotyczy
- użytkownicy czytników ekranu
- klienci niewidomi i słabowidzący
Jak to naprawić
Nadaj nazwę każdemu elementowi z role="dialog" lub role="alertdialog": wskaż w aria-labelledby widoczny nagłówek okna albo dodaj aria-label, na przykład aria-label="Koszyk". Przy okazji przenoś fokus do okna przy otwarciu i z powrotem na przycisk, który je otworzył, przy zamknięciu.
W Shopify
Zwykle pochodzi z wysuwanego koszyka, wyszukiwarki, szybkiego podglądu lub aplikacji z pop-upami. Dodaj aria-labelledby lub aria-label w odpowiedniej sekcji lub snippecie Liquid; w przypadku okien aplikacji zwróć się do jej twórcy.
W Shoptet (CZ)
Zwykle pochodzi z pop-upów szablonu lub skryptów zewnętrznych, takich jak banery cookie czy czat. Popraw własny kod; w przypadku elementów szablonu zgłoś to Shoptet lub partnerowi.
W PrestaShop
Zwykle pochodzi z okien modalnych motywu (potwierdzenie dodania do koszyka, szybki podgląd) lub modułów. Dodaj aria-labelledby do znaczników okna w szablonach .tpl, najlepiej przez nadpisanie.
W WooCommerce
Zwykle pochodzi z wtyczek zgody na cookie, pop-upów, mini-koszyka lub szybkiego podglądu. Sprawdź w ustawieniach wtyczki opcję dostępności, dodaj nazwę w szablonie motywu potomnego lub zapytaj autora wtyczki.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core aria-dialog-name.
dequeuniversity.com, github.com, www.w3.org