Roll Landmärke

`banner`

Webbplatsens rubriklandmärke — innehåller vanligen logotyp, primär navigering och sök. Det översta <header>-elementet bär denna roll automatiskt. Bara ett banner per sida.

När du ska använda det

Använd <header> som direkt barn till <body> (eller <html> i ett fragment på toppnivå). När <header> är på toppnivå exponerar webbläsaren det automatiskt som ett banner-landmärke. När <header> är kapslat inuti <article>, <section>, <main> eller <aside> är det bara en generisk grupp, inte ett landmärke.

role="banner" på en <div> är lämpligt bara när du inte kan använda <header> — till exempel inuti ett CMS som tar bort landmärkestaggarna.

Det får inte finnas mer än ett banner per sida. Om du har en andra rubrik som inte är webbplatsens banner (en sektionsrubrik, en kommentarstrådsrubrik), använd ett <header> kapslat inuti sin sektion, inte på toppnivå.

När du ska sätta en etikett

Om din sida har flera landmärken av samma typ (ovanligt för banner, vanligt för navigering), lägg till aria-label för att skilja dem åt. Ett enstaka banner behöver ingen etikett — skärmläsare meddelar det som “banner”.

Vanliga fel

Flera <header>-element högst upp på sidan, var och en upphöjd till ett banner-landmärke. Skärmläsaranvändare ser två “banner”-poster i landmärkemenyn och kan inte avgöra vilken som är den riktiga rubriken.
role="banner" på ett <header> kapslat inuti <main> eller <article>. Rollen åsidosätter standardbeteendet att inte vara ett landmärke och förorenar landmärkesnavigationen.
Webbplatslogotypen placeras utanför <header> och hamnar utanför banner-landmärket.
Klibbig navigering renderas som en separat <div role="banner"> bredvid det ursprungliga <header> — två banners.
Banner med tomt innehåll (bara dekorativa kanter) — landmärket visas fortfarande i skärmläsarnavigationen men har ingenting i sig.

Exempel

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