# Landmärke
## Vad det är
Ett landmärke, även kallat landmärkesregion eller ARIA-landmärke, är en del av en webbsida som
uppmärkningen namnger efter dess syfte, t.ex. sidhuvudet, huvudinnehållet, navigeringen eller
sidfoten, så att hjälpmedel kan lista de delarna och gå direkt till vilken som helst av dem. En sida
har oftast flera landmärken, och tillsammans beskriver de sidans upplägg för den som aldrig ser det.
WAI-ARIA 1.2 definierar åtta landmärkesroller: `banner`, `navigation`, `main`, `complementary`,
`contentinfo`, `search`, `form` och `region`. En nionde, `landmark`, är den abstrakta föräldern i
specifikationens rollmodell, och specifikationen säger uttryckligen att den inte ska användas i
uppmärkning. De flesta sidor behöver aldrig attributet `role` för att få de övriga åtta, eftersom
HTML-elementen redan bär dem:
- `main` är landmärket `main`, och `nav` är ett `navigation`-landmärke.
- `header` och `footer` blir `banner` och `contentinfo` bara när de hör till sidan som helhet.
Placerade inuti en `article`, en `section` eller `main` är de vanlig sidstruktur och inte
landmärken alls.
- `aside` är `complementary` på sidans översta nivå eller inuti `main`. Inuti annat sektionerande
innehåll räknas det bara när det har ett namn.
- `section` blir ett `region`-landmärke först när elementet har ett tillgängligt namn, antingen från
`aria-label` eller från en rubrik som pekas ut med `aria-labelledby`. En `section` som saknar namn
är bara en grupp.
- `form` motsvarar rollen `form`, och specifikationen kräver att formuläret får en etikett. Det
nyare elementet `search` motsvarar rollen `search`.
Specifikationen ber hjälpmedel att låta människor nå de här regionerna snabbt, och skärmläsare gör
det. I NVDA flyttar `D` till nästa landmärke, och elementlistan visar alla på en gång; rotorn i
VoiceOver har en egen lista över landmärken. Den som kommer till en ny sida kan öppna listan, höra
att det finns en banner, en navigering, ett huvudinnehåll och en sidfot, och känna till sidans form
innan hen har läst ett enda ord av den.
## Varför det spelar roll
Beslutet bakom landmärken gäller om varje del av en sida ligger någonstans där en lyssnare kan
namnge den och nå den. På en vanlig sida är det mesta innehållet upprepat: sidhuvudet, menyn,
sidfoten och ofta en sidopanel ser likadana ut på varje sida på webbplatsen, och det som är nytt
ligger någonstans i mitten. En seende besökare tittar direkt dit. Den som använder skärmläsare på en
sida utan landmärken får i stället lyssna sig förbi samma sidhuvud och samma meny på varje sida,
eller gissa hur många rubriker som ska hoppas över.
WCAG:s egen teknik för landmärken, ARIA11, anges som ett tillräckligt sätt att uppfylla tre
framgångskriterier. Ett av dem kräver ett sätt att hoppa förbi innehållsblock som upprepas mellan
sidor; ett annat kräver att den struktur som en seende läsare får ut av layouten också finns
tillgänglig för programvara. För en offentlig webbplats i Sverige är kriterierna ett lagkrav och
inte bara god sed: DOS-lagen hämtar sina krav ur EN 301 549, och den standarden vilar i sin tur på
WCAG.
Kostnaden för att uppfylla kriterierna på det här sättet är liten när sidan byggs av `header`,
`nav`, `main` och `footer` från början: semantiken följer med elementet, och det finns inget extra
att underhålla. Att i efterhand föra in landmärken i en layout av nästlade `div`-element kostar
mer, men arbetet är till största delen mekaniskt.
Två gränser är värda att känna till. Den första är att specifikationen låter vanliga webbläsare
avgöra själva om de erbjuder navigering mellan landmärken, så den som använder tangentbord utan
skärmläsare har oftast ingen nytta av landmärkena på egen hand, och en synlig länk som hoppar förbi
menyn gör fortfarande nytta. Den andra är att fler landmärken inte gör en sida lättare att använda.
Varje landmärke är en rad i en lista som någon måste lyssna sig igenom, och en sida där varje block
är en namngiven region låter som en innehållsförteckning på femtio rader. Specifikationen reserverar
`region` för innehåll som är viktigt nog att finnas med i en sammanfattning av sidan, och ber att
rollen bara används när ingen av de andra rollerna beskriver syftet.
## Så ser det ut i praktiken
Landmärken hör till den del av en sida som ögat inte ser, och de tre fallen här visar samma sak från
olika håll: ett fel i dem syns i en kontroll som letar efter det, aldrig i en skärmbild.
Det första kom under arbetet med att
[ta hela webbplatsen till WCAG 2.2 på nivå AA](/sv/portfolio/took-wcag-2-2-level-aa-across-the-whole-site-130/).
Automatiseringen kör en regelmotor för tillgänglighet med reglerna för bästa praxis aktiverade, inte
bara reglerna för överensstämmelse, vilket är en skillnad på trettio regler. En av de extra reglerna
fallerade i samma ögonblick som den slogs på, eftersom varumärkessymbolen låg utanför alla
landmärken på varje undersida. Skärmen avslöjade ingenting av det.
Det andra förklarar varför det första hade passerat obemärkt. Bland
[elva fel som webbläsaren hade kallat friska](/sv/portfolio/fixed-11-accessibility-defects-the-browser-called-healthy-131/)
låg två i själva kontrollerna snarare än i sidorna, och ett av dem var att regelmotorn hade kört
sjuttio av sina hundrafem regler. Regeln som skulle ha fångat det saknade landmärket fanns helt
enkelt inte med i uppsättningen. Slutsatsen som sidan drar är kort: en regeluppsättning som inte
innehåller regeln kan inte upprätthålla den.
Det tredje gällde en sida utanför huvudwebbplatsen. Landningssidan framför
[företagets egen git-forge](/sv/portfolio/deployed-the-companys-own-git-forge-121/) hade varit en
handunderhållen kopia av huvudwebbplatsens design, och varenda skillnad som någonsin hittats mellan
de två visade sig vara ett misstag snarare än ett beslut. En av de fem var att det saknades både
`main`-landmärke och huvudrubrik på samtliga sidor, och inte en enda av de fem syntes i en
skärmbild. Kopian togs bort, och landningssidan byggs nu av huvudwebbplatsens egna mallar, så den
ärver samma struktur i stället för att efterlikna den.
## Var det går fel
På skärmen syns misstag med landmärken aldrig, men i en skärmläsare hörs de tydligt. Här är de
vanligaste.
**Innehåll hamnar utanför alla landmärken.** En logotyp, ett cookiemeddelande eller en språkväljare
placeras före `header` eller efter `footer`, och den som rör sig mellan landmärken hoppar förbi det.
Regeln `region` i axe rapporterar allt innehåll som inte ligger i ett landmärke, men den är märkt
som bästa praxis snarare än som ett WCAG-fel, så en körning som är begränsad till WCAG-taggarna kör
den aldrig. Slå på reglerna för bästa praxis, och flytta det vilsekomna elementet in i det
landmärke där det hör hemma.
**Samma roll förekommer två gånger med samma namn.** Två `nav`-element, ett i sidhuvudet och ett i
sidfoten, läses båda upp med samma rollnamn, och lyssnaren får gissa vilket som är vilket. Ge vart
och ett en kort, tydlig etikett med `aria-label` eller `aria-labelledby`, och lämna rollen utanför
etiketten. Skärmläsaren lägger själv till rollnamnet efter etiketten, så en navigering med
etiketten ”Webbplatsnavigering” får ordet navigering uppläst två gånger i rad.
**Ett andra `main` eller `banner` dyker upp.** En `div` får `role="main"` eller `role="banner"` för
att en komponent ska kännas viktig, eller så sveper en mall in en undersida i ett eget `main`, och
sidan presenterar nu två av en roll som den bara skulle ha en av. Specifikationen begär högst en
`banner`, en `main` och en `contentinfo` per sida, och axe har en regel för var och en av dem.
Kontrollera listan över landmärken efter varje ändring av layouten, och låt de inbyggda elementen
bära rollerna överallt där de kan.
**Varje block blir en region.** Ett komponentbibliotek ger varje `section` en `aria-label` som
standard, och listan över landmärken fylls av rubriker från kort. Namnge en `section` bara när en
läsare skulle vilja hoppa dit från var som helst på sidan.
En sida som är uppbyggd som skissen nedan ger en lyssnare fem stopp, vart och ett med sitt eget
namn:
```html
Prices
Hosting
```
## Läs mer
- [WAI-ARIA 1.2: Landmark Roles](https://www.w3.org/TR/wai-aria-1.2/#landmark_roles) — de åtta
rollerna, vad var och en är till för och vilka av dem som måste ha en etikett.
- [Landmark Regions](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/) — W3C:s guide
för den som skriver uppmärkning, om att välja roller, ge upprepade landmärken etiketter och hålla
allt innehåll inuti ett landmärke.
- [HTML Accessibility API Mappings 1.0](https://www.w3.org/TR/html-aam-1.0/) — vilka HTML-element
som blir vilka roller, bl.a. när `header`, `footer`, `aside` och `section` räknas som landmärken.
- [ARIA11: Using ARIA landmarks to identify regions of a page](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11)
— WCAG-tekniken, med dess testprocedur och de framgångskriterier som den uppfyller.