Rola Punkt orientacyjny

`main`

Punkt orientacyjny głównej treści strony — zawartość unikalna dla bieżącej strony, z wyłączeniem powtarzających się nagłówków, nawigacji i stopek. Element <main> przyjmuje tę rolę automatycznie. Na stronie może wystąpić dokładnie jeden main.

Kiedy stosować

Używaj elementu <main>. Jest to najważniejszy punkt orientacyjny na stronie — użytkownicy czytników ekranu zwykle przechodzą do main jako pierwszego, aby pominąć nawigację i nagłówki.

role="main" na elemencie <div> jest właściwe tylko wtedy, gdy nie można użyć <main> (np. ze względu na ograniczenia systemu CMS). Obie formy muszą spełniać tę samą zasadę: dokładnie jeden main na stronie. Wiele elementów main psuje możliwość „przejścia do głównej treści”, a wiele czytników ekranu obsługuje tylko pierwszy z nich.

Punkt orientacyjny main powinien zawierać wszystko, co jest unikalne dla bieżącej strony, i nie powinien zawierać nagłówka serwisu, głównej nawigacji ani stopki. Umieść je w elementach <header>, <nav> i <footer> jako elementy siostrzane — nie wewnątrz <main>.

Kiedy dodawać etykietę

Pojedynczy element main nie wymaga etykiety — czytniki ekranu ogłaszają go jako „main”. Dodaj aria-label tylko wtedy, gdy strona ma wiele elementów main (czego należy unikać) lub gdy chcesz odróżnić obszar głównej treści SPA od poprzedniego.

Łącze „Przejdź do głównej treści” powinno wskazywać na <main id="main"> (lub dowolny nadany identyfikator) przez <a href="#main"> na początku strony — jest to technika obejścia bloków wymagana przez WCAG 2.4.1.

Częste błędy

Dwa elementy <main> na tej samej stronie. Najczęstsza przyczyna: SPA wstawiający <main> nowego widoku bez usunięcia poprzedniego.
Strona bez żadnego <main>. Użytkownicy czytników ekranu nie mogą pominąć nagłówka.
<main> umieszczony wewnątrz <header> lub <footer>. Hierarchia punktów orientacyjnych jest nieprawidłowa.
Umieszczanie ogólnoserwisowej nawigacji wewnątrz <main>. Nawigacja powtarza się na każdej stronie, więc należy do <header>/<nav>, a nie do unikalnej treści strony.
Łącze „Przejdź do głównej treści” wskazujące na nieistniejący identyfikator.

Przykład

<body>
  <a href="#main" class="visually-hidden focus-visible">Przejdź do głównej treści</a>
  <header>…</header>
  <main id="main">
    <h1>Dlaczego jeden punkt orientacyjny main na stronie</h1>
    <p>…</p>
  </main>
  <footer>…</footer>
</body>