Rola Punkt orientacyjny

`contentinfo`

Punkt orientacyjny stopki całej witryny — prawa autorskie, dane kontaktowe, linki prawne. Najwyższy poziom elementu <footer> przyjmuje tę rolę automatycznie. Na stronie może wystąpić tylko jeden contentinfo.

Kiedy używać

Użyj <footer> jako bezpośredniego dziecka <body>. Gdy <footer> jest na najwyższym poziomie, przeglądarka eksponuje go automatycznie jako punkt orientacyjny contentinfo. Zagnieżdżony wewnątrz <article>, <section>, <main> lub <aside> jest jedynie zwykłą grupą, a nie punktem orientacyjnym.

role="contentinfo" na <div> jest właściwe wyłącznie wtedy, gdy nie można użyć <footer> (przestarzały CMS).

Na stronie może być co najwyżej jeden contentinfo. Jeśli poszczególne artykuły mają własne stopki (z danymi autora, przyciskami udostępniania), użyj zwykłego <footer> zagnieżdżonego wewnątrz <article> — nie staną się punktami orientacyjnymi, co jest poprawnym wynikiem.

Kiedy dodawać etykietę

Pojedynczy contentinfo nie wymaga etykiety — czytniki ekranu ogłaszają go jako „informacje o treści”. Jeśli etykieta wydaje się konieczna, to zazwyczaj znak, że masz dwa elementy contentinfo i jeden z nich nie powinien być stopką na najwyższym poziomie.

Typowe błędy

Dwa elementy <footer> na najwyższym poziomie. Dwa punkty orientacyjne contentinfo — użytkownicy czytników ekranu nie wiedzą, który jest właściwy.
role="contentinfo" na <footer> zagnieżdżonym wewnątrz <article> lub <main>. Rola nadpisuje domyślne zachowanie niebędące punktem orientacyjnym i wprowadza bałagan.
Linki „nawigacji pomocniczej” w <footer> jako płaska lista. Owiń je w <nav aria-label="Stopka">, aby były eksponowane jako punkt orientacyjny nawigacji.
Ogólnowitrynowy baner zgody na cookies umieszczony wewnątrz <footer> — jest dialogiem lub regionem, a nie częścią contentinfo.
Pusty <footer> pozostawiony w DOM jako placeholder układu — punkt orientacyjny contentinfo istnieje, lecz nie ma treści.

Przykład

<body>
  <header>…</header>
  <main>…</main>
  <footer>
    <nav aria-label="Footer">
      <a href="/about">About</a>
      <a href="/privacy">Privacy</a>
      <a href="/contact">Contact</a>
    </nav>
    <p>&copy; 2026 Disability World</p>
  </footer>
</body>