Förenklad beskrivning av WCAG-kriteriet 2.4.1

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

Utkast publicerat 2018-12-28

Uppdatering efter diskussion i referensgrupp.

Kom gärna med synpunkter, antingen i kommentarsfunktionen sist på sidan, med epost till info@webbriktlinjer.se, eller i Facebookgruppen webbriktlinjer.

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 ö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. Här är en översikt över strukturkod och ARIA-attribut:

Funktion/del av sida HTML5 strukturelement

(med exempel på aria-label)

ARIA-attribut

(på valfritt element)

Sidhuvud/beskrivning av webbplatsen <header> role=”banner”
Sökfunktion Saknas, använd ARIA! role=”search”
Navigation/meny (kan finnas flera) <nav aria-label=”huvudmeny”> role=”navigation”
Huvudinnehåll <main> role=”main”
Andra delar som står för sig själv. Exempelvis en puff som informerar om annan sida, eller en ruta med fristående information. Kan finnas flera. <aside> role=”complementary”
Formulär (dock ej webbplatsens sökfunktion, se ovan). <form aria-label=”anmälningsformulär”> role=”form”
Sidfot/beskrivning av sidans huvudinnehåll, exempelvis upphovsrätt, användarvillkor <footer> role=”contentinfo”
Landmärke som används för att identifiera regioner på en sida. (kan finnas flera, men använd bara för delar som är så viktiga att de behöver finnas i sidnavigation) <section aria-labelledby=”region1″>

<h2 id=”region1″>rubrik för region 1</h2>

… Innehåll för region 1…

</section>

role=”region”

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.

Dold länk ovanför Huddinge kommuns logotype.

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)


    Om denna riktlinje

    Status på vår webbplats


    (Då uppdateras status i checklistorna.)

    Om WCAG

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

    WCAG 2.1 saknar ännu svensk översättning, men för de formuleringar som är identiska i version 2.0 och 2.1 citeras den officiella översättningen av version 2.0. Utdraget kan dock 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).