Koll på tillgänglighet: 8. Lättnavigerad

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 handikapp som påverkar ditt närminne, eller har grava synnedsättningar. Tänk dig att du råkar hamna på din webbplats. Hur vet du var du är?

Det här inlägget är en del i en serie poster om tillgänglighet.

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

Riktlinje nummer 8 i min lista över WCAG:s 12 riktlinjer handlar just om att snabbt kunna orientera sig på en sida och tydligt stöd för att förstå var man är.

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

Nivå A

• 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.
• 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.
• Länksyfte (kontext). Länktexten ska vara beskrivande och det ska gå att förstå vart den leder bara baserat på länktexten eller i kombination med dess programmatiska sammanhang. Det finns några rekommendationer för länkar och det vanligaste, och faktiskt godkända för denna nivå, är att komplettera länken med ett TITLE-attribut. Jag kan dock säga att skärmläsare generellt är urusla på att läsa upp TITLE-attributet så jag skulle verkligen rekommendera att se till att länktexten kan stå för sig själv (se nivå AAA). Och ja, jag är pinsamt medveten om att jag inte alltid lever upp till detta själv.

Nivå AA

• 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.
• 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.
• Synligt fokus. När man användet 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.

Nivå AAA

• 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. (I mitt avslutande inlägg kommer jag demonstrera detta med en skärmläsare.)
  
• 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.
• 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 (breadcrumb trail), 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.

Nog borde du uppfylla alla rekommendationer i riktlinje 8, även den högsta nivån fa AAA? Fall inte för frestelsen att göra en feg 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 sajt via en tursam sökning i Google, 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 för sina liv.