Gjør ditt nettsted mer tilgjengelig med personlig tilpasning
Forfatter: Tommy Feldt
Ekspert på universell utforming av ikt
tommy.feldt@useit.se
+46793138696
Lesetid 8 minutter
ArtikkelDenne artikkelen er basert på et lynforedrag jeg holdt på et T12T-treff høsten 2021. Hvis du foretrekker å se og høre på, kan du se presentasjonen på Youtube med svensk eller engelsk undertekst:
Hva er personalisering?
Personalisering innebærer at brukeren selv kan tilpasse utseendet og atferden til grensesnittet, basert på egne behov og preferanser.
For mange mennesker kan personalisering gi en bedre, og mer underholdende, opplevelse. Men, for noen brukere med funksjonshemminger kan personalisering være avgjørende for om de kan bruke nettsiden eller ikke.
I denne artikkelen skal vi se på et par forskjellige måter brukere kan tilpasse et nettsted på - som å endre tekststørrelsen eller å aktivere mørk modus- og hvorfor det er så viktig for tilgjengeligheten.
1. Mørk modus
Mørk modus – eller dark mode – betyr at grensesnittet vises med en mørk bakgrunn og dempede farger, i stedet for den vanlige lyse bakgrunnen. Mange brukere synes dette er mer behagelig for øynene, spesielt om natten. Men den mørke modusen har også en viktig tilgjengelighetsfunksjon, da mange synshemmede brukere også er følsomme for lys og har problemer med å lese tekst mot en lys hvit bakgrunn.
Mørk modus har eksistert i mobilapper en stund, men blir mer og mer vanlig på nettet ettersom grensene mellom nett og app viskes ut.
I bildet under kan du se hvordan denne nettsiden (Useit.se) ser ut i mørk og lys modus:
For at det skal fungere, må designere og utviklere skape et eget design for mørk modus. Det alternative fargeskjemaet for mørk modus tas i bruk med CSS-egenskapen prefers-color-scheme:
Det er vanlig å også tilby en manuell innstilling et sted på nettsiden, slik Facebook gjør på bildet nedenfor. En brukers preferanser kan variere. For eksempel vil de kanskje ha YouTube i mørk modus, men foretrekker fortsatt at Facebook skal være lys.
2. Begrens bevegelse
Animasjoner og andre automatiske bevegelser kan skape store problemer for brukere med nedsatt funksjonsevne.
I Hampus Sethfors utmerkede artikkel "Accessibility according to actual people with disabilities" er uønskede animasjoner vurdert som et av de største hinderne for tilgjengelighet.
Med bakgrunn i dette bør du, som designer og utvikler, vie oppmerksomhet til brukerinnstillingen «Reduce motion», og tilpasse animasjonene deretter.
Detta kan man oppnå ganska enkelt ved help av CSS-egenskapen prefers-reduced-motion:
Det er rom for nyansering, hvis vi holder tunga rett i munnen. Godt utførte og ikke-forstyrrende animasjoner kan være bra for tilgjengeligheten, siden de hjelper brukeren å oppfatte hva som skjer og reduserer den kognitive belastningen.
På grunn av dette anbefaler jeg virkelig at du går gjennom alle animasjonene og identifiserer de som kan være problematiske. Og at du fjerner verstingene helt - uavhengig av om brukeren har aktivert innstillingen for redusert bevegelse eller ikke!
3. Modus for høy kontrast
Høykontrastmodus, også kjent som Windows High Contrast-modus, eller Forced Colours-modus, er en tilgjengelighetsinnstilling i Windows som lar brukeren endre fargetemaet for hele operativsystemet, inkludert alle apper, programmer og nettsteder.
For nettsteder gjør høykontrastmodus det mulig for svaksynte brukere å tilpasse visningen, og å overskrive det opprinnelige designet på nettstedet.
I tillegg til å endre fargene, forsvinner også bakgrunner, skygger, effekter og andre potensielt forstyrrende elementer. På bildet nedenfor kan du se hvordan denne nettsiden (Useit.se) ser ut med to forskjellige temaer med høy kontrast: "Nattehimmel" og "Ørken":
Brukeren kan også lage et tilpasset tema og velge egne farger for ulike typer innhold, som bakgrunn, brødtekst, lenker, knapper, fokusmarkører og skyggelagte elementer.
Det fine med høykontrastmodusen er at du vanligvis ikke trenger å gjøre noe spesielt for at det skal fungere – det er nok at nettsiden er riktig bygget med semantisk HTML.
Det kan likevel være grunn til å finjustere enkelte detaljer. For eksempel; hvis et ikon vises med feil farge, hvis du ønsker å produsere en tydeligere fokusramme, eller hvis du vil beholde enkelte originalfarger. Til dette kan man bruke CSS-egenskapen forced-colors: active:
Test selv!
Med Windows 11
• Åpne innstillinger
• Gå til Tilgjengelighet -> Kontrasttemaer
• Aktiver et av de forhåndsvalgte temaene, eller lag dine egne
Med Mac og Chrome
Denne typen høykontrastmodus er for øyeblikket en funksjon som bare er tilgjengelig for Windows. Det er likevel en måte å etterligne den i Chrome-nettleseren på MacOS:
- Åpne utviklerverktøy for Chrome
- Åpne "Flere verktøy"-menyen (tre prikker øverst til høyre)
- Velg "Renderer"
- Aktiver «Emuler CSS media query forced-colors»
- (Valgfritt) Kombiner med «Emulate CSS media query prefers-color-scheme» for å bytte mellom lyse og mørke kontrasttemaer.
4. Skalerbar tekst
God størrelse på tekst er viktig for å oppnå god tilgjengelighet og brukervennlighet. Hvis teksten er for liten, kan mange brukere synes det er vanskelig å lese, og å forstå innholdet. Derfor er det viktig at brukere kan endre og skalere teksten på nettstedet ditt, til sine egne preferanser, for eksempel gjennom innstillinger i Chrome-nettleseren:
En god måte å støtte dette på er å alltid definere fontstørrelser i CSS med relative verdier (rem eller em) istedenfor faste pixelverdier (px):
Relative skriftstørrelser bruker sidegrunnstørrelsen som referansepunkt. Når brukeren endrer preferansene for grunnstørrelse, vil alle andre tekster skaleres tilsvarende.
Et godt eksempel på skalering av tekst finnes på SJ.se. Dette "avreisekortet" fra rutetabellen virker fint, både ved 100% og 200% forstørrelse:
Et nytt perspektiv
Den største utfordringen med skalerbar tekst, som designer eller utvikler, er å akseptere at du faktisk mister noe av kontrollen over layouten.
Du kan ikke lenger regne med at en bestemt tekst opptar en viss bredde i piksler, siden enkelte brukeres tekst vil være større. Og du kan heller ikke sette faste pikselhøyder og -bredder på beholdere, uten å risikere å kutte av overflytende tekst.
Men det finnes mange gode teknikker du kan bruke for å overvinne disse utfordringene! Du kan for eksempel :
- flyt innholdet over på en annen rad når du går tom for plass, ved hjelp av
flex-wrap - Bruk
paddingogmin-widthellermin-heightfor å la beholderne vokse med teksten - eller bare velg et bedre og mindre begrenset layout
Å omstille seg fra piksler til relative verdier kan være en krevende øvelse, hvis du aldri har jobbet slik før. Men når du først er avvent fra å tenke i piksler, vil du aldri gå tilbake!
Avsluttende ord
Tilpasning er et fantastisk verktøy for å lage nettsider som er brukbare, tilgjengelige og fleksible.
Det er likevel noen forbehold. Denne spesielle typen personalisering vil kun nå den minoriteten av brukere som er klar over at innstillingene eksisterer, og som har valgt å aktivere dem. Og personalisering fritar deg heller ikke fra å leve opp til noen juridiske tilgjengelighetskrav som gjelder for deg, slik som EN 301 549, Section 508 eller WCAG.
Personliggjøring erstatter med andre ord ikke tradisjonelle tilgjengelighetsarbeid og "design for alle" – men det kan være et flott supplement og en viktig del av dette arbeidet!
