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

• Skapa genvägar för att hoppa över delar i strukturen till exempel menyn, för att komma direkt till sidans innehåll.
• Skapa rubriker med h-element, eftersom skärmläsare låter användarna snabbnavigera med hjälp av sidans rubriker.
• Använd WAI-ARIA landmark roles, till exempel main, search, navigation, banner, contentinfo och så vidare. Det gör att användare med exempelvis skärmläsare kan navigera mellan sidans olika delar på ett standardiserat sätt.
• 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.
• R68. Skapa snabbkommandon vid behov.

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 kan ni dölja eftersom siddelens funktion framgår av utseende och sammanhang.

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

För de delar av webbsidor som är allra vanligast – så kallade landmärken – bör du använda de struktur-element som erbjuds i HTML5, eller i andra hand (om sajten exempelvis inte använder HTML5) motsvarande attribut i ARIA. Då kan den som använder skärmläsare enkelt hoppa mellan landmärkena.

Om du vill kan du kombinera strukturelement med ARIA (t.ex. <main role=”main”>), men det är inte nödvändigt.

Läs mer om landmärken hos W3C.

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

Utdrag från WCAG-standardenLänk hit

Riktlinje 2.4 Navigerbart: Tillhandahåll sätt att hjälpa användarna att navigera, hitta innehåll och avgöra var de är.

2.4.1 Hoppa över grupperat innehåll: En metod/funktion finns tillgänglig för att hoppa över grupperat innehåll som upprepas på flera webbsidor. (Nivå A)

ExempelLänk hit

Region Halland, Huddinge med flera har en genväg till innehållet som visas för alla som börjar tabba, se bild nedan. Dold genväg till navigationen finns bland annat stockholm.se. Stäng av användning av stilmallar i din webbläsare eller tabba. 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.

FördjupningLänk hit

• Mer om WAI-ARIA landmark roles.
• R121. Ange i kod vad sidans olika delar har för roll

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.