Var är jag?

Tänk dig att du vaknar upp på en okänd plats. Hur orienterar du dig så att du förstår var du befinner dig? Vägskyltar, gatunamn, kända intressepunkter? Åt vilket håll går du? Tänk dig nu att du har kognitiva fuktionsnedsättningar som påverkar ditt närminne, eller har grava synnedsättningar. Tänk dig att du råkar hamna på en okänd webbplats. Hur vet du var du är?

Att hela tiden erbjuda tydlig, kontextuell information om den aktuella webbsidans placering i en hierarki, samt vara lika tydlig med hierarkin inom sidan uppnår du flera mål:

  • Användarna känner att de har mer kontroll över situationen
  • De känner sig inte lika osäkra på var de ska härnäst
  • De kan snabbt orientera sig vid behov, oavsett hur ofta det behovet uppstår

"Lättnavigerad" handlar om att snabbt kunna orientera sig på en sida och få tydligt stöd för att förstå var man är.

För denna riktlinje finns alla tre nivåer av uppfyllnadsgrad för WCAG, och de kan sammanfattas så här:

Nivå A

  • 2.4.1 Hoppa över block. För den som använt en skärmläsare så blir det snabbt ganska tydligt att man inte vill lyssna på menyn varje gång man går in på en sida. Ibland vill man bara scanna innehåll också. Då är det viktigt att det är tydligt och lätt hur man hoppar över navigeringen, kommer direkt till innehållet och hoppar mellan rubriker. Observera att det inte nödvändigtvis handlar om en ”Hoppa över innehållet”-länk, det kan också vara namngivna sektioner eller helt enkelt tydliga rubriker på varje sida. Bara det är uppenbart hur man hoppar dit.
  • 2.4.2 Tydlig titel. Med detta menas inte rubriken på sidan utan det som står i title-taggen på sidan. Det är denna som läses upp först av text- och skärmläsare, som blir synlig i Google och som ofta har ett snabbkommando för att man snabbt ska ”komma ihåg” vilken sida man är på. Många väljer att ha samma title som den synliga rubriken på sidan, men tänk på att texten ska förklara syftet eller innehållet på sidan mycket tydligt.
  • 2.4.3 Fokus-ordning. om en webbsida kan navigeras sekventiellt och ordningen på hur länkarna aktiveras påverkar betydelsen eller styrförmågan, så måste alla element som kan få fokus aktiveras den ordning som vidhåller betydelse (mening) och kontroll.
  • 2.4.4 Länksyfte (kontext). Länktexten ska vara beskrivande och det ska gå att förstå vart den leder enbart baserat på länktexten eller i kombination med dess programmatiska sammanhang. Bland det vanligaste, och tyvärr inte tydligt avrått i specifikationen, är att komplettera länken med ett title-attribut. Här krockar gängse åtgärd med verkligheten eftersom skärmläsare generellt är dåliga på att läsa upp det attributet på ett konsekvent sätt, och det kan bli en källa till många olika typer av störningar. Det du bör göra är säkerställa att länktexten kan stå för sig själv (se nivå AAA) på ett sätt så att alla som tar del av texten blir hjälpta i sitt beslut om att följa länken eller inte.
🤩
Tips: Läs gärna blogginlägget Title Texts Suck, av Hampus Sethfors på Axess Lab, för en genomgång av alla problem med title-attributet i samband med länkar.

Nivå AA

  • 2.4.5 Sajtkarta (och/eller sökmotor). Det ska gå att nå sidan på flera sätt än bara via vanlig navigering. Ett vanligt sätt att åstadkomma detta på är att erbjuda en sajtkarta, som ofta ger duktiga användare ett snabbt sätt att nå allt innehåll. Alternativt kan en sökmotor också sägas uppfylla kravet. Bara det finns mer än ett sätt, som sagt.
  • 2.4.6 Rubriker + etiketter. Rubriker och etiketter i formulär ska tydligt beskriva ämne eller syfte. Tolka gärna detta som att det handlar om rubriker för funktionella element i sidan. En fyndig mellanrubrik i löptext är alltid välkommen.
  • 2.4.7 Synligt fokus. När man använder tab-tangenten för att ta sig fram i sidan, eller med hjälp av andra verktyg som motsvarar navigering via tangentbord, så ska det vara tydligt vilket element som just nu har fokus. En svagt ljusgrå streckad ram räcker alltså inte, utan det bör vara en ram eller bakgrund med hög kontrast som visar var fokus är just nu.
  • 2.4.11 Inget dolt fokus (Minimum). Säkerställ att när ett objekt får tangentbordsfokus är det åtminstone delvis synligt. Människor som inte kan använda en mus måste se vad som har tangentbordsfokus.

Nivå AAA

  • 2.4.8 Var är jag? Jag ska förstå var i webbplatsens hierarki jag befinner mig just nu. Det här går att åstadkomma med så kallade brödsmulor (länkar som beskriver den hierarkiska sökvägen till sidan), med en lättåtkomlig sajtkarta, eller genom att tydligt markera i menyerna vilka som är de aktuella sidorna. Observera att det inte räcker med att måla flikar eller länkar i en annan färg, de måste också programmatiskt innehålla information om att de är de aktuella rubrikerna i menyn – genom exempelvis alternativ text. W3C själva verkar tycka att det kan räcka med att inaktivera länken om du är på den sidan, men jag är faktiskt personligen skeptisk till det.
  • 2.4.9 Länksyfte (endast länk). Om länken är det enda jag kan läsa på sidan så ska jag förstå vart den leder. Inga undantag.
  • 2.4.10 Avsnittsrubriker. Vi har varit inne på det förut: en tydlig struktur i sidan med hjälp av elementen h1, h2 och h3 hjälper alla användare, och sökmotorer, att förstå hur olika delar i sidan förhåller sig till varandra. Det går också snabbt att hoppa mellan sektioner i sidan.
  • 2.4.12 Inget dolt fokus (Utvecklad). Säkerställ att när ett objekt får tangentbordsfokus är det helt synligt. Människor som inte kan använda en mus måste se vad som har tangentbordsfokus.
  • 2.4.13 Fokusutseende. Använd en fokusindikator med tillräcklig storlek och kontrast. Många människor kan inte se små förändringar i visuellt utseende, inklusive äldre människor. Det här innebär att fokusytan är minst lika stor som ytan på en 2-CSS pixel tjock perimeter för den ofokuserade komponenten, och att kontrastvärdet är på minst 3:1 mellan samma pixlar i det fokuserade och det ofokuserade läget.

Nog borde du uppfylla alla rekommendationer i riktlinje "Lättnavigerad", även den högsta nivån AAA? Fall inte för frestelsen att göra en generalisering om att följa nivå AA för alla riktlinjer, se till att du vet när du också kan nå nivå AAA.

Nästa gång någon trillar in långt ner i din webb via en tursam sökning i en sökmotor eller en rekommenderad länk, hjälp dem på fötter genom att anslå tydliga vägvisare. Då minimerar du också risken att de lägger benen på ryggen och flyr tjänsten illa kvickt.