Rooli Maamerkki

`complementary`

Kiintopiste sisällölle, joka tukee pääsisältöä mutta on merkityksellinen myös yksinään — sivupalkit, aiheeseen liittyvien artikkeleiden ruudut, täydentävät kutsut. <aside>-elementti kantaa tämän roolin, kun se on ylimmällä tasolla.

Milloin käyttää

Käytä <aside>-elementtiä ylimmän tason sivupalkkiin, “Aiheeseen liittyvät artikkelit” -palstaan, kirjoittajan esittelyyn viestin vieressä tai “Uudet asiat” -paneeliin. Kun <aside> on <body>-elementin suora lapsi (tai sijaitsee <main>-elementin vieressä), se paljastuu täydentävänä kiintopisteenä.

<aside> sisäkkäin <article>-elementin sisällä EI ylennä sitä kiintopisteeksi — se pysyy yleisenä ryhmänä. Tämä ero on tarkoituksellinen: täydentävä kiintopiste on sivutason; yhden artikkelin sisäiset sivupalkit eivät ole.

role="complementary" <div>-elementissä sopii vain silloin, kun <aside> ei ole käytettävissä (vanha CMS).

Sisällä olevan sisällön pitäisi tukea pääsisältöä mutta seistä omillaan — jos sen poistaminen jättäisi sivun puutteelliseksi, se ei todennäköisesti ole täydentävää.

Milloin lisätä nimilappu

Jos sivulla on useita täydentäviä kiintopisteitä (vasen ja oikea palkki), anna kullekin erillinen aria-label tai aria-labelledby. Yhden täydentävän kiintopisteen kohdalla nimilappu on valinnainen — ruudunlukuohjelmat ilmoittavat sen “täydentävänä”.

Tavanomaiset nimilaput: “Aiheeseen liittyvät artikkelit”, “Työkalut”, “Uutiskirjeen tilaus”, “Äskettäin katsotut”.

Yleisiä virheitä

<aside>:n käyttäminen kutsupaneeleille prosan kappaleiden sisällä. Liian yksityiskohtainen — sotkee kiintopisteiden valikon.
Koko sivuston alatunnisteen toissijaisisten linkkien merkitseminen täydentäväksi kiintopisteeksi. Alatunnisteen navigointi kuuluu <nav>:iin <footer>:n sisällä.
Useita täydentäviä kiintopisteitä ilman nimilappuja.
role="complementary":n asettaminen <section>-elementille, joka on sivun pääsisältö. Käytä sen sijaan <main>.
<aside> <article>-elementin sisällä yhdistettynä nimenomaiseen role="complementary":hin kiintopistenpaljastuksen pakottamiseksi — yleensä merkki siitä, että sisältö kuuluu sivutasolle, ei artikkelin sisään.

Esimerkki

<main>
  <article>
    <h1>Suunnittelu ruudunlukuohjelmille</h1>
    <p>…</p>
  </article>
</main>

<aside aria-labelledby="related">
  <h2 id="related">Aiheeseen liittyvät artikkelit</h2>
  <ul>
    <li><a href="/articles/aria-landmarks">ARIA-kiintopisteet selitettynä</a></li>
    <li><a href="/articles/skip-links">Ohituslinkit oikein</a></li>
  </ul>
</aside>