En övergripande förklaring av riktlinjerna

Vägledningen i WCAG är uppdelad i 13 övergripande riktlinjer under 4 områden:

  1. Perceivable, alltså Möjlig att uppfatta
  2. Operable, alltså Möjlig att kontrollera
  3. Understandable, alltså Möjlig att förstå
  4. Robust, alltså Robust (vilket innebär att vi ska maximera kompatibilitet med alla typer av webbläsare)

Den nuvarande versionen av WCAG är 2.1, som lanserades i juni 2018. De riktlinjer och kriterier som är markerade med texten version 2.1 i denna e-bok är alltså relativt nya. I WCAG 2.0 fanns 12 övergripande riktlinjer och i WCAG 2.1 har dessa utökats med en riktlinje och totalt 17 nya kriterier som är utspridda över flera riktlinjer.

För var och en av de 13 riktlinjerna finns det alltså framgångskriterier, som vi kan ta hjälp av för att både planera och utvärdera vår lösning. Kriterierna är uppdelade i 3 nivåer: A, AA, och AAA – där man kan förenklat kan säga att fler A:n innebär en högre grad av tillgänglighet.

Strukturen i WCAG är alltså så här:

  • Områden (totalt finns 4 stycken)
  • Riktlinjer (totalt finns 13 stycken)
  • Kriterier fördelade över en till tre nivåer (A, AA och AAA)

Tips: Området Robust har bara en riktlinje och tre kriterier, att bygga för högsta möjliga kompatibilitet, så koncentrera dig först på att lära dig de första tre områdena.

Vad de flesta sajter gör fel (inklusive många kravspecifikationer jag läst) är att väldigt slarvigt säga:

  • Vi ska uppfylla nivå AA av WCAG 2.0

Problemet med det här påståendet är att alla riktlinjer inte ens har en AA-nivå. Vissa har bara en A-nivå och ibland finns både A och AAA, men inte AA. Det enda rätta är att gå igenom alla riktlinjerna och för var och en ta ställning till hur man ska ge stöd för just det behovet.

Handen på hjärtat, om du med enkla medel kan nå nivå AAA, varför skulle du undvika det bara för att någon annan påstår att nivå AA är tillräckligt? När vi fokuserar på att göra mindre än möjligt blir det ett felaktigt fokus på att undvika att göra saker, i stället för att fokusera på allt man kan göra.

Att gå igenom riktlinjerna tar inte lång tid, det är lärorikt, upplysande och etiskt korrekt att ta ett medvetet beslut kring egenskaper som påverkar hur alla människor kan konsumera innehåll i din tjänst eller produkt.

Snabbgenomgång av riktlinjerna

I listan markeras vilka A-nivåer som finns angivna för respektive riklinje.

  1. Möjlig att uppfatta

    • Textalternativ. Allt innehåll som inte består av text måste ha ett textalternativ. Exempelvis: bilder ska ha ALT-attribut. Nivåer: A
    • Tidsbaserad media. All multimedia som är förinspelad (ej live) måste ha tillhörande text som förmedlar innehållet. Är det live ska det gärna teckentolkas. Nivåer: A, AA, AAA.
    • Strukturerat innehåll. Det ska gå att maskinellt förstå vad som är rubriker, länkar, listor, tabeller, etiketter till formulärfält, och så vidare. Koda rätt alltså. Man får inte heller i sina texter hänvisa till saker baserat på färg, form, storlek eller placering som ”klicka på den röda ikonen” eller ”kolla i kolumnen till höger”. Det är inte säkert att sådana egenskaper presenteras för användaren på samma sätt som för dig. Nivåer: A, AA (2.1), AAA (2.1).
    • Urskiljbart. Hjälp människor att se och höra innehåll. Kontrast mellan förgrund och bakgrund måste vara godkänd. Använd heller inte endast färg för att särskilja visuellt innehåll (som för länkar, understrykning är alltså att rekommendera). Användaren måste också kunna själv kontrollera uppspelning av eventuella ljud. Nivåer: A, AA, AAA.

  2. Möjlig att kontrollera

    • Åtkomst via tangentbord. Det ska gå att hantera all funktionalitet på sidan med endast ett tangentbord. Nivåer: A, AAA.
    • Tillräckligt med tid. Om en sida har en tidsgräns så får användaren alltid möjlighet att förlänga, stänga av eller justera den tidsgränsen. Om saker rör sig går det att stoppa, pausa eller döljas. Nivåer: A, AAA.
    • Anfall (epilepsi och liknande). Inget innehåll på sidan blinkar mer än 3 gånger per sekund såvida inte blinkandet är tillräckligt litet, med låg kontrast och inte har för mycket rött. Nivåer: A, AAA.
    • Lättnavigerad. Gör det möjligt att hoppa över innehåll, ha en beskrivande titel, informativa länktexter, gör formulärfältens etiketter informativa och gör det visuellt uppenbart vilket element på sidan som har fokus om man navigerar via tangentbordet. Nivåer: A, AA, AAA.
    • Peka och markera. Det ska vara möjligt att kontrollera gränssnitt med endast ett finger/musmarkör/röstmarkör. Det innebär till exempel att du måste erbjuda alternativ till pekgester med flera fingrar. Tänk också på storleken på klickytor och att tillåta alla typer av inmatningsverktyg som plattformen tillåter. Nivåer: A, AAA.

  3. Möjlig att förstå

    • Läsvänligt för skärmläsare. Språk är angivet för hela dokumentet och delar av sidan som är på annat språk är markerat i koden med lang-attributet. Nivåer: A, AA, AAA.
    • Förutsägbar. När ett element på sidan får fokus, eller när information matas in i formulär, så förändras inte innehåll på sidan på ett sätt som kan desorientera. Navigationselement ändrar inte ordning vid navigering på sidan. Alltså: var försiktig med Ajax. Nivåer: A, AA, AAA.
    • Inmatningshjälp. Det är tydligt om information ska skrivas in på ett visst sätt och/eller är obligatoriskt. Eventuella felmeddelanden presenteras på ett intuitivt sätt där felet är tydligt markerat med snabb access till möjlighet att åtgärda och skicka om. Nivåer: A, AA, AAA.

  4. Robust

    • Kompatibilitet. Följ specifikationerna för den HTML-standard du använder för sidorna. Säkerställ att så många webbläsare som möjligt kan använda tjänsten. Nivåer: A, AA.

Du märker säkert att mycket av andemeningen går att förstå nästan genast, medan andra saker kan behöva mer förklaring. Du kanske också undrar hur vissa riktlinjer påverkar just dig. Ofta kan du faktiskt utesluta flera riktlinjer som inte är relevanta för din lösning. Det ger dig i slutändan endast en handfull riktlinjer att djupdyka i och hantera.

För var och en av dessa riktlinjer kommer jag att ge exempel och förklara hur de påverkar olika roller i ett team som jobbar med webben: beställare, redaktörer, utvecklare och andra producenter. Jag kommer också peka på positiva effekter inom andra kritiska områden som användbarhet och sökmotoroptimering.