Landmärke

en region på en sida som en skärmläsare kan hoppa till

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. 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 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 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:

<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>

Läs mer

Ordlista