Riktlinje nr 75 Prio 4

Gör det möjligt att hoppa förbi delar på sidorna

Bygg in genvägar i strukturen. 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.


Rekommendationer för att underlätta navigation mellan sidans delarLänk hit

  • Skapa genvägar för att hoppa i strukturen över till exempel menyn, för att komma direkt till sidans innehåll.
  • Skapa tydliga h-rubriker, eftersom skärmläsare låter användarna snabbnavigera med hjälp av sidans rubriker.
  • Använd WAI-ARIA landmark roles, till exempeo main, search, navigation, banner contentinfo och så vidare. Det gör att användare med exempelvis skärmläsare på ett standardiserat sätt kan navigera mellan sidans olika delar.
  • Om du använder HTML5, använd strukturelement som main, aside, header, footer och nav för att definiera vilken roll varje del av sidan har.


Gör genvägar som synsLänk hit

En webbplats med många 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 teknisk lösning är att placera innehållet först i HTML-koden och i stället tillhandahålla en genväg till navigationen.

Gör genvägarna synliga så ökar chansen att de användare som behöver dem förstår att de finns. Om det är svårt att passa in genvägarna i webbplatsens form kan ni dölja dem med hjälp av stilmallar. Gör i så fall genvägarna så att de blir synliga och aktiva när man tabbar till dem. Se R34. Gör länkar och klickbara ytor enkla att använda för alla.

Ge också sidans olika delar 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 ni dölja.


Hjälp användare med skärmläsare att bläddra mellan sidans delarLänk hit

WAI-ARIA är en standard för tillgängliga webbapplikationer från W3C, alltså samma organisation som standardiserat html och WCAG. Standarden kan ni använda för att knyta ihop en webbapplikation med de standardgränssnitt för tillgänglighet som finns i datorernas operativsystem. Dessa gränssnitt används bland annat av skärmläsarprogramvara. Genom att lägga in WAI-ARIA-kodning i html-koden för er webbapplikation kan ni alltså underlätta för användare som saknar syn eller har nedsatt syn. För navigation mellan sidans delar använder ni WAI-ARIA-attributet role. Märk upp sidans delar med ”landmark roles” som main, search, navigation, banner och contentinfo så kan användare med skärmläsare enkelt bläddra mellan dessa olika delar.

Om ni använder html5 är det viktigt att använda de termer för sidstruktur som erbjuds av den standarden, till exempel elementen main, aside, header, footer och nav.

Se även R68. Skapa snabbkommandon för viktiga funktioner och R53. Gruppera formulärets fält.


ExempelLänk hit

Filosofiska fakulteten vid Göteborgs universitet använder synliga genvägar till innehållet, se http://hum.gu.se. Dold genväg till navigationen finns bland annat på www.bolagsverket.se och www.stockholm.se. Stäng av användning av stilmallar i din webbläsare. Då framträder länken ”Hoppa till navigering” överst på sidan.

Riksdagens webbplats använder WAI-ARIA landmark roles. Helsingborgs webbplats använder html5 strukturelement.


MätbarhetLänk hit

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 strukturen på sidan. Ni kan behöva analysera koden.

För att testa WAI-ARIA och HTML5 strukturelement, prova att besöka webbsidan med en modern version av ett skärmläsarprogram, till exempel Jaws eller NVDA, i kombination med en modern webbläsare. Använd skärmläsarens dokumentation för att ta reda på hur du navigerar mellan sidans delar.



Kommetarer (0)