banner
Webstedets header-landmark — indeholder typisk logo, primær navigation og søgning. Det øverste <header>-element bærer automatisk denne rolle. Kun ét banner pr. side.
Hvornår bruges den
Brug <header> som et direkte barn af <body> (eller <html> i et toplevelsfragment). Når <header> er på øverste niveau, eksponerer browseren det automatisk som et banner-landmark. Når <header> er indlejret inde i <article>, <section>, <main> eller <aside>, er det blot en generisk gruppe, ikke et landmark.
role="banner" på en <div> er kun passende, når du ikke kan bruge <header> — for eksempel inden i et CMS, der fjerner landmark-tags.
Der må ikke være mere end ét banner pr. side. Hvis du har en anden header, der ikke er sitets banner (en sektionsheader, en kommentartråd-header), skal du bruge et simpelt <header> indlejret i sin sektion, ikke på øverste niveau.
Hvornår du bør tilføje en label
Hvis din side har flere landmarks af samme type (sjælden for banner, almindelig for navigation), skal du tilføje aria-label for at skelne dem. Et enkelt banner behøver ikke en label — skærmlæsere annoncerer det som “banner”.
Hyppige fejl
- Flere
<header>-elementer øverst på siden, der alle ophøjes til banner-landmarks. Skærmlæser-brugere ser to “banner”-poster i landmark-menuen og kan ikke afgøre, hvilken der er den rigtige header. role="banner"på en<header>, der er indlejret i<main>eller<article>. Rollen tilsidesætter standard-ikke-landmark-adfærden og forurener landmark-navigationen.- Webstedets logo placeret uden for
<header>, så det falder uden for banner-landmarket. - Sticky navigation renderet som en separat
<div role="banner">ved siden af den oprindelige<header>— to bannere. - Banner med tomt indhold (kun dekorative kanter) — landmarket vises stadig i skærmlæsernavigation, men indeholder intet.
Eksempel
<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>