Tydlighet framför allt

Det är en otäck känsla när man hela tiden anar att man missar något, att man inte riktigt har kontroll över situationen. Den känslan skapar vi när det inte är tillräckligt tydligt för användaren vad som är en länk, när ljud spelar och vi inte kan stoppa det, samt när text och bakgrund flyter in i varandra. Situationen blir snabbt frustrerade och enerverande.

Det kan vara små detaljer som avgör om en människa kan urskilja innehåll och därför är det viktigt att man använder bra verktyg för att till exempel avgöra rätt färgton och rätt volym på bakgrundsljudet.

"Urskiljbart" handlar om att göra innehåll, både text och ljud, så tydligt som möjligt för användaren. Syftet är att minska bruset och öka möjligheterna för besökare att utan hinder förstå och ta till sig information.

För denna riktlinje finns tre tydliga nivåer som jag vill lotsa dig igenom:

Nivå A

  • 1.4.1 Använd inte enbart färg som det enda sättet att förmedla betydelse. Det klassiska exempelmisstaget är att i löptext förlita sig på enbart färg för att särskilja länkar. Skillnaden mellan brödtext och länkar blir för svag, och man måste alltså komplettera med någon form av understrykning och/eller ikon för att uppfylla den lästa nivån av tillgänglighet.
  • 1.4.2 Tillåt styrning av ljud. Om ett ljud spelar i mer än 3 sekunder så finns det antingen en tydlig möjlighet att pausa eller stoppa ljudet och/eller så finns möjlighet att styra ljudets volym oberoende av det övergripande systemets volym.

Nivå AA

  • 1.4.3 Kontrastförhållanden. Text, och bilder av text, måste ha ett kontrastförhållande på minst 4:5:1. För stor text på 18 punkter eller mer gäller förhållandet 3:1. Undantaget är text som inte fyller en informationsbärande funktion, samt logotyper.

Men vad betyder dessa kontrastförhållanden i praktiken? För att avgöra det måste du mäta kontrasten mellan förgrund (textens färg) och bakgrund (färgen bakom texten). Snabbast går du enkelt till online-verktyget Colour Contrast Check och matar in värdena för färgerna som du vill använda. Där kan du också leka med ett reglage för att öka och minska färgstyrkorna. Du får omedelbart bekräftelse på om kontrasten uppfyller WCAG:s krav.

Om du sitter desto oftare och bedömer kontrast rekommenderar jag att ladda ner och installera verktyget Contrast Analyser for Windows and Mac, som ger dig möjlighet att plocka färger direkt från skärmen och bedöma deras kontrastförhållande. Det du snart märker är att det är små skillnader som kan avgöra om det blir godkänt eller inte, så det finns sällan bra ursäkter för att inte göra rätt från början.

⚠️
Observera: Det är väldigt lätt att tro att man med synen kan avgöra om något har tillräcklig kontrast, men det är ofta jag blir förvånad över bristen på godkänd kontrast. Tillåt dig själv att bli förvånad och gör jobbet ordentligt genom att kolla av färgerna.
  • 1.4.4 Ändra storlek på text. Förstoring av text är möjlig upp till 200% utan behov av tredjepartsverktyg, utan att förlora någon funktionalitet i sidan och utan att innehåll försvinner. Moderna webbläsare klarar det här rätt bra på egen hand.
  • 1.4.5 Bilder med text. Bilder med text används endast om bilden visuellt kan anpassas till användarens behov, eller när en specifik presentation av texten är nödvändig (som i logotyper). Generellt finns ingen som helst anledning att ersätta text med bilder av texten.

Här följer fyra AA-kriterier som är nya i version 2.1 av WCAG, och därför i numreringen hamnar efter några av de äldre kriterier som hör till nivå AAA. Blir därför inte förvånad över att numreringen hoppar över några nummer och sedan tillbaka.

  • 1.4.10 Responsiv design. Innehåll kan presenteras utan att information eller funktionalitet går förlorad, och utan att det krävs bläddring i två dimensioner för:
    • Vertikalt bläddrande vid en bredd som på 320 CSS-pixlar.
    • Horisontellt bläddrande vid en höjd på 256 CSS-pixlar.

Detta säger oss att webbsidor ska fungera (utan att behöva bläddra/skrolla) ner till de flesta storlekar som används av smarta telefoner.

  • 1.4.11 Kontrast för innehåll som inte är text. Den visuella presentationen av följande har ett kontrastförhållande på minst 3:1 gentemot intilliggande färg(er):

    • Komponenter i gränssnittet. Visuell information som används för att indikera inställningar och gränserna för dessa komponenter; förutom inaktiva komponenter eller när utseendet på komponenten styrs av webbläsaren och inte utvecklaren.
    • Grafiska objekt. Delar av grafik som behövs för att förstå innehållet, förutom när en särskild presentation krävs för informationen som förmedlas.

  • 1.4.12 Textavstånd. Användare och webbläsare måste själva kunna justera text för att göra den lättare att läsa. I markup-innehåll som stödjer följande text-egenskaper så förloras inget innehåll och inga funktioner genom att ställa in alla dessa utan att ändra någon annan stil-egenskap:

    • Radhöjd (radavstånd) till minst 1.5 gånger typsnittets storlek
    • Avstånd efter textstycken till minst 2 gånger typsnittets storlek
    • Teckenavstånd till minst 0.12 gånger typsnittets storlek
    • Ordavstånd till minst 0.16 gånger typsnittets storlek

Undantaget: Mänskliga språk och skript som inte använder något av dessa text-egenskaper i skrift klarar sig med de egenskaper som används.

  • 1.4.13 Innehåll vid Hover eller Focus. När ytterligare innehåll döljs och/eller visas som ett resultat av att användaren antingen håller markören ovanför ett klickbart element (hover), eller tangentbordet används för att markera ett klickbart område (focus), så gäller följande:
    • Möjlig att avvisa. Möjlighet finns att avvisa det ytterligare innehållet utan att flytta markör eller fokus, såvida inte det ytterligare innehållet kommunicerar ett inmatningsfel, eller inte döljer eller ersätter annat innehåll
    • Synlighet vid hover. Om markörens placering kan aktivera det ytterligare innehållet så kan markören också förflyttas ovanför det ytterligare innehållet utan att det försvinner.
    • Beständighet. Det ytterligare innehållet förblir synligt till dess att hover eller focus försvinner, användaren avvisar det, eller informationen inte längre är giltig.
    • Undantag: Din visuella presentationen av det ytterligare innehållet kontrolleras av webbläsaren och kan inte justeras av utvecklaren.

Nivå AAA

  • 1.4.6 Textens kontrastförhållande bör vara på 7:1, eller 4:5:1 för stor text (stor text innebär 18 punkter eller mer vid normal text, 14 punkter och uppåt för fet text)
  • 1.4.7 Bakgrundsljud i förinspelat ljud går antingen att stänga av, är 4 gånger lägre (20 decibel lägre) i ljudstyrka än förgrundsljudet eller finns helst inte alls. Undantaget är musikaliska ljudspår eller ljud som är en ljudlogotyp.
  • 1.4.8 För block av text finns funktioner för att åstadkomma följande:
    • Förgrunds- och bakgrundsfärg kan väljas av användaren.
    • Radlängden är på 80 tecken eller färre (40 tecken för CJK – Kinesiskt, Japanskt, Koreanskt)
    • Radhöjden är på 1.5 eller mer, och mellanrum mellan stycken är minst 1.5 gånger mer än radhöjden.
    • Textstycken är inte marginaljusterade, alltså kantjusterade på både höger och vänster sida.
    • Text kan förstoras upp till 200% utan förlorad funktionalitet och utan krav på att behöva bläddra i sidled för att läsa texten.
  • 1.4.9 Det finns inga undantag till kriteriet att bilder med text endast används för dekoration eler när presentationen av text är nödvändig för informationen som förmedlas (som i en logotyp).

Som jag varit inne på så är ett vanligt misstag att tänka ”Vi ska uppfylla nivå AA så därför läser vi inte AAA-kriterierna”. Det är självklart rimligt att eftersträva att uppfylla så många kriterier man kan, oavsett nivå, eftersom varenda litet kriterium kommer göra att fler mottagare kan ta till sig information. Så även om man inte har för avsikt att uppfylla nivå AAA fullt ut, ha ambitionen att fastställa vilka delar av nivå AAA som ändå är rimliga.

Denna riktlinje som handlar om tydlighet (och kontroll) innehåller enkla regler som är relativt lätta att implementera och verifiera. Alla handlar om att skapa yta och kontrast för att lättare särskilja innehållet, samt ge användaren kontroll över innehållets presentation och distraktioner. Därför bör det vara tydligt från start när man utvecklar vilka av dessa kriterier som gäller. Och skulle någon ifrågasätta behovet så är svaret enkelt:

Vi gör det systematiskt enklare för fler att ta till sig innehållet genom att eliminera hinder som har visat sig skapa förvirring hos många människor.