Rola Punkt orientacyjny

`complementary`

Punkt orientacyjny dla treści wspierającej zawartość główną, lecz sensownej samodzielnie — paska boczne, bloki powiązanych artykułów, dodatkowe ramki informacyjne. Element <aside> przyjmuje tę rolę, gdy znajduje się na najwyższym poziomie.

Kiedy używać

Użyj <aside> dla paska bocznego na najwyższym poziomie, sekcji „Powiązane artykuły”, biogramu autora obok wpisu lub panelu „Co nowego”. Gdy <aside> jest bezpośrednim dzieckiem <body> (lub sąsiaduje z <main>), przeglądarka eksponuje go jako punkt orientacyjny complementary.

<aside> zagnieżdżony wewnątrz <article> NIE jest promowany do punktu orientacyjnego — pozostaje zwykłą grupą. To rozróżnienie jest celowe: punkt orientacyjny complementary ma zasięg całej strony; paski boczne wewnętrzne dla jednego artykułu nim nie są.

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

Treść wewnątrz powinna wspierać główną, lecz być samodzielna — jeśli jej usunięcie sprawiłoby, że strona staje się niekompletna, prawdopodobnie nie jest to complementary.

Kiedy dodawać etykietę

Gdy na stronie znajduje się kilka punktów orientacyjnych complementary (lewy pasek ORAZ prawy pasek), nadaj każdemu odrębny aria-label lub aria-labelledby. Przy jednym punkcie orientacyjnym complementary etykieta jest opcjonalna — czytniki ekranu ogłaszają go jako „complementary”.

Typowe etykiety: „Powiązane artykuły”, „Narzędzia”, „Zapis do newslettera”, „Ostatnio przeglądane”.

Typowe błędy

<aside> stosowany dla ramek wewnątrz akapitów tekstu. Zbyt szczegółowy poziom — zaśmieca menu punktów orientacyjnych.
Oznaczanie dodatkowych linków w stopce całej witryny jako punktu orientacyjnego complementary. Nawigacja na poziomie stopki należy do <nav> wewnątrz <footer>.
Wiele punktów orientacyjnych complementary bez etykiet.
role="complementary" na <section>, która jest główną treścią strony. Użyj zamiast tego <main>.
<aside> wewnątrz <article> z jawnym role="complementary" wymuszającym ekspozycję jako punkt orientacyjny — to zwykle sygnał, że treść należy do poziomu strony, a nie do wnętrza artykułu.

Przykład

<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>