Nytt år, nya tag! Är ni redo för det nya EU-direktivet? Läs vidare för några snabba tips om hur du bättrar på tillgängligheten på din webbplats.
Om några veckor firar man i Kina att ormens år börjar, men här i EU är 2025 tillgänglighetens år. Det är nämligen i juni som den nya lagen träder i kraft: den som gäller vissa produkter och tjänster inom den privata sektorn.
Läs mer om tillgänglighetslagen hos Myndigheten för delaktighet
Det finns mycket att vinna på att inkludera flera människor, så oavsett om lagen gäller dig eller inte, fortsätt läsa för några snabba tips på hur du ser över tillgängligheten i dina egna projekt.
Nivå AA
De flesta tillgänglighetskrav utgår från WCAG (Web Content Accessibility Guidelines). Kraven i WCAG kommer i tre nivåer: A, AA och AAA. Oftast siktar man på att uppfylla alla krav på nivå A och AA för att kalla sig tillgänglig.
Läs mer om kraven på webbriktlinjer.se
Färg och form
Ungefär 8 % av män och 1 % av kvinnor är färgblinda. Allra vanligast är att man har svårt att skilja på rött och grönt, men det finns även blå-gul och till och med de som bara ser svartvitt. Det är därför viktigt att inte förlita sig fullständigt på färg. Lägg till en form också så har du säkrat innebörden. Istället för gröna och röda pluppar kan du till exempel använda gröna bockar och röda kryss.
Kontrast
Hög kontrast gör det lättare att urskilja text och annat innehåll från bakgrunden. Det finns mängder med verktyg för att kontrollera kontrasten. Sök bara på ”contrast checker” på webben så hittar du flera online. Det finns även stöd för att göra det direkt i webbläsarens Web Developer Tools. Verktygen brukar berätta om man klarar nivå AA eller AAA i WCAG.
Pixlar och rem
Pixlar är en populär enhet för att bestämma storlek i CSS. Men pixlar skalar inte. Skriver du font-size: 24px så kommer texten alltid att vara 24 pixlar stor, oavsett vad användaren har för textinställningar i sin webbläsare. Skriver du däremot font-size: 1.5rem så kommer textstorleken att skala med användarens inställningar. Använd rem för sånt som ska skala och px för sånt som ska ha en fast storlek. Testa och se om det funkar som du tänkt!
Josh W Comeau har en bra artikel som berättar mer
Små och smala skärmar
När man talar om en liten skärm är det lätt att tänka att användaren sitter på en mobil, men kom ihåg att man också kan ändra storleken på webbläsarens fönster på datorn. Kanske har man två program öppna bredvid varandra? Eller kanske har man ett synfel som gör att man har lättare för att läsa om texten kommer i en smalare spalt?
Jag brukar testa sidan med 320px skärmbredd, vilket är kravet i WCAG. Får allting plats på skärmen? Ser det bra ut?
DOM First Development
När man själv navigerar med ögonen och datormusen är det lätt att fokusera på det visuella. Man kanske använder en h4-tagg för att storleken på rubriken ser bra ut i sammanhanget. Vad man glömmer är att det också måste funka under huven. Användare med skärmläsare behöver kunna förstå hur sidan är strukturerad; rubriker är ett snabbt sätt för dem att scanna av sidan och ta sig till avsnittet de vill läsa mer om. Rubrikerna bör nästlas i ordningen h1 till h6 för att det ska bli logiskt. Den visuella stylingen kan man sköta separat.
Tänk bort CSS:en och utgå från DOM:en när du bygger sidan. Då har du en bra grund för att få den att funka för skärmläsare och tangentbord.
Testa att navigera med tangentbordet – kommer alla knappar och länkar i rätt ordning? Når du allt? Slå på skärmläsaren och lyssna dig genom sidan – kommer allting med?
Använd native elements
Det lättaste sättet att få något att funka rätt är att använda sig av elementen som redan finns i HTML. Ska det funka som en knapp, använd då button. Bygg inte en egen variant av en div. Du får så mycket gratis av att använda button, som att den läses upp som en knapp av skärmläsaren och att den går att nå och trycka på med tangentbordet.
Ljud och rörelse
Distraktioner som ljud och rörelse ska gå att pausa eller stoppa. Kanske har man svårt nog som det är att fokusera på innehållet på sidan. Undvik också för många snabba blinkningar för att inte orsaka epilepsianfall.
Känner du till prefers-reduced-motion? En CSS media query som bestämmer utseendet om användaren ställt in att hon vill minimera rörelser på skärmen. Supersmart ju!
Läs mer om prefers-reduced-motion på CSS Tricks
Skippa vidare
Här är en häftig grej som du kanske inte kände till om du använder ögonen och en mus när du surfar. När du öppnar en tillgänglighetsanpassad hemsida och trycker på tabb på tangentbordet så får du upp en genväg för att hoppa till innehållet på sidan. Detta för att du ska slippa tabba igenom alla menyer i toppen på sidan varje gång. Smart va?
Innehåll
Det är lätt att tänka att ens app är tillgänglig så snart som design och utveckling sett till att den blivit det, men arbetet slutar inte där. Mycket av det som tillkommit i WCAG på sistone rör kognitiva svårigheter. Här krävs ett snällt innehåll. Skriv texten som att en 12-åring ska läsa den. När du gör länkar så förklara med länken vad länken gör (”läs mer om Holly”) istället för det klassiska ”klicka här”. Tydliga länkar är dessutom snälla mot skärmläsare.
Det var alla tips för den här gången. Lycka till nu med din inkluderande utveckling!