EU:s tillgänglighetsdirektiv har trätt i kraft och det är dags att börja kavla upp ärmarna för att få webbplatsen tillgänglig. För att uppfylla direktivet ska du:

  • Publicera tillgänglighetsutlåtande
  • Gör det möjligt för användare att påtala brister
  • Följ WCAG 2.1 nivå AA

De två första punkterna tog jag upp i Har du koll på EU:s tillgänglighetsdirektiv så här tänker jag lyfta upp några av de saker du bör göra för att uppfylla WCAG 2.1 nivå AA.

Tillgänglighet enligt EU – WCAG 2.1 nivå AA

WCAG, eller Web content accessability guidelines, är de internationella riktlinjer för tillgänglighet EU vill att vi ska följa. Just nu är version 2.0 ute, men de kommer med 2.1 i vår. Riktlinjerna finns i tre nivåer, där A är lägst och AAA är högst. För EU räcker det med att man uppnår nivå AA.

Förenklat kan man säga att WCAG kräver tre saker:

  • Tillgänglig design
  • Tillgängligt innehåll
  • Tillgänglig kod

Det här är tre stora puckar, och skulle jag gå igenom alla skulle du fortfarande läsa om en vecka. Därför lyfter jag upp några extra relevanta punkter här.

Tillgänglig design

Design är ett väldigt brett begrepp och här ingår mycket. Vissa saker måste utvecklare, designer och ux:are göra, andra saker kan ni göra redaktionellt.

Exempel på vad er leverantör kan se över

  • Kontrast
  • Tillräckligt med tid
  • Möjlighet att se var man är på sidan

Kontrast, så att färgblinda och personer med dålig skärm eller ljusreflexer kan se. WCAG anger vilka förhållanden det ska vara mellan förgrund (oftast texten) och bakgrunden. Det finns också gratistjänster på nätet, till exempel www.contrastchecker.com

Exempel på dålig kontrast med ljusgrått på ljusblått och rött på rosa.

Bild med dålig kontrast

Har man lässvårigheter, begränsad rörelseförmåga eller är datorovan kan det ta tid att uppfatta information och hinna agera i rutor när man hovrar i bildspel eller liknande funktioner. Ingenting ska försvinna automatiskt efter en viss tid. Om det finns en tidsinställning ska det gå att ställa in att man behöver mer tid.

Användare ska kunna navigera enbart via tangentbordet, och då behöver de se var på sidan de är med en tydlig, grafisk markering. Här visas skillnaden på samma element, först utan pekaren på och sen när man pekar på det.

Bild med omarkerad puff, och en puff som är markerad och har bytt färg.

Konsekvens för förutsägbara sidor

Konsekvens skapar förutsägbara sidor och är viktigt för att användarna ska förstå hur webbplatsen fungerar. Liknande uppgifter ska utföras på samma sätt oavsett var på webbplatsen man befinner sig. Här kan både utvecklare och redaktörer bidra.

Gränssnittselement som menyer, sidhuvud, sidfot och knappar ska se likadana ut och finnas på samma plats på alla sidor. På samma sätt ska man försöka följa det som är standard på webben i övrigt, till exempel med plus och minus eller pilar för att fälla ut och in text.

Redaktörer kan bidra genom att se till att liknande uppgifter finns på samma plats på olika sidor, till exempel kontaktuppgifter och länkar. De kan också se till att formulär skapas så lika varandra som möjligt, oavsett var på sajten de är.  Det kan till exempel handla om att knappar för att ta sig vidare eller skicka alltid heter samma sak, eller att namn och personnummer alltid ska lämnas enligt samma format.

Tillgänglig navigation

Användare ska kunna navigera på olika sätt, och alla sätt ska fungera lika bra. De fyra vanligaste sätten är meny, sök, sajtkarta eller tangentbord. Det är upp till utvecklarna att se till att sajtkarta och länkstigar finns och att det går att navigera via tangentbord, men det är upp till redaktörerna att skapa en bra struktur på webbplatsen och att sökmotoroptimera texterna.

Förutom att sökmotoroptimera texterna kan ni behöva ge internsöket lite hjälp på traven genom att lägga in synonymer, träfförslag och en hjälptext för användaren hur den söker. Det här är ett exempel på hjälptext för sökfunktionen från trafa.se.

Bild på instruerande text för hur man gör en sökning på trafa.se.

Tillgängligt innehåll

Tillgängligt innehåll är till stor del redaktörens ansvar. Det handlar om texter som går att förstå, formulär som går att använda och rätt formatering så att koden blir rätt.

Ett enkelt sätt att försäkra sig om att texter är tillgängliga är att skriva klarspråk. Klarspråk underlättar förståelsen för alla, oavsett om läsaren har koncentrationssvårigheter, dyslexi, svenska som andraspråk eller är expert på att läsa.

Texten ska sedan formateras på rätt sätt, så att även skärmläsare och sökmotorer kan förstå texten. Det innebär att

  • alltid använda rubriksformaten istället för att feta
  • alltid använda punktlistorna istället för att göra egna bindestreck
  • aldrig använda tabeller för att göra layout, utan bara använda det för tabelluppställningar av data
  • skriva förklarande länktexter istället för ”klicka här” eller ”läs mer”

Dessutom ska redaktören alltid lägga in en alt-text för bilder. Alt-texten blir läst av skärmläsaren och ska beskriva bilden.

Förutom att texten ska vara tillgänglig behöver du se över dina formulär. Se till att det är lätt att begripa vad man ska fylla i och hur man ska fylla i dem. Om man gör fel ska man få begripliga felmeddelanden så att man förstår vad det är man ska ändra. Dessutom ska det inte krävas att man gör formuläret på en viss tid.

Exempel på dålig hjälptext. Trots att det står en taxiresa kommer det upp ett meddelande om att det inte finns någon taxiresa. Vad innebär det att användaren ska göra?

Bild med dålig hjälptext.

Och du, en sista sak. Undvik pdf:er. Pdf:er är hemska ur tillgänglighetssynpunkt. De är hemska på mobilen, de är hemska om man behöver skärmläsare och Google gillar dem inte. Måste du ändå använda dem, se till att tillgänglighetsanpassa dem i Word eller Adobe innan du publicerar dem.

Tillgänglig kod

Tillgänglig kod innebär att webbplatsen är kodad så att det går att navigera och förstå sidan med hjälp av olika verktyg. Alla ska ha samma förutsättningar att uppleva webbplatsen på samma sätt, oavsett om man navigerar med mus, tangentbord eller switchknapp och oavsett om man ser sidan eller får den uppläst.

Jag är inte utvecklare, och jag tror inte att du som läser detta är utvecklare heller, så jag kommer inte grotta ner mig i detaljer. Istället rekommenderar jag dig att gå till din leverantör och prata med dem om WCAG. Be dem säkerställa att er webbplats uppfyller de tekniska kriterierna av WCAG. Men var en bra beställare, se till att själv lära dig om WCAG också. På så sätt är du inte utelämnad till vad din leverantör säger utan kan själv avgöra om de förslag de kommer med är rimliga och om de är värda investeringen i tid och pengar.

Lär dig hur EU:direktivet påverkar webbarbetet

Med vår kurs i tillgänglighet för webben lär du dig vad EU:s direktiv innebär, hur det påverkar ditt arbete med webben och vad du behöver göra för att uppfylla det. Du får konkreta tips och verktyg och kommer igång med ditt arbete redan under kursen.