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

`complementary`

Ориентир за съдържание, което допълва основното съдържание, но е смислено само по себе си — странични колони, блокове със свързани статии, допълнителни информационни панели. Елементът <aside> носи тази роля, когато е на най-горното ниво.

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

Използвайте <aside> за странична колона на най-горно ниво, раздел „Свързани статии”, биография на автора до публикация или панел „Нови материали”. Когато <aside> е пряк наследник на <body> (или е поставен до <main>), той се разкрива като ориентир complementary.

<aside>, вложен в <article>, НЕ се повишава до ориентир — остава обикновена група. Това разграничение е умишлено: ориентирът complementary е на ниво страница; страничните колони, вградени в отделна статия, не са такива.

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

Съдържанието вътре трябва да допълва основното, но да може да стои самостоятелно — ако премахването му би направило страницата непълна, вероятно то не е complementary.

Кога да се добавя етикет

Ако страницата има множество ориентири complementary (лява колона И дясна колона), дайте на всеки отличителен aria-label или aria-labelledby. При един-единствен ориентир complementary етикетът не е задължителен — екранните четци го обявяват като „complementary”.

Конвенционални етикети: „Свързани статии”, „Инструменти”, „Абонамент за бюлетин”, „Наскоро разгледани”.

Чести грешки

<aside> се използва за информационни блокове вътре в абзаци на проза. Твърде детайлен мащаб — замърсява менюто с ориентири.
Вторичните връзки в целия колонтитул на сайта са маркирани като ориентир complementary. Навигацията на ниво колонтитул принадлежи в <nav> вътре в <footer>.
Множество ориентири complementary без етикети.
role="complementary" е поставен върху <section>, която е основното съдържание на страницата. Вместо това се използва <main>.
<aside> вътре в <article> с добавен role="complementary", за да се принуди разкриването като ориентир — обикновено признак, че съдържанието принадлежи на ниво страница, а не вътре в статията.

Пример

<main>
  <article>
    <h1>Designing for screen readers</h1>
    <p>…</p>
  </article>
</main>

<aside aria-labelledby="related">
  <h2 id="related">Related articles</h2>
  <ul>
    <li><a href="/articles/aria-landmarks">ARIA landmarks explained</a></li>
    <li><a href="/articles/skip-links">Skip links done right</a></li>
  </ul>
</aside>