Riktlinje nr 75 Prio 1 WCAG nivå A

Erbjud möjlighet att hoppa förbi återkommande innehåll

Utdrag från WCAG-standarden

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)

WCAG (Web Content Accessibility Guidelines) 2.0 är den standard som bland annat webbdirektivet bygger på. Se även webbriktlinje R1. Följ WCAG 2.0 nivå AA.

Utdraget kommer från en översättning och kan innehålla fel. Den version som är mest giltig vid uttolkning är det engelskspråkiga originalet på W3C:s webbplats.

Där finns även de officiella förklaringarna och lösningsförslag till riktlinjen (på engelska).


2017-06-30: Resterande del av sidan är ett utkast. Syftet är att underlätta tillämpning av WCAG. Förbättringsförslag efterlyses. Kommentera gärna med hjälp av kommentarsfunktionen sist på sidan eller i Facebookgruppen webbriktlinjer eller med epost till info@webbriktlinjer.se.

Vad betyder det här?Länk hit

För användare som lyssnar igenom en sida med skärmläsare, eller som tabbar sig fram med tangentbord eller någon typ av hjälpmedel tar det lång tid att komma förbi till exempel en meny. När samma innehåll dessutom upprepas på flera sidor kräver navigationen betydande ansträngning och för vissa användare även smärta om samma rörelse måste upprepas om och om igen. Därför ska det alltid finnas möjlighet att hoppa förbi sådant upprepat innehåll.


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.
  • 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, 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.



Kommentarer (0)