Gjør ditt nettsted mer tilgjengelig med personlig tilpasning

Tommy Feldt, Illustrasjon.

Forfatter: Tommy Feldt

Ekspert på universell utforming av ikt

Lesetid 8 minutter

Artikkel

Denne 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:

Skjermbilde som viser denne nettsiden 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.

 Facebooks innstilling for mørk modus med alternativene På, av eller automatisk.

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.

Systeminnstilling for Reduser bevegelse på en iPhone.

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.

Skjermbilde av Windows 11 kontrasttemainnstillinger med Aquatic-tema aktivert.

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":

Skjermbilde av "Om Useit"-siden på Useit.se med et mørkt kontrasttema aktivert.
Skjermbilde av "Om Useit"-siden på Useit.se med et lys beige kontrasttema aktivert.

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:

Text size settings in the Chrome browser.

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:

Skjermbilde av et SJ-avreisekort med standard skriftstørrelse.
Skjermbilde av et SJ.se-avreisekort med 200 % skriftskalering.

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 :

  1. flyt innholdet over på en annen rad når du går tom for plass, ved hjelp av flex-wrap
  2. Bruk padding og min-width eller min-height for å la beholderne vokse med teksten
  3. 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!

Flere artikler

Kontakt

Er du interessert i våre tjenester eller har du spørsmål? Ta kontakt med Daniel så forteller han deg mer!

Postkasse som mottar hvite flygende brev i torrent.