Gör din webbplats mer tillgänglig med personalisering
Den här artikeln är baserad på ett blixttal som jag höll på en T12T-meetup hösten 2021. Om du föredrar att titta och lyssna så kan du se presentationen på Youtube:
Vad är personalisering?
Personalisering innebär att användaren själv kan anpassa gränssnittets utseende och beteende utifrån sina egna behov och preferenser.
För många människor kan personalisering ge en mycket bättre och behagligare upplevelse. Men för vissa användare med funktionsnedsättningar kan personalisering vara helt avgörande för om de kan använda webbplatsen eller inte.
I den här artikeln kommer vi att titta på ett par olika sätt som användare kan personalisera en webbplats – som att ändra textstorleken eller aktivera mörkt läge – och varför det är så viktigt för tillgängligheten.
1. Mörkt läge
Mörkt läge – eller dark mode – innebär att gränssnittet visas med en mörk bakgrund och dämpad färgskala, istället för den vanliga ljusa bakgrunden. Det är många användare som upplever detta som mer behagligt för ögonen, särskilt på natten. Men det mörka läget har även en viktig tillgänglighetsfunktion, då många synskadade användare också är ljuskänsliga och har svårt att läsa text mot lysande vit bakgrund.
Mörkt läge har funnits i mobilappar ganska länge, men börjar bli mer och mer vanligt på webben i takt med att gränserna mellan webb och app suddas ut.
På bilden nedan kan du se hur den här webbplatsen (Useit.se) ser ut i mörkt respektive ljust läge:
För att det ska fungera måste designers och utvecklare ta fram en separat design för mörkt läge. Det kan man göra med hjälp av CSS-egenskapen prefers-color-scheme:
Det är vanligt att man också erbjuder en manuell växlare någonstans på sin webbplats, så som Facebook gör i bilden nedan.
Det kan ju till exempel hända att användaren vill ha Youtube i mörkt läge men föredrar att Facebook ska vara ljust.
2. Minskad rörelse
Animationer och andra automatiska rörelser kan skapa stora problem för användare med funktionsnedsättningar.
I Hampus Sethfors superintressanta artikel "Accessibility according to actual people with disabilities" rankas oönskade rörelser som det allra värsta tillgänglighetsproblemet enligt flera av de tillfrågade användarna.
Därför borde det idag vara en självklarhet att man som designer och utvecklare lyssnar efter systeminställningen "Minska rörelse" och anpassar animationerna därefter.
Detta kan man göra ganska enkelt med hjälp av CSS-egenskapen prefers-reduced-motion:
Här det gäller det dock att ha lite fingertoppskänsla. Bra utförda animationer kan faktiskt vara positiva ur ett tillgänglighetsperspektiv eftersom de hjälper användaren att förstå vad som händer och minskar den kognitiva belastningen.
Det är därför en bra idé att gå igenom dina animationer och identifiera vilka som kan vara problematiska. Överväg att ta bort de värsta helt och hållet - oavsett om användaren har aktiverat minskad rörelse eller inte!
3. Högkontrastläge
Högkontrastläge, också kallat Windows High Contrast mode eller Forced colors mode är en hjälpmedelsinställning i Windows som låter användaren ändra färgtemat på hela datorn, inklusive alla appar, program och webbplatser.
Det gör det möjligt för användare med synnedsättning att anpassa visningen och helt skriva över webbplatsens ursprungliga design.
Förutom att färgerna ändras, försvinner också bakgrundsbilder, skuggor, effekter och andra potentiellt störande element. På bilden nedan kan du se hur den här webbplatsen (Useit.se) ser ut med två olika kontrastteman: "Night sky" respektive "Desert":
Användaren kan också skapa ett eget tema och välja egna färger för olika typer av innehåll, såsom bakgrund, brödtext, länkar, knappar, fokusmarkeringar och nedtonade element.
Det fina med högkontrastläget är att man oftast inte behöver göra något särskilt för att det ska fungera – det räcker om webbplatsen är korrekt byggt med semantisk HTML.
Det kan dock finnas anledning att finjustera vissa detaljer, till exempel om en ikon visas med fel färg, om man vill ta fram en tydligare fokusram, eller om man vill behålla vissa originalfärger. För detta kan man använda CSS-egenskapen forced-colors: active:
Testa själv!
Med Windows 11
- Öppna inställningar
- Gå till Tillgänglighet -> Kontrastteman
- Aktivera ett av de förvalda teman eller skapa ditt eget
Med Mac och Chrome
Det riktiga högkontrastläget finns bara i Windows. Men det finns numera ett sätt att simulera läget i webbläsaren Chrome på Mac:
- Öppna utvecklarverktyget i Chrome
- Klicka på "Fler verktyg" (tre prickar) uppe till höger
- Välj "Renderare"
- Aktivera valet "Emulera CSS-mediefunktionen forced-colors"
- Kombinera med "Emulera CSS-mediefunktionen prefers-color-scheme" för att växla mellan mörkt eller ljust högkontrastläge.
4. Skalbar text
Bra storlek på text är viktigt för att uppnå bra tillgänglighet och användbarhet. Om texten är för liten kan många användare ha svårt att läsa och förstå innehållet. Det är därför viktigt att användare kan ändra och skala om texten på din sajt efter sina egna preferenser, till exempel genom inställningar i webbläsaren Chrome:
Ett bra sätt att stödja detta är att alltid definiera teckenstorlekar i CSS med relativa värden (rem eller em) istället för fasta pixelvärden (px):
Med relativa värden används sidans grundstorlek som referenspunkt, så när användaren ändrar grundstorleken i webbläsarens inställningar kommer alla andra storlekar på sidan att skala om.
Ett bra exempel på textskalning finns på SJ.se. Det här "avgångskortet" från tidtabellen fungerar fint både med 100% respektive 200% förstoring:
Ett nytt sätt att tänka
Den stora utmaningen med skalbar text är att du som designer eller utvecklare faktiskt tappar lite kontroll över layouten.
Du kan ju inte längre räkna med att en viss text kommer att ta upp ett visst antal pixlar i bredd, utan måste alltid ta hänsyn till att vissa användares text kommer att vara större. Det går inte heller att sätta fasta bredder eller höjder med pixlar eftersom du då riskerar att kapa texten.
Men det finns många bra tekniker för att lösa dessa utmaningar! Du kan bland annat:
- flöda om innehållet på en ny rad när utrymmet tar slut med
flex-wrap - använda
paddingochmin-widthellermin-heightistället för att sätta fasta höjder och bredder, så att behållaren kan växa - eller helt enkelt välja en bättre och inte lika tajt layout
Detta blir förstås en liten omställning om man aldrig arbetat så tidigare. Men när du väl har lärt dig att sluta tänka i pixlar så kommer du aldrig gå tillbaka!
Slutord
Personalisering är ett fantastiskt verktyg för att skapa webbplatser som är både användbara, tillgängliga och flexibla.
Det finns dock fortfarande begränsningar. Med personalisering når du bara de användare som känner till att inställningen finns, och har valt att slå på den. Och du måste förstås fortfarande leva upp till alla eventuella lagkrav, som EN 301 549 eller WCAG 2.1.
Personalisering kan med andra ord aldrig ersätta ett gediget tillgänglighetsarbete och ett bra "design för alla"-tänk. Däremot kan det vara ett utmärkt komplement och en viktig del i detta arbete!
