# Landemerke

## Hva det er

Et landemerke, også kalt en landemerkeregion eller et ARIA-landemerke, er en del av en nettside som
markeringen navngir etter formålet, som toppfeltet, hovedinnholdet, navigasjonen eller bunnteksten,
slik at hjelpemiddelteknologi kan liste opp disse delene og gå rett til hvilken som helst av dem. En
side har som regel flere landemerker, og til sammen beskriver de oppsettet for en som aldri ser
oppsettet.

WAI-ARIA 1.2 definerer åtte landemerkeroller: `banner`, `navigation`, `main`, `complementary`,
`contentinfo`, `search`, `form` og `region`. En niende, `landmark` selv, er den abstrakte forelderen
i spesifikasjonens rollemodell, og forfattere bes om ikke å bruke den. De fleste sider trenger aldri
attributtet `role` for å få de andre, fordi HTML-elementene allerede har dem:

- `main` er landemerket `main`, og `nav` er et `navigation`-landemerke.
- `header` og `footer` blir `banner` og `contentinfo` bare når de hører til siden som helhet.
  Plassert inne i en `article`, en `section` eller `main` er de vanlig sidestruktur og ikke
  landemerker i det hele tatt.
- `aside` er `complementary` på sidens øverste nivå eller inne i `main`. Inne i annet
  seksjoneringsinnhold teller den bare når den har et navn.
- `section` blir et `region`-landemerke bare når den har et tilgjengelig navn, fra `aria-label`
  eller fra en overskrift det vises til med `aria-labelledby`. En `section` uten navn er bare en
  gruppe.
- `form` svarer til rollen `form`, og spesifikasjonen krever at forfatteren gir den en etikett. Det
  nyere elementet `search` svarer til `search`.

Spesifikasjonen ber hjelpemidlene om å la folk nå disse områdene raskt, og skjermlesere gjør det. I
NVDA flytter `D` til neste landemerke, og elementlisten viser alle på én gang; rotoren i VoiceOver
har en egen liste over landemerker. En bruker som kommer til en side, kan åpne den listen, høre at
det finnes et banner, en navigasjon, et hovedområde og en bunntekst, og kjenne formen på siden før
et eneste ord av den er lest.

## Hvorfor det er viktig

Avgjørelsen bak landemerker er om hver del av en side ligger et sted en lytter kan navngi og nå. På
en typisk side er det meste av innholdet gjentatt: toppfeltet, menyen, bunnteksten og ofte et
sidefelt er de samme på hver side av nettstedet, og den delen som er ny, ligger et sted midt i.
Øynene til en seende besøkende går rett dit. Uten landemerker må en som bruker skjermleser, høre
forbi det samme toppfeltet og den samme menyen på hver side, eller gjette hvor mange overskrifter
som skal hoppes over.

WCAGs egen teknikk for landemerker, ARIA11, er oppført som en tilstrekkelig måte å oppfylle tre
suksesskriterier på. Ett av dem krever en måte å hoppe over innholdsblokker som gjentas på flere
sider; et annet krever at strukturen en seende leser får fra oppsettet, også er tilgjengelig for
programvare. Prisen for å oppfylle dem på denne måten er liten når siden bygges av `header`, `nav`,
`main` og `footer` fra starten av: semantikken følger med elementet, og det er ingenting ekstra å
vedlikeholde. Å ettermontere landemerker i et oppsett laget av nøstede `div`-elementer koster mer,
men arbeidet er stort sett mekanisk.

To begrensninger er verdt å kjenne. Den første er at spesifikasjonen gjør navigasjon mellom
landemerker valgfri for vanlige nettlesere, så en tastaturbruker uten skjermleser får som regel
ingenting ut av landemerker alene, og en synlig snarveilenke fortjener fortsatt plassen sin.
Tilsynet for universell utforming av ikt tolker kravet om å hoppe over blokker slik at mekanismen
skal ligge blant de fem første tabulatorstegene, være synlig eller bli det ved tastaturfokus, og
flytte fokus både visuelt og i koden til hovedinnholdet. Den andre er at flere landemerker ikke gjør
en side lettere å bruke. Hvert av dem er en oppføring i en liste noen må høre, og en side der hver
blokk er en navngitt region, høres ut som en innholdsfortegnelse på femti linjer. Spesifikasjonen
holder `region` av til innhold som er viktig nok til å stå i et sammendrag av siden, og ber
forfattere bruke den bare når ingen av de andre rollene beskriver formålet.

## Slik ser det ut i praksis

Landemerker er usynlige på skjermen, så et landemerke som mangler, er en av de få feilene i
universell utforming som ingen noen gang vil oppdage ved å se på siden. Arbeidet her har møtt den
feilen tre ganger, fra hver sin retning.

Den første kom under arbeidet med å
[ta hele nettstedet til WCAG 2.2 på nivå AA](/nb/portfolio/took-wcag-2-2-level-aa-across-the-whole-site-130/).
Automatiseringen kjører en regelmotor for universell utforming med reglene for beste praksis slått
på, ikke bare samsvarsreglene, en forskjell på tretti regler. Én av de ekstra reglene feilet i det
øyeblikket den ble slått på, fordi merkevaresymbolet lå utenfor alle landemerker på hver underside.
Ingenting på skjermen røpet det.

Den andre forklarer hvorfor den første hadde gått upåaktet hen. Blant
[elleve feil som nettleseren hadde kalt friske](/nb/portfolio/fixed-11-accessibility-defects-the-browser-called-healthy-131/),
lå to i vaktene og ikke i sidene, og den ene av dem var at regelmotoren hadde kjørt sytti av sine
hundre og fem regler. Regelen som ville ha fanget det manglende landemerket, var rett og slett ikke
med i settet. Lærdommen siden trekker, er kort: et regelsett som ikke inneholder regelen, kan ikke
håndheve den.

Den tredje gjaldt en side utenfor hovednettstedet. Landingssiden foran
[selskapets egen git-forge](/nb/portfolio/deployed-the-companys-own-git-forge-121/) hadde vært en
håndvedlikeholdt kopi av hovednettstedets design, og hver forskjell som noen gang ble funnet mellom
de to, viste seg å være et uhell og ikke en beslutning. Én av de fem var at ingen side hadde et
main-landemerke eller en overskrift på øverste nivå, og ikke én av de fem var synlig i et
skjermbilde. Kopien ble slettet, og landingssiden bygges nå av hovednettstedets egne maler, så den
arver den samme strukturen i stedet for å etterligne den.

## Hvor det går galt

Feil med landemerker er tause på skjermen og tydelige å høre i en skjermleser. Dette er de vanlige.

**Innhold havner utenfor alle landemerker.** En logo, et varsel om informasjonskapsler eller en
språkvelger plasseres før `header` eller etter `footer`, og en lytter som beveger seg fra landemerke
til landemerke, hopper forbi den. Regelen `region` i axe melder alt innhold som ikke ligger i et
landemerke, men den er merket som beste praksis og ikke som et brudd på WCAG, så en kjøring som er
begrenset til WCAG-merkene, kjører den aldri. Slå på reglene for beste praksis, og flytt elementet
som har kommet på avveie, inn i landemerket det hører til.

**Den samme rollen dukker opp to ganger med det samme navnet.** To `nav`-elementer, ett i toppfeltet
og ett i bunnteksten, leses begge opp som «navigasjon», og lytteren må gjette hvilken som er
hvilken. Gi hver av dem en kort, tydelig etikett med `aria-label` eller `aria-labelledby`, og la
rollen være ute av etiketten: en navigasjon med etiketten «Nettstedsnavigasjon» leses opp som
«Nettstedsnavigasjon navigasjon».

**Et ekstra main eller banner dukker opp.** En `div` får `role="main"` eller `role="banner"` for at
en komponent skal virke viktig, eller en mal pakker en underside inn i sin egen `main`, og siden
melder nå to av en rolle den skulle hatt én av. Spesifikasjonen ber om høyst ett `banner`, ett
`main` og ett `contentinfo` per side, og axe har en regel for hver av dem. Sjekk listen over
landemerker etter hver endring i oppsettet, og la de innebygde elementene bære rollene der de kan.

**Hver blokk blir en region.** Et komponentbibliotek gir hver `section` en `aria-label` som
standard, og listen over landemerker fylles opp med titler på kort. Gi en `section` et navn bare når
en leser vil hoppe til den fra et hvilket som helst sted på siden.

En side formet som skissen nedenfor gir en lytter fem stopp, hvert av dem tydelig:

```html
<header><!-- logo, search --></header>
<nav aria-label="Site"><!-- menu --></nav>
<main>
    <h1>Prices</h1>
    <section aria-labelledby="hosting">
        <h2 id="hosting">Hosting</h2>
    </section>
</main>
<footer><!-- contact, legal --></footer>
```

## Les mer

- [WAI-ARIA 1.2: Landmark Roles](https://www.w3.org/TR/wai-aria-1.2/#landmark_roles) — de åtte
  rollene, hva hver av dem er til for, og hvilke som må ha en etikett.
- [Landmark Regions](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/) — W3Cs veiledning
  for forfattere om valg av roller, etiketter på gjentatte landemerker og om å holde alt innhold
  inne i ett.
- [HTML Accessibility API Mappings 1.0](https://www.w3.org/TR/html-aam-1.0/) — hvilke HTML-elementer
  som blir hvilke roller, også når `header`, `footer`, `aside` og `section` teller som landemerker.
- [ARIA11: Using ARIA landmarks to identify regions of a page](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11)
  — WCAG-teknikken, med testprosedyren og suksesskriteriene den oppfyller.
- [2.4.1 Hoppe over blokker (Nivå A)](https://www.uutilsynet.no/wcag-standarden/241-hoppe-over-blokker-niva/103)
  — Uu-tilsynets tolkning av kravet, med grensen på fem tabulatorsteg og testregelen.

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