3.3.19 Gruppera och skapa möjlighet att hoppa förbi delar på sidorna

Prioritet: 3

WCAG 1: 12.3, 13.6

Det kan ta lång tid att ta sig till olika delar av ett dokument när man navigerar med tangentbord eftersom man normalt måste stega sig förbi varje länk. Webbplatser som har ett omfattande och komplext menysystem med många länkar kan försvåra avsevärt för många användare. Ett sätt att förebygga detta problem är att bygga in genvägar i strukturen.

Med hjälp av genvägar kan användaren till exempel hoppa över en hel menygrupp eller hoppa över all navigation och komma direkt till sidans innehåll. En webbplats med många olika menygrupper och block med information kan behöva flera alternativa genvägar. På enklare webbplatser kan det räcka att ge användaren möjlighet att hoppa över hela navigationen för att komma till innehållet. En annan lösning är att placera innehållet först i HTML-koden och i stället tillhandahålla en genväg till navigationen.

Genvägar underlättar inte bara för den som navigerar med hjälp av tangentbord, utan är också till mycket stor hjälp för den som besöker webbplatsen med en mobiltelefon eller handdator. Mer om webbinnehåll i mobila enheter i kapitel 6.

Uppdatering

Använd WAI-ARIA landmark roles för att beskriva delar av en webbsida

Sedan förra versionen av vägledningen publicerades har W3C arbetat med en standard för hur man beskriver de olika delarna av en webbsida på ett konsekvent sätt. I WAI-ARIA (Accessible Rich Internet Applications) har man definierat ett antal vanligt förekommande delar av en webbsida, så kallade landmarks. Dessa är:

  • application (del av sidan som anses vara mer applikation än dokument)
  • banner (t.ex. sidhuvud som beskriver webbplatsen)
  • complementary (stödmaterial till huvudinnehållet som även är meningfullt om det skulle vara fristående)
  • contentinfo (metadata om huvudinformationen)
  • main (huvudinnehållet på sidan)
  • navigation (navigationsmeny)
  • search (sökfunktion)

Även om WAI-ARIA inte är publicerad som en officiell standard än så rekommenderar arbetsgruppen att man redan nu börjar använda WAI-ARIA. Stöd för WAI-ARIA är redan implementerat i flera webbläsare och hjälpmedel och gör det möjligt att med snabbkommandon navigera till olika delar av en sida. Fördelen för användare är att sättet att hoppa mellan olika delar av en sda blir konsekvent oberoende av vilken webbplats man besöker. I ett hjälpmedel (detta fallet JAWS version 10) kan det se ut så här:

Fönster som visar hur användaren kan hoppa till olika delar av en sida med hjälp av landmark roles.

Verktyg för utvecklare

Om du vill implementera landmark roles i en webbplats kan du testa att det fungerar korrekt med hjälp av följande verktyg:

Exempel

För exempel på sidor i vilka landmark roles är implementerade se exemplen nedan. Använd något av verktygen ovan för att testa att de fungerar.

Slut på uppdatering

Genvägar bör i första hand vara synliga för att öka chansen att de användare som behöver dem förstår att de finns. Om omständigheterna gör det svårt att på ett bra sätt passa in genvägarna i webbplatsens form kan de döljas med hjälp av stilmallar. Genvägarna ska i så fall göras så att de blir synliga när man tabbar till dem och därmed blir aktiva, se 3.1.9 Gör länkar och klickbara ytor enkla att använda för alla.

Sidans olika delar bör också få tydliga rubriker eller etiketter, gjorda med h-rubriker. Detta hjälper främst användare med skärmläsare. Etiketter som seende användare inte är i behov av (till exempel eftersom siddelens funktion framgår av utseende och sammanhang) kan döljas.

Exempel

Synlig genväg till innehållet används av Filosofiska fakulteten vid Göteborgs universitet.

Dold genväg till navigationen används av Bolagsverket. Stäng av användning av stilmallar i din webbläsare. Då framträder länken "Hoppa till navigering" överst på sidan.

Kodexempel på dold genvägar

Kodexempel på dold etiketter

Mätbarhet

Kontrollera att synliga genvägar fungerar genom att följa dem. Om inga genvägar är synliga, börja navigera på sidan med hjälp av tangentbordet. Eventuella genvägar bör då visas när de blir aktiva.

Ta bort stilmallarna, och kontrollera att rubrikstrukturen för sidan är vettig och att det utifrån den går att identifiera alla delar av sidan. Analys av koden kan krävas.

Senast uppdaterad 2009-05-21