Zalecana praktyka Priorytet: Drobne
Dwa obszary strony brzmią dla czytnika ekranu tak samo
Strona ma kilka obszarów tego samego typu, na przykład dwa menu lub dwa panele boczne, bez etykiety, która je rozróżnia. To zalecana praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opiera się prawo.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Użytkownicy czytników ekranu przeskakują między obszarami strony (nagłówek, menu, główna treść, stopka) jak między rozdziałami. Jeśli na liście dwa razy pojawia się „nawigacja”, nie wiedzą, które to główne menu sklepu, a które menu konta lub stopki, więc otwierają niewłaściwe i wracają.
Kogo to dotyczy
- osoby niewidome korzystające z czytników ekranu
- osoby z niepełnosprawnością poznawczą korzystające z narzędzi do czytania
- osoby korzystające z rozszerzeń przeglądarki wyświetlających listę obszarów strony
Jak to naprawić
Nadaj każdemu powtarzającemu się punktowi orientacyjnemu unikalną dostępną nazwę przez aria-label lub aria-labelledby, na przykład <nav aria-label="Menu główne"> i <nav aria-label="Stopka">. Zrób to samo dla powtarzających się <aside>, <section> lub <form> działających jako punkty orientacyjne. Jeśli element w rzeczywistości nie jest osobnym obszarem, lepiej usuń jego rolę punktu orientacyjnego.
W Shopify
Zwykle menu w nagłówku, mobilne menu wysuwane i menu w stopce to <nav> bez etykiet. Dodaj aria-label do każdego <nav> w plikach sekcji nagłówka i stopki motywu.
W Shoptet (CZ)
Zwykle wynika z menu szablonu. Zgłoś to Shoptet lub partnerowi; jeśli powtarzający się obszar jest we własnym dodanym HTML, opisz go tam samodzielnie.
W PrestaShop
Zwykle moduł menu, bloki linków w stopce i linki konta wyświetlają <nav> lub <section> bez etykiety. Dodaj aria-label w nadpisaniach szablonów modułów w motywie.
W WooCommerce
Zwykle to menu motywu lub obszary widżetów (kilka paneli bocznych, kilka menu nawigacji). Dodaj aria-label w szablonach motywu potomnego lub w ustawieniach bloku nawigacji w edytorze bloków, jeśli motyw korzysta z bloków.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core landmark-unique.
dequeuniversity.com, github.com, www.w3.org