# Landmærke

## Hvad det er

Et landmærke, også kaldet en landmærkeregion eller på engelsk et ARIA landmark, er en del af en
webside, som markup'en navngiver efter dens formål, for eksempel sidehovedet, hovedindholdet,
navigationen eller sidefoden, så hjælpemidler kan liste de dele og gå direkte til en hvilken som
helst af dem. En side har som regel flere landmærker, og tilsammen beskriver de layoutet for en
person, der aldrig ser layoutet.

WAI-ARIA 1.2 definerer otte landmærkeroller: `banner`, `navigation`, `main`, `complementary`,
`contentinfo`, `search`, `form` og `region`. En niende, selve `landmark`, er den abstrakte overrolle
i specifikationens rollemodel, og forfattere får besked på ikke at bruge den. De fleste sider
behøver aldrig attributten `role` for at få de andre, fordi HTML-elementerne allerede bærer dem:

- `main` er landmærket `main`, og `nav` er et `navigation`-landmærke.
- `header` og `footer` bliver kun til `banner` og `contentinfo`, når de hører til siden som helhed.
  Placeret inde i en `article`, en `section` eller `main` er de almindelig sidestruktur og slet ikke
  landmærker.
- `aside` er `complementary` på sidens øverste niveau eller inde i `main`. Inde i andet
  sektionsindhold tæller den kun, når den har et navn.
- `section` bliver kun et `region`-landmærke, når den har et tilgængeligt navn, fra `aria-label`
  eller fra en overskrift, der henvises til med `aria-labelledby`. En `section` uden navn er bare en
  gruppe.
- `form` svarer til rollen `form`, og specifikationen kræver, at forfattere giver den en etiket. Det
  nyere element `search` svarer til `search`.

Specifikationen beder hjælpemidler om at lade folk nå disse områder hurtigt, og skærmlæsere gør det.
I NVDA flytter `D` til næste landmærke, og elementlisten viser dem alle på én gang; VoiceOvers rotor
har sin egen liste over landmærker. En bruger, der lander på en side, kan åbne listen, høre, at der
er et sidehoved, en navigation, et hovedområde og en sidefod, og kende sidens form, før et eneste
ord af indholdet er læst.

## Hvorfor det betyder noget

Beslutningen bag landmærker er, om hver del af en side ligger et sted, en lytter kan navngive og nå.
På en typisk side er det meste af indholdet gentaget: sidehovedet, menuen, sidefoden og ofte en
sidebjælke er de samme på hver side af sitet, og det, der er nyt, ligger et sted i midten. En seende
besøgendes øjne går direkte derhen. Uden landmærker må en skærmlæserbruger lytte sig forbi det samme
sidehoved og den samme menu på hver side eller gætte på, hvor mange overskrifter der skal springes
over.

WCAG's egen teknik for landmærker, ARIA11, er opført som en tilstrækkelig måde at opfylde tre
succeskriterier på. Et af dem kræver en måde at springe over indholdsblokke, der gentages på tværs
af sider; et andet kræver, at den struktur, en seende læser aflæser af layoutet, også er tilgængelig
for software. Det koster lidt at opfylde dem på den måde, når siden fra begyndelsen er bygget af
`header`, `nav`, `main` og `footer`: semantikken følger med elementet, og der er intet ekstra at
vedligeholde. At eftermontere landmærker i et layout af indlejrede `div`-elementer koster mere, men
arbejdet er for det meste mekanisk.

Der er to grænser, det er værd at kende. Den første er, at specifikationen gør landmærkenavigation
valgfri for almindelige browsere, så en tastaturbruger uden skærmlæser som regel ikke får noget ud
af landmærkerne alene, og et synligt spring-til-indhold-link er stadig sin plads værd. Den anden er,
at flere landmærker ikke gør en side lettere at bruge. Hvert landmærke er en post på en liste, som
nogen skal høre, og en side, hvor hver blok er en navngiven region, lyder som en indholdsfortegnelse
på halvtreds linjer. Specifikationen forbeholder `region` til indhold, der er vigtigt nok til at stå
i en oversigt over siden, og beder forfattere bruge den, kun når ingen af de andre roller beskriver
formålet.

## Sådan ser det ud i praksis

Tre stykker arbejde på dette site viser den samme lære fra hver sin side: et manglende landmærke er
en af de få tilgængelighedsfejl, som ingen nogensinde opdager ved at kigge.

Den første kom under arbejdet med at
[tage hele sitet til WCAG 2.2 niveau AA](/da/portfolio/took-wcag-2-2-level-aa-across-the-whole-site-130/).
Automatiseringen kører en tilgængelighedsregelmotor med dens bedste praksis-regler slået til, ikke
kun konformitetsreglerne, hvilket er en forskel på tredive regler. En af de ekstra regler fejlede i
det øjeblik, den blev slået til, fordi mærket lå uden for hvert landmærke på hver indre side. Intet
på skærmen afslørede det.

Den anden forklarer, hvorfor den første var gået ubemærket hen. Blandt
[elleve tilgængelighedsfejl, som browseren meldte sunde](/da/portfolio/fixed-11-accessibility-defects-the-browser-called-healthy-131/),
sad to i vagterne frem for i siderne, og den ene var, at regelmotoren havde kørt halvfjerds af sine
hundrede og fem regler. Den regel, der ville have fanget det manglende landmærke, var simpelthen
ikke i sættet. Læren, siden drager, er kort: et regelsæt, der ikke indeholder reglen, kan ikke
håndhæve den.

Den tredje lå på en side uden for hovedsitet. Landingssiden foran
[virksomhedens egen git-forge](/da/portfolio/deployed-the-companys-own-git-forge-121/) havde været
en håndholdt kopi af hovedsitets design, og hver eneste forskel, der blev fundet mellem de to, viste
sig at være et uheld og ikke en beslutning. En af de fem var, at der intet hovedlandmærke eller
overskrift på øverste niveau var på nogen side, og ikke én af de fem var synlig på et skærmbillede.
Kopien blev slettet, og landingssiden bygges nu af hovedsitets egne skabeloner, så den arver den
samme struktur i stedet for at efterligne den.

## Hvor det går galt

Landmærkefejl er tavse på skærmen og tydelige at høre i en skærmlæser. Det er de almindelige.

**Indhold havner uden for hvert landmærke.** Et logo, en cookiemeddelelse eller en sprogvælger
placeres før `header` eller efter `footer`, og en lytter, der bevæger sig efter landmærker, springer
forbi den. Axe-reglen `region` melder alt indhold, der ikke ligger i et landmærke, men den er mærket
som bedste praksis og ikke som et WCAG-brud, så en kørsel, der er begrænset til WCAG-mærkerne,
udfører den aldrig. Slå bedste praksis-reglerne til, og flyt det løse element ind i det landmærke,
det hører til.

**Den samme rolle optræder to gange med samme navn.** To `nav`-elementer, et i sidehovedet og et i
sidefoden, annonceres begge som »navigation«, og lytteren må gætte, hvilken der er hvilken. Giv hver
en kort, tydelig etiket med `aria-label` eller `aria-labelledby`, og lad rollen blive ude af
etiketten: en navigation med etiketten »Site navigation« læses op som »Site navigation navigation«.

**Et ekstra main eller banner dukker op.** En `div` får `role="main"` eller `role="banner"` for at
gøre en komponent vigtig, eller en skabelon pakker en underside ind i sit eget `main`, og siden
annoncerer nu to af en rolle, den skulle have én af. Specifikationen beder om højst ét `banner`, ét
`main` og ét `contentinfo` pr. side, og axe har en regel for hver. Tjek landmærkelisten efter hver
ændring af layoutet, og lad de indbyggede elementer bære rollerne, hvor de kan.

**Hver blok bliver en region.** Et komponentbibliotek giver som standard hver `section` en
`aria-label`, og landmærkelisten fyldes med korttitler. Navngiv kun en `section`, når en læser kunne
ønske at springe til den fra et hvilket som helst sted på siden.

En side, der er bygget som skitsen herunder, giver en lytter fem stop, hvert med sit eget navn:

```html
<header><!-- logo, søgning --></header>
<nav aria-label="Site"><!-- menu --></nav>
<main>
    <h1>Priser</h1>
    <section aria-labelledby="hosting">
        <h2 id="hosting">Hosting</h2>
    </section>
</main>
<footer><!-- kontakt, jura --></footer>
```

## Læs mere

- [WAI-ARIA 1.2: Landmark Roles](https://www.w3.org/TR/wai-aria-1.2/#landmark_roles) — de otte
  roller, hvad hver af dem er til, og hvilke der skal have en etiket.
- [Landmark Regions](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/) — W3C's vejledning
  for forfattere om valg af roller, etiketter på gentagne landmærker og om at holde alt indhold inde
  i et af dem.
- [HTML Accessibility API Mappings 1.0](https://www.w3.org/TR/html-aam-1.0/) — hvilke HTML-elementer
  der bliver til hvilke roller, også hvornår `header`, `footer`, `aside` og `section` tæller som
  landmærker.
- [ARIA11: Using ARIA landmarks to identify regions of a page](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11)
  — WCAG-teknikken med dens testprocedure og de succeskriterier, den opfylder.

<https://engineer.company/da/glossary/landmark/>