Rooli Maamerkki

`banner`

Koko sivuston ylätunnistemaamerkkialue — sisältää tyypillisesti logon, ensisijaisen navigoinnin ja haun. Ylimmän tason <header>-elementti saa tämän roolin automaattisesti. Sivulla voi olla vain yksi banner.

Käyttötilanteet

Käytä <header>-elementtiä suorana lapsena <body>-elementille (tai <html>-elementille ylimmän tason fragmentissa). Kun <header> on ylimmällä tasolla, selain altistaa sen automaattisesti banner-maamerkkialueena. Kun <header> on sisäkkäin <article>-, <section>-, <main>- tai <aside>-elementin sisällä, se on pelkkä geneerinen ryhmä eikä maamerkkialue.

role="banner" <div>-elementillä on perusteltua vain, kun <header>-elementtiä ei voi käyttää — esimerkiksi julkaisujärjestelmässä, joka poistaa maamerkkitunnisteet.

Sivulla saa olla enintään yksi banner. Jos sivulla on toinen ylätunniste, joka ei ole sivuston banner (osion ylätunniste, kommenttiketjun ylätunniste), käytä tavallista <header>-elementtiä sisäkkäin kyseisen osion sisällä eikä ylimmällä tasolla.

Milloin käyttää aria-label-attribuuttia

Jos sivulla on useita samanlaisia maamerkkialueita (harvinaista bannerille, yleistä navigoinnille), lisää aria-label erottamaan ne toisistaan. Yksittäinen banner ei tarvitse nimeä — ruudunlukuohjelmat ilmoittavat sen nimellä “banner”.

Yleiset virheet

Useita <header>-elementtejä sivun yläosassa, kukin korotettuna banner-maamerkkialueeksi. Ruudunlukuohjelman käyttäjät näkevät maamerkkivalikossa kaksi “banner”-merkintää eivätkä tiedä, kumpi on oikea ylätunniste.
role="banner" <header>-elementillä, joka on sisäkkäin <main>- tai <article>-elementin sisällä. Rooli kumoaa oletuksena ei-maamerkkisen käyttäytymisen ja saastuttaa maamerkkinavigoinnin.
Sivuston logo sijoitettuna <header>-elementin ulkopuolelle, joten se jää banner-maamerkkialueen ulkopuolelle.
Kiinnitetty navigointi renderöitynä erillisenä <div role="banner">-elementtinä alkuperäisen <header>-elementin vieressä — kaksi banneria.
Banner tyhjällä sisällöllä (pelkät koristeelliset reunat) — maamerkkialue näkyy silti ruudunlukuohjelman navigoinnissa mutta on tyhjä.

Esimerkki

<body>
  <header>
    <a href="/" aria-label="Disability World home">
      <img src="/logo.svg" alt="">
    </a>
    <nav aria-label="Primary">
      <a href="/toolkit/">Toolkit</a>
      <a href="/library/">Library</a>
    </nav>
  </header>
  <main>…</main>
</body>