Tilbage til Semantik og struktur

Webtilgængelighed

Landmarks og navngivne regioner

Gør sidens vigtigste områder lette at finde uden at gøre hver layout-wrapper til et landmark.

Se undervisningsslides

Relevante links

TL;DR

  1. Landmarks giver genveje til større områder som hovedindhold og navigation.
  2. En section med et accessible name bliver en region; ikke alle sections behøver være landmarks.
  3. Navngiv ud fra brugerens opgaver, og genbrug synlige overskrifter, hvor det giver mening.

Sidens store områder

Start med native HTML: main til hovedindhold, nav til navigation og aside til supplerende indhold. En almindelig wrapper behøver ikke en rolle.

Sidens overordnede header og footer kan blive til banner og contentinfo. En header inde i en article er derimod artiklens header, ikke et ekstra side-banner. De behøver ikke være direkte børn af body; det er deres kontekst, der er afgørende.

En section kan blive et landmark

<section aria-labelledby="reservation-title">
<h2 id="reservation-title">Aktuel reservation</h2>
<!-- Reservationsoplysninger og handlinger -->
</section>

Overskriften er ikke automatisk sectionens accessible name. aria-labelledby etablerer relationen; et ekstra role="region" er unødvendigt her.

En unavngivet section kan stadig være en passende tematisk gruppering. “Er det en section?” og “Skal det være en genvej i landmark-listen?” er to forskellige spørgsmål.

I denne rejseoversigt er reservationen et oplagt mål for genbesøg og handling. Den korte transportoplysning kan findes via sin overskrift. Derfor prioriterer øvelsen kun reservationen som region. Hvis tipsområdet blev en omfattende rejseguide, kunne vurderingen være en anden. W3C anbefaler regions til tilstrækkeligt vigtige, selvstændige områder.

Flere navigationer med forskellige formål skal kunne skelnes fra hinanden:

<nav aria-label="Hovedmenu">…</nav>
<nav aria-label="Brødkrummer">
<ol>
<li><a href="/">Forside</a></li>
<li><a href="/sko">Sko</a></li>
<li><span aria-current="page">Sneakers</span></li>
</ol>
</nav>

Den aktuelle side behøver ikke være et link. aria-current="page" formidler placeringen; det er ikke det samme som en valgt tab eller en trykket knap.

Se mere