Роля Ориентир

`contentinfo`

Ориентирът за долния колонтитул на сайта — авторски права, контакти, правни връзки. Елементът <footer> от най-горно ниво носи тази роля автоматично. Само един contentinfo на страница.

Кога да се използва

<footer> трябва да е директно дъщерен елемент на <body>. Когато <footer> е на най-горно ниво, браузърът автоматично го излага като ориентир contentinfo. При влагане вътре в <article>, <section>, <main> или <aside> елементът се третира просто като обща група, а не като ориентир.

role="contentinfo" върху <div> е подходящо само когато употребата на <footer> е невъзможна (напр. при legacy CMS).

На страницата не трябва да съществува повече от един contentinfo. Ако отделни статии имат собствени колонтитули (автор, бутони за споделяне), за тях се използва обикновен <footer>, вложен вътре в <article> — те не са ориентири, което е правилното поведение.

Кога да се добавя означение

Единичен contentinfo не се нуждае от означение — екранните четци го обявяват като „информация за съдържанието”. Ако се усеща нужда от означение, това обикновено е признак, че на страницата има два contentinfo и единият от тях не трябва да е колонтитул на най-горно ниво.

Чести грешки

Два елемента <footer> на най-горно ниво. Двата ориентира contentinfo объркват потребителите на екранни четци, тъй като не могат да разберат кой е основният.
role="contentinfo" върху <footer>, вложен вътре в <article> или <main>. Ролята заменя поведението по подразбиране (без ориентир) и добавя излишен шум.
Навигационни връзки в <footer> като плосък списък. Те трябва да се обгърнат в <nav aria-label="Долен колонтитул">, за да се появят като навигационен ориентир.
Банерът за бисквитки, поставен вътре в <footer> — той е диалог или регион, а не част от contentinfo.
Празен <footer>, оставен в DOM като оформителски placeholder — ориентирът contentinfo съществува, но няма съдържание.

Пример

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