Rooli Maamerkki

`contentinfo`

Koko sivuston alatunnisteen kiintopiste — tekijänoikeudet, yhteystiedot, oikeudelliset linkit. Ylimmän tason <footer>-elementti kantaa tämän roolin automaattisesti. Vain yksi contentinfo per sivu.

Milloin käyttää

Käytä <footer>-elementtiä <body>:n suorana lapsena. Kun <footer> on ylimmällä tasolla, selain paljastaa sen automaattisesti contentinfo-kiintopisteenä. Kun se on sisäkkäin <article>:n, <section>:n, <main>:n tai <aside>:n sisällä, se on vain yleinen ryhmä, ei kiintopiste.

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

Sivulla saa olla enintään yksi contentinfo. Jos yksittäisillä artikkeleilla on omat alatunnisteet (tekijätiedot, jako-painikkeet), käytä yksinkertaista <footer>-elementtiä sisäkkäin <article>:n sisällä — ne eivät ole kiintopisteitä, mikä on oikea lopputulos.

Milloin lisätä nimilappu

Yksittäinen contentinfo ei tarvitse nimilappua — ruudunlukuohjelmat ilmoittavat sen “sisältötiedoiksi”. Jos nimilappu tuntuu tarpeelliselta, se on yleensä merkki siitä, että sivulla on kaksi contentinfoa ja toinen niistä ei saisi olla ylimmän tason alatunniste.

Yleisiä virheitä

Kaksi <footer>-elementtiä ylimmällä tasolla. Kaksi contentinfo-kiintopistettä; ruudunlukuohjelman käyttäjät eivät voi erottaa, kumpi on oikea.
role="contentinfo" <footer>-elementissä sisäkkäin <article>:n tai <main>:n sisällä. Rooli ohittaa oletuksena-ei-kiintopiste-käyttäytymisen ja lisää hälyä.
“Toissijainen navigointi” -linkkien sijoittaminen <footer>:iin tasaisena listana. Kääri ne <nav aria-label="Alatunniste">:iin, jotta ne näkyvät navigointikiintopisteenä.
Sivustolaajuinen evästeilmoitus sijoitettuna <footer>:iin — se on dialogi tai alue, ei osa contentinfoa.
Tyhjä <footer> jätetty DOM:iin asettelun paikkamerkkinä — contentinfo-kiintopiste on olemassa ilman sisältöä.

Esimerkki

<body>
  <header>…</header>
  <main>…</main>
  <footer>
    <nav aria-label="Alatunniste">
      <a href="/about">Tietoa</a>
      <a href="/privacy">Tietosuoja</a>
      <a href="/contact">Yhteystiedot</a>
    </nav>
    <p>&copy; 2026 Disability World</p>
  </footer>
</body>