Erbjud möjlighet att hoppa förbi återkommande innehåll
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.
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.
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.
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 till denna riktlinje
Kommentarer (0)
Skriv kommentar
Funktionen för att skriva kommentarer använder kakor. Läs mer om kakorna. Enbart förstapartskakor används. Vill du inte godkänna kakor så kan du ställa in din webbläsare att blockera dem. Funktionen går ändå att använda men den kommer då att ställa vissa frågor om och om igen, och kan inte förhandsvisa dina kommentarer.
För att kunna erbjuda denna funktion behöver vi lagra de uppgifter som du själv skriver in (namn, e-post, eventuell webbadress och själva kommentaren) samt IP-nummer. Den rättsliga grunden är samtycke och informationen ligger kvar så länge DIGG bedömer att den tillför förståelse för riktlinjen, eller tills du begär att den raderas. Läs mer om DIGGs behandling av personuppgifter.