Riktlinjer i kategori Funktion
Navigera med tangentbordet
Därför är tangentbordsnavigation viktigt
En del användare navigerar genom att använda tangentbordet eller andra typer av lösningar som baserar sig på tangentbordsnavigation. Det gäller exempelvis vissa användare med nedsatt rörelseförmåga och gravt synskadade användare som surfar på webben med hjälp av skärmläsare. Många använder tab-tangenten för att navigera, men ibland kan man också använda piltangenterna. Personer som använder skärmläsare kan även ha andra sätt att navigera, exempelvis kortkommandon. Användare som navigerar med tangentbordet eller skärmläsare har ofta inte möjlighet att navigera på något annat sätt så det är viktigt för dem att all information går att komma åt och att alla funktioner och tjänster går att använda med tangentbordet.
Det är nästan aldrig hela gränssnittet eller menyerna som inte går att nå med hjälp av tangentbordet, utan det brukar snarare vara till exempel hjälptexter och avgränsade funktioner som inte går att hantera på det viset.
Se även Riktlinje nr 75 Gör det möjligt att hoppa förbi delar på sidorna
Om du vill fördjupa dig rekommenderar vi WCAG: Riktlinje 2.1 Tillgängligt via tangentbord: All funktionalitet ska vara åtkomlig med ett tangentbord.
Kontrollera att navigering med tangentbordet fungerar
Det finns olika sätt som du kan kontrollera om det går att navigera med tangentbordet eller inte. Prova helt enkelt själv att genom att tabba dig igenom webbplatsen.
- Navigera genom att använda TAB-tangenten (en prickad ruta borde visas runt den markerad länk om det är rätt kodat) och välj ENTER för att följa länken. För att gå till föregående länk håll ner SHIFT och välj med TAB-tangenten.
- För att gå tillbaka till föregående webbsida håll ner ALT + vänster-PIL. För att bläddra framåt håll ner ALT + höger-PIL.
I övrigt kan du använda skärmläsarens dokumentation för att ta reda på hur du i övrigt navigerar mellan sidans delar.
Personer som använder skärmläsare använder andra sätt att navigera på en webbplats.
Apple-enheter har en inbyggd skärmläsare ”VoiceOver” som du kan aktivera (Inställningar > Allmänt > Hjälpmedel). I Windows 7 finns ”Skärmläsaren” (Kontrollpanelen > Hjälpmedel). Om du inte gillar operativsystemets skärmläsare finns förstås separata program. NVDA är gratis medan JAWS är populärt trots att det kostar pengar.För att undvika den här typen av problem är det bra att tänka efter före redan i kravställningen och att tidigt testa föreslagna lösningar och tekniker mot tillgänglighetskraven.
Att i efterhand korrigera den här typen av problem kan visa sig svårt. Men det finns olika sätt att lösa problemen med tangentbordsnavigering i efterhand. Ett exempel kan vara en e-tjänst som har hjälptexter som bara går att nå via en mus, då skulle det vara lätt att åtgärda genom att göra en hjälpsida som samlar e-tjänstens alla hjälptexter, eller en teknisk förändring så att hjälptexterna skrivs ut visuellt genom hela e-tjänsten. I andra situationer kan det handla om att man måste koda om eller byta ut en viss funktion. Det kan i vissa fall vara en snabb insats, medan det i andra fall kan kräva en del timmars utvecklingsarbete. Tänk också på att tangentbordsnavigeringen ska ha rätt tabbordning. Ibland hamnar menyn till exempel sist på sidan fast den egentligen ligger visuellt först.
ARIA-taggar kan också behöva användas för att förbättra navigeringen för hjälpmedelsanvändare. 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. W3C har en WAI-ARIA Overview som vi rekommenderar.
Se även Riktlinje nr 75 Gör det möjligt att hoppa förbi delar på sidorna
Konsekvent navigation, struktur och utformning
Konsekvens för att alla ska förstå
Konsekvens är viktigt för att användarna ska förstå hur webbplatsen fungerar. Det betyder inte att alla sidor måste se likadana ut, men liknande uppgifter ska utföras på samma sätt oavsett var på webbplatsen hen befinner sig.
Låt därför hela webbplatsen ha samma utseende, funktionalitet och placering av menyer, sidhuvud, sidfot, knappar, kontroller och andra grafiska element. Om webbplatsens layout är konsekvent kan färgerna skilja sig mellan avdelningarna utan att påverka enhetligheten, så länge de enskilda elementen beter sig likadant och återfinns på samma ställe.
Ibland passar inte innehållet på en viss webbsida in i den generella utformningen. Gör avsteg om de är motiverade utifrån användningen och syftet med sidan.
Undvik att placera viktigt innehåll långt till höger på innehållssidor. Många användare missar information som ligger där eftersom det är en vanlig plats för reklam.
Se Riktlinje nr 29 Var konsekvent i navigation, struktur och utformning
Så här kontrollerar jag att vi har en bra struktur, navigering och utformning
För att utvärdera om webbplatsen upplevs som konsekvent används användningstester.
Följ också WCAG 2.0 Riktlinjer:
- 2.4 Navigerbart: Tillhandahåll sätt att hjälpa användarna att navigera, hitta innehåll och avgöra var de är.
- 3.2 Förutsägbart: Säkerställ att webbsidor presenteras och fungerar på ett förutsägbart sätt.
Se även Riktlinje nr 29 Var konsekvent i navigation, struktur och utformning
Rubriker med h1-h4
Sökmotorer och skärmläsare använder uppmärkta rubriker
För användare med skärmläsare är korrekt uppmärkning av rubriker nödvändigt för att kunna förstå strukturen i innehållet och för att kunna hitta rätt på sidorna. Sökmotorer utnyttjar också h-element för att avgöra vilket innehåll som har högre relevans i ett dokument. Ord i h1- eller h2-element rankas högre än ord i brödtext.
Se även Riktlinje 105 Skapa rubriker med h-element
Så här kontrollerar jag att rubrikerna är rätt uppmärkta
Beroende på vilken webbläsare du använder kan du kontrollera att rubrikerna är rätt uppmärkta:
- I Internet Explorer kan du kontrollera detta genom att öppna en sida på din webbplats och klicka F12 på tangentbordet. Välj Sök och därefter Välj element genom att klicka. När du sedan klickar på rubriken ser du vilket h-element som rubriken är uppmärkt i.
- I Chrome markerar du rubriken, högerklickar och väljer Granska komponent.
- I Firefox markerar du rubriken, högerklickar och väljer Inspektera element.
- I Safari väljer du Safari, Inställningar och därefter Avancerat. I dialogrutan som kommer upp kryssar du i ”Visa utvecklarmeny i menyraden” så får du tillgång till koden och kan kontrollera.
Anpassa till små skärmar
Pekskärmar och mobila enheter kräver anpassning till små skärmar
Allt fler människor använder pekskärmar och mobila enheter med små skärmar för att söka information, kommunicera och utföra ärenden på nätet. Idag har dessutom många smartphones ett bra inbyggt stöd för tillgänglighet vilket ytterligare är en anledning till varför din webbplats ska fungera bra även på mobila enheter.
Webbriktlinje: R111 Anpassa webbplatsen för små skärmar
Så här fungerar mobil tillgänglighet
En webbplats bör byggas så att innehåll och funktioner anpassar sig till den enhet användaren för tillfället använder, oavsett om det är en mobiltelefon, en surfplatta eller en stationär dator. Ofta löser man detta genom att bygga en webbplats med responsiv design (följsam design) som gör att webbplatsen förändrar utseende beroende på användarens enhet. En del företag eller organisationer väljer att bygga separata mobilanpassade webbplatser med begränsad information eller tar fram en app för exempelvis en enskild tjänst. Oavsett detta bör er huvudwebbplats fungera på olika typer av enheter som mobiltelefoner med små skärmar eller surfplattor.
Med det webbaserade verktyget Viewport Resizer kan du snabbt testa hur en webbplats design och innehåll ser ut med olika skärmupplösningar, men funktionaliteten måste du kontrollera genom att testa webbplatsen i olika enheter och med olika webbläsare.
Undvik CAPTCHA
Så här fungerar CAPTCHA
CAPTCHA är en metod för att skilja datorer från mänskliga användare och används ofta för att hindra robotar från att automatiskt fyller i formulär på en webbplats, exempelvis för att undvika spam eller att reklam läggs in automatiskt i kommentarsfält eller liknande. De har ofta formen av enkla (för människor) frågor, typ ”Är eld varm eller kall?” eller ”Vilken färg har en blå himmel?” CAPTCHA kan också vara ljudbaserade.
En vanlig CAPTCHA-lösning består ofta av en bild med förvrängda ord eller teckenkombinationer som användaren ska skriva av korrekt i ett formulärfält. Sådana förvrängda tecken i bilder kan vara lätt för vissa människor att tolka men sägs vara svårtolkat för ett datorprogram. Det har dock visat sig att många användare har svårt att tolka dessa tecken.
På W3C kan du fördjupa dig i alternativa CAPTCHA-lösningar:
- G143: Providing a text alternative that describes the purpose of the CAPTCHA
- G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality
Skäl att undvika grafiska CAPTCHA
Många människor har svårt att tolka tecknen som är förvrängda i en CAPTCHA-lösning. Det kan gälla alla användare men framför allt personer med olika kognitiva funktionsnedsättningar eller synnedsättning. Genom att använda en CAPTCHA-lösning stänger du ute ett antal människor från att använda formuläret.
På W3C kan du fördjupa dig i alternativa CAPTCHA-lösningar:
Zooma
Alla användare zoomar då och då
De flesta användare har behov att förstora texten, inte minst personer med nedsatt syn, motoriska funktionsnedsättningar eller läs- och skrivsvårigheter. Men även ljusförhållanden och skärmens upplösning kan påverka vilken grad av förstoring varje enskild person behöver. Många användare är vana vid att zooma in/ut på pekskärmar genom att knipa och dra isär fingrarna. Därför är det viktigt att erbjuda den möjligheten även på enheter med små skärmar och surfplattor.
Se även Riktlinje nr 91 Skapa en flexibel layout.
Så här kontrollerar du att zoomning fungerar
Om du vill kontrollera om zoomning fungerar på er webbplats kan du göra på lite olika sätt beroende på webbläsare, t ex Ctrl och scroll på musen eller Ctrl och +/-.
Men glöm inte att även testa i en vanlig smartphone. Då går du in på webbplatsen med en Android, iOS eller Windows och testar att zooma texten på en vanlig artikelsida genom att knipa med fingrarna över texten så ser du snabbt om det fungerar.