Wymaganie WCAG A/AA Priorytet: Krytyczne
Cała strona jest ukryta przed czytnikami ekranu
Element <body> strony ma aria-hidden="true", co nakazuje czytnikom ekranu pominąć całą jego zawartość.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Osoby korzystające z czytników ekranu nie znajdują nic do odczytania: ani menu, ani produktów, ani przycisku „Dodaj do koszyka”, ani kasy. Dla nich sklep jest pusty, więc odchodzą.
Kogo to dotyczy
- niewidomi klienci
- osoby korzystające z czytników ekranu
- część osób sterujących urządzeniem za pomocą głosu
Jak to naprawić
Należy usunąć aria-hidden z elementu <body>. Zwykle ustawia go skrypt okna wyskakującego, panelu koszyka, banera cookies lub menu mobilnego, który ukrywa stronę, gdy okno jest otwarte, i nie usuwa atrybutu po zamknięciu. Aby ukryć tło, lepiej użyć atrybutu inert lub natywnego <dialog> na treści, a nie na <body>, i dopilnować, by samo okno nie znalazło się w ukrytej części.
W Shopify
Zwykle aplikacja okien wyskakujących, newslettera, zgody na cookies lub panelu koszyka albo skrypt paneli bocznych motywu. Wyłączając aplikacje po kolei, można znaleźć źródło, a potem poprawić JavaScript motywu lub zgłosić problem twórcy aplikacji.
W Shoptet (CZ)
Zwykle skrypt okna wyskakującego lub dodatku albo własny kod dodany do szablonu. Problem należy zgłosić do Shoptet lub partnera Shoptet i usunąć własne skrypty ustawiające aria-hidden na <body>.
W PrestaShop
Zwykle moduł okien modalnych, cookies lub newslettera albo JavaScript motywu. Należy znaleźć skrypt, który ustawia aria-hidden na <body>, i go poprawić lub zgłosić twórcy modułu.
W WooCommerce
Zwykle wtyczka okien wyskakujących, zgody na cookies, mini-koszyka lub menu mobilnego albo kreator stron. Wyłączając wtyczki po kolei na kopii testowej, można znaleźć źródło i zgłosić problem autorowi wtyczki.
Normy
| Norma | Punkt |
|---|---|
| WCAG 2.2 | 1.3.1 (A) Info and Relationships |
| WCAG 2.2 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.1 | 1.3.1 (A) Info and Relationships |
| WCAG 2.1 | 4.1.2 (A) Name, Role, Value |
| WCAG 2.0 | 1.3.1 (A) Info and Relationships |
| WCAG 2.0 | 4.1.2 (A) Name, Role, Value |
| EN 301 549 4.1.1 | 9.1.3.1 |
| EN 301 549 4.1.1 | 9.4.1.2 |
| EN 301 549 3.2.1 | 9.1.3.1 |
| EN 301 549 3.2.1 | 9.4.1.2 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.1.3.1 |
| ДСТУ EN 301 549 2022 | 9.4.1.2 |
Automatyczny test: reguła axe-core aria-hidden-body.
dequeuniversity.com, github.com, www.w3.org, www.w3.org
Podobne testy
-
Niektóre elementy mają etykietę dla brajla, ale nie mają zwykłej nazwy
WCAG 4.1.2 A
-
Strona sama się odświeża lub przekierowuje
WCAG 2.2.1 A
-
Niektóre grafiki nie mają opisu tekstowego
WCAG 1.1.1 A
-
Niektóre pola formularzy mają kilka etykiet
WCAG 3.3.2 A