Kanske känner du som jag en gång gjorde, att när du hör någon nämna WCAG så känns allt plötsligt dystrare? Form och färger upplevs inte lika inspirerande längre och i en värld där annars möjligheter i normalt fall endast begränsas av din legendariska kreativitet (och till viss del teknik) så känner du dig plötsligt mer låst och ja, dare I say it… tråkig.
Men behöver allt verkligen vara så dramatiskt? Tja, det ställer absolut mer krav på webbplatsens design och utformning, du får antagligen hoppa över en del kreativare idéer som inte kan stödjas men ur min erfarenhet så behöver inte kraven från WCAG resultera i en stel och oinspirerande webbplats.
Men innan vi går mer in på vad det innebär så är det nog bäst att vi snabbt går igenom vad WCAG faktiskt är för dig som kanske ännu inte har en susning eller som kanske bara har hört begreppet kastas runt i konversationer över lunchbordet!
Tillgänglighet åt folket!
Det är vad det hela faktiskt handlar om, mer specifikt i nuläget hos offentliga myndigheters webbplatser och mobila applikationer inom EU. Förkortningen WCAG står för ”Web Content Accessibility Guidelines” och är en del av Webbdirektivet här i Sverige. Man kan gå in mer djupgående men för att ge dig en enkel sammanfattning så handlar det om att se över webbplatsens innehåll och därefter designa och koda på ett sådant vis så att personer med funktionsnedsättningar ska kunna förstå och använda produkten lika bra som personer utan funktionsnedsättningar.
WCAG direktiven är indelade i tre nivåer
Det finns direktiv på både högre och lägre nivåer och samtliga behöver nödvändigtvis inte alltid uppfyllas.
- Nivå A och AA måste följas av samtliga offentliga myndigheter.
- Nivå AAA är rekommenderad.
Nu när vi har tagit oss igenom om vad WCAG är så kan vi prata mer om vad det faktiskt betyder för oss som arbetar med design i vardagen.
Borde jag applicera WCAG i min design oavsett kund?
I en perfekt värld så skulle givetvis samtliga webbplatser ha ett enhetligt bra stöd för de personer som har funktionsnedsättningar, det vore ju inte mer än rätt år 2019.
Men eftersom att det idag inte finns lagkrav på att dessa direktiv ska inkluderas på övriga ”vanliga webbplatser” så är det i slutändan upp till er i projektet och framförallt kunden i sig att avgöra om det är relevant för målgruppen och att budgeten håller för att inkludera WCAG eftersom att kostnaden ökar med tilläggen.
Men hur ska du fullt ut kunna förhålla dig till WCAG när du ska skapa en modern och kreativ webbplats som kanske följer eller sätter dagens trender på webben? Kanske innehåller den mer komplex asymmetri, större utmanande animationer eller andra innovativa delar som inte riktigt är etablerade eller vanligt förekommande ur ett användarperspektiv, det borde väl inte vara möjligt?
Det korta svaret är att det tyvärr är sant, att om man vill skapa dessa innovativa webbplatser som utmanar användaren inom interaktion och upplevelse så kan dem med allra största sannolikhet inte fullt ut stödja WCAG. Det man däremot kan göra är att applicera direktiven i den utsträckning det går för respektive projekt och genom det potentiellt göra det möjligt för vissa personer med funktionsnedsättningar att besöka webbplatsen, även om inte alla kan.
Några självklara fall
Här vill jag nämna ett par av dem typiska fall i vardagen där man bör applicera WCAG så långt man kan i sin design, dessa är i definition inte exakt skrivna som direktiven men är typiska exempel på vanligt förekommande problem.
Presentera innehållet i en meningsfull ordning för alla.
Det är viktigt att layouten följer en strukturell och logisk ordning genom alla enheter responsivt. Detta är för att säkra att en skärmläsare kan ta sig igenom innehållet så som det är tänkt att presenteras.
Gör inte instruktioner beroende av sensoriska kännetecken.
Eftersom att personer med nedsättning inte alltid kan förstå sig på eller har möjlighet att se, så är det viktigt att man är tydlig med den information/riktning man ger användaren. Det är exempelvis svårt för en person som använder skärmläsare att förstå en instruktion som ”klicka på knappen till höger”, eller som icke hörande kunna följa instruktionen “när du hör tonen är det dags att klicka”.
Använd inte enbart färg för att förmedla information.
Färger är mycket användbara för att förhöja användbarhet och estetik. Men vissa användare kan inte uppfatta färgskillnader, till exempel på grund av färgblindhet eller för att de använder en monokrom skärm eller skärmläsare. Använd gärna färger, men låt inte färgskillnader vara det enda sättet att urskilja information utan komplettera med exempelvis text, mönster eller någon annan visuell indikation.
Använd tillräcklig kontrast mellan text och bakgrund.
Kanske en självklarhet för många men ändå så stöter man på webbplatser som svårlästa även för den som inte har större synfel. De flesta kan läsa brödtext på skärm om skillnaden i ljusintensitet mellan förgrund och bakgrund har förhållandet 4,5:1. Därför har WCAG-standarden detta förhållande som grundkrav. Kontrastvärdet kan mätas med hjälp av programvara.
Skriv tydliga länkar
Det är viktigt att användaren får en beskrivande länktext så att hen förstår vart länken leder eller vad man kommer att göra. Undvik därmed generiska titlar som ”Läs mer”, Med det sagt så kan utvecklare i kod om budget finns inkludera ”alt” taggar med en mer utförlig beskrivning som skärmläsare läser istället för det som visuellt visas. Trots detta så rekommenderar vi starkt att man alltid försöker skriva hjälpsamma och informativa länkar eftersom att även personer utan synfel kan få nytta av det. En länk bör aldrig heller bestå av endast en unik färg utan dem ska alltid stöttas av antingen en ikon eller t.ex. understreck för att skapa ytterligare tydlighet.
Skriv beskrivande rubriker och etiketter.
Beskrivande rubriker, ledtexter och etiketter hjälper användarna att förstå en sidas innehåll och syfte. Rubriker och ledtexter behöver inte vara långa. Ofta kan ett enda ord vara tillräckligt för att beskriva innehållet.
Var konsekvent i navigation, struktur och utformning.
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 man befinner sig.
Benämn funktioner konsekvent.
Var konsekvent när du beskriver och namnger samma funktionalitet på olika sidor och skärmar. Det innebär till exempel att rubriker, etiketter, ikoner och alternativtexter som ska beskriva en skicka-knapp ska heta samma sak på hela webbplatsen.
Andra tips som kan förenkla upplevelsen för personer med nedsatt funktionalitet men som också kan skapa nytta för alla användare
- Undvik asymmetri. Personer med koncentrationssvårigheter har lättare att ta del av information som följer en tydlig struktur.
- Undvik text på bild. Generellt brukar texter på bildytor vara svåra att läsa och det är ofta bilden som avgör hur tydlig texten syns vilket kan vara svårt att kontrollera.
- Undvik onödiga animationer. Hjälpsamma mikro animationer är bra men man bör som designer undvika kosmetiska (läs onödiga) eller komplicerade animationer som kan upplevas distraherande för vissa personer.
- Undvik långa texter i versaler. Det är generellt svårare för många att läsa texter som endast består av versaler. De texter som man väljer att använda versaler på bör vara väldigt kortfattade.
- Skapa tydlig inramning. I t.ex. listor så är det alltid repeterande innehåll, att skapa en tydlig inramning för respektive innehåll i listan (exempelvis kort) kan hjälpa personer att fokusera på det enskilda innehållet bättre.
Hur känner du för WCAG nu?
Förhoppningsvis så har du inte kastat datorn i golvet ännu! Du ska absolut se det mer som en positiv utmaning och personlig utveckling att ta till sig. Du gör ju också något gott för dem personer som behöver det när du applicerar ett WCAG tänk i din design. Även om majoriteten av dina nuvarande projekt kanske inte berörs av WCAG just nu så kan mycket lärdom om UI och UX komma genom att lära sig om detta ämne och det gör dig också mer redo för framtiden som onekligen kommer att kräva mer av webbplatser när det gäller tillgänglighet.
