WCAG: praktisk tillgänglighet för webbplatser
WCAG är riktlinjer för att göra webbplatser tillgängliga för fler. Du granskar bland annat kontrast, rubriker, tangentbordsanvändning och formulär. Kombinera automatiska tester med att själv prova webbplatsen, eftersom verktygen inte hittar alla hinder.
WCAG beskriver vad innehåll och funktioner behöver klara för att människor med olika förutsättningar ska kunna använda dem. Det gäller både hur sidan byggs och hur informationen presenteras.
Vad innebär WCAG i praktiken?
| Princip | Exempel på vad du gör |
|---|---|
| Informationen ska gå att uppfatta | Ge meningsbärande bilder textalternativ och texta förinspelad video med tal. |
| Funktionerna ska gå att hantera | Gör meny och formulär möjliga att använda med tangentbord och visa var fokus ligger. |
| Innehållet ska gå att förstå | Ge formulärfält tydliga etiketter och förklara hur ett fel ska rättas. |
| Innehållet ska fungera med hjälpmedel | Använd HTML-element med rätt betydelse, så att exempelvis en knapp känns igen som en knapp. |
För ett e-postfält betyder det exempelvis att rubriken ska vara kopplad till fältet, inte bara stå som en platshållare som försvinner när besökaren skriver:
<label for="epost">E-postadress</label>
<input id="epost" name="epost" type="email" autocomplete="email">Om adressen är felaktig behöver besökaren få ett begripligt felmeddelande. Det räcker inte att bara göra kanten röd. WCAG-kriterierna hjälper dig att beskriva både kravet och vad som behöver ändras.
Vad betyder A, AA och AAA?
WCAG:s krav kallas framgångskriterier och delas in i nivåerna A, AA och AAA. För att klara AA behöver webbplatsen också klara kriterierna på nivå A. Ange både nivå och WCAG-version när du beställer eller gör en granskning.
W3C:s WCAG-översikt beskriver versionerna och kriterierna. WCAG 2.2 är en publicerad rekommendation. Ta reda på vilka lagkrav som gäller för er verksamhet och vilken granskning ni behöver.
Testa ett kontaktformulär
Prova att be om en offert utan mus. Öppna menyn, hitta tjänsten och gå till kontaktformuläret. Försök sedan skicka det med ett obligatoriskt fält tomt.
| Kontroll | Vad ska du kunna se eller göra? |
|---|---|
| Tangentbord | Nå formulär och knappar i en begriplig ordning. |
| Fokusmarkering | Se vilket element som är aktivt. |
| Etiketter | Förstå vad varje fält efterfrågar även när du börjat skriva. |
| Fel | Förstå vilket fält som behöver rättas och hur. |
| Bekräftelse | Få besked om att förfrågan har skickats. |
Det här exemplet fångar flera praktiska hinder. En knapp som ser tydlig ut kan sakna ett begripligt namn för hjälpmedel. Ett rött fält kan vara otillräckligt om färgen är den enda förklaringen till felet.
Gå från startsida till skickat formulär utan mus
Lägg undan musen och använd Tab och Shift+Tab för att flytta framåt och bakåt. Följ den synliga fokusmarkeringen: går det att förstå var du är och i vilken ordning elementen nås? Öppna meny och andra kontroller med de tangenter som passar kontrolltypen. Länkar och knappar behöver inte fungera på exakt samma sätt.
Fyll sedan i ett kontaktformulär med ett avsiktligt fel. Kontrollera att felet beskrivs i text och kopplas begripligt till rätt fält, att tidigare uppgifter finns kvar och att det går att rätta och skicka igen. Bedöm också namn och instruktioner för fälten; en snygg platshållartext är inte alltid en tillräcklig etikett.
Beskriv felet så att utvecklaren kan hitta det: ”Fokusmarkeringen försvinner bakom mobilmenyn efter tredje Tab-trycket.” Ange sida och webbläsare, beskriv hur det borde fungera och testa igen efter rättningen. W3C:s inledande kontroller hjälper dig att komma igång, men räcker inte för en fullständig WCAG-granskning.
Automatiska verktyg hittar bara en del
En skanner kan ge en bra första lista över exempelvis vissa kontrastproblem och saknade attribut. Den kan inte avgöra allt som kräver mänsklig förståelse. En alternativtext kan finnas men beskriva fel sak. Rubrikerna kan följa en teknisk ordning och ändå vara obegripliga.
Kombinera verktyg med manuell granskning och gärna tester med personer som använder hjälpmedel. Skriv ned vilka sidor ni har testat, hur testerna gjordes och vad ni hittade.
Beskriv felen så att de går att rätta
- Beskriv handlingen besökaren försöker utföra.
- Ange var hindret finns och hur det kan återskapas.
- Koppla problemet till relevant WCAG-kriterium när du kan.
- Prioritera hinder som stoppar viktiga uppgifter.
- Testa samma flöde igen efter rättningen.
Ta med gemensamma komponenter som menyer, dialogrutor och formulärfält tidigt. Ett fel där kan finnas på hela webbplatsen. Kontrollera också mobilens layout med större text, så att förbättringen inte försvinner vid en annan skärmstorlek.
Skriv också begripligt
Formulär behöver också begripliga frågor. Be någon som inte känner verksamheten läsa instruktionerna och förklara vad de ska göra. Byt interna förkortningar mot ord kunden känner igen och förklara ovanliga begrepp. Det hjälper också arbetet med konverteringsoptimering: besökaren måste kunna fylla i formuläret innan du kan förbättra hur många som skickar det.
”*” anger obligatoriska fält
