Zalecana praktyka Priorytet: Umiarkowane
Strona ma więcej niż jeden obszar głównej treści
Dwie lub więcej części strony oznaczono jako główną treść. Taki obszar powinien być tylko jeden. 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. Po przejściu do „głównej treści” mogą trafić na baner lub widżet zamiast na stronę produktu czy koszyk i muszą szukać od nowa.
Kogo to dotyczy
- osoby niewidome korzystające z czytników ekranu
- użytkownicy klawiatury korzystający z linku „Przejdź do treści”
- osoby słabowidzące korzystające z lupy ekranowej z mową
Jak to naprawić
Zostaw jeden element <main> (lub role="main"), który obejmuje właściwą treść strony. Dodatkowe <main> lub role="main" w zagnieżdżonych szablonach, sekcjach i osadzonych widżetach zamień na <div> lub <section>. Sprawdź też okna wyskakujące, szybki podgląd produktu i rozbudowane menu, bo często powstają z kopii szablonu strony.
W Shopify
Zwykle layout/theme.liquid motywu zawiera już <main>, a sekcja lub blok aplikacji dodaje kolejny. Zmień nadmiarowy <main> w pliku sekcji lub poproś twórcę aplikacji o jego usunięcie.
W Shoptet (CZ)
Zwykle wynika z własnego HTML dodanego na stronę lub z szablonu. Najpierw sprawdź kod dodany przez siebie; jeśli problem jest w szablonie, zgłoś to Shoptet lub partnerowi.
W PrestaShop
Zwykle zarówno szablon układu motywu (.tpl), jak i szablon modułu wyświetlają <main>. Edytuj nadpisanie szablonu modułu w motywie, aby <main> był tylko w układzie.
W WooCommerce
Zwykle motyw opakowuje treść w <main>, a kreator stron lub nadpisany szablon WooCommerce dodaje drugi. Popraw to w szablonie motywu potomnego lub zmień znacznik kontenera w kreatorze na div.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core landmark-no-duplicate-main.
dequeuniversity.com, github.com, www.w3.org