Koll på tillgänglighet: 4. Urskiljbart

OBS! Nu är allt innehåll i artikelserien Koll på tillgänglighet uppdaterat och samlat i en gratis publikation på digitill.se.

Det är en hemsk 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 viktgt att man använder bra verktyg för att avgöra rätt ton av färg och rätt volym på bakgrundsljudet. Det här inlägget är en del av en serie poster om tillgänglighet.

wcag-urskiljbart-tillganglighet

Riktlinje nummer 4 i WCAG 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 det också 3 tydliga nivåer som jag snabbt tänkte lotsa dig igenom:

Nivå A:

  • 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.
  •  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:

  • 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.

  • 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.
  • Bilder av 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.

Nivå AAA:

  • 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)
  • 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.
  • För block av text kan förgrunds- och bakgrundsfärg 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.

Ett vanligt misstag när man jobbar med tillgänglighet är att tänka “Vi ska uppfylla nivå AA så därför läser vi inte AAA-kriterierna”. Jag tycker det är rimligt att eftersträva att uppfylla så många kriterier man kan, oavsett nivå, eftersom varenda litet kriterium kommer göra det lättare för mottagaren att ta till sig information. Så även om man inte har för avsikt att uppfylla nivå AAA fullt ut, försök fastställa vilka delar av nivå AAA som är rimliga.

Denna fjärde 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 hämma förståelse för många människor.