Zalecana praktyka Priorytet: Umiarkowane
Treść główna jest umieszczona w innym obszarze strony
Element <main> lub obszar z role="main", który oznacza początek właściwej treści strony, jest zagnieżdżony w innym obszarze, na przykład w nagłówku, nawigacji lub panelu bocznym. To zalecana dobra praktyka wykraczająca poza poziom WCAG 2.2 AA, na którym opierają się przepisy o dostępności.
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 przechodzą między obszarami strony (nagłówek, menu, treść główna, stopka) jak między rozdziałami, a rozdziału „treść główna” używają najczęściej: prowadzi prosto do listy produktów, opisu produktu lub formularza zamówienia. Gdy jest zagnieżdżony w nagłówku lub menu, struktura strony robi się myląca, a klienci tracą czas, zanim zrozumieją, gdzie zaczynają się właściwe zakupy.
Kogo to dotyczy
- użytkownicy czytników ekranu
- niewidomi i słabowidzący klienci
- osoby poruszające się po obszarach strony za pomocą narzędzi przeglądarki
Jak to naprawić
Uczyń <main> (lub role="main") elementem najwyższego poziomu strony: nie wewnątrz <header>, <nav>, <aside>, <footer> ani elementu z rolą punktu orientacyjnego. Zwykle przyczyną jest kontener z role="banner" lub role="navigation" wokół całej strony albo dodatkowe role="main" wewnątrz istniejącego obszaru. Na stronie powinien być dokładnie jeden obszar główny.
W Shopify
<main> jest zwykle zdefiniowany w layout/theme.liquid. Sprawdź, czy nie obejmuje go kontener nagłówka ani osadzona aplikacja i czy sekcje nie dodają własnego role="main".
W Shoptet (CZ)
Zależy od struktury HTML szablonu. Sprawdź, czy nowsza wersja szablonu to poprawia; w przeciwnym razie zgłoś to Shoptet lub partnerowi.
W PrestaShop
Zwykle chodzi o pliki .tpl układu motywu, w których otwierany jest kontener treści. Upewnij się, że nie leży on wewnątrz nagłówka, kolumny ani innego elementu z rolą punktu orientacyjnego.
W WooCommerce
Zwykle header.php motywu otwiera kontener z rolą punktu orientacyjnego, który później zawiera obszar treści, albo page builder dodaje role="main" do wewnętrznego kontenera. Popraw to w szablonach motywu potomnego lub w ustawieniach układu buildera.
Normy
To nie kryterium WCAG, lecz zalecana praktyka, która ułatwia korzystanie ze strony.
Automatyczny test: reguła axe-core landmark-main-is-top-level.
dequeuniversity.com, github.com, www.w3.org