Universell utforming: Seks enkle sjekker som gjør nettsiden din bedre for alle

Mange tenker på universell utforming som noe som bare gjelder offentlige nettsider, eller som et teknisk krav for utviklere. I praksis handler det om noe ganske enkelt: at alle som besøker nettsiden din, skal kunne lese innholdet, finne fram og ta kontakt med deg. Det gjelder kunden som ser dårlig, han som bruker tastatur i stedet for mus, og hun som sitter med mobilen i sterkt sollys.

I Norge er universell utforming av nettsider også et lovkrav for private virksomheter, og Uutilsynet fører tilsyn med det. Kravene bygger på den internasjonale standarden WCAG. Men selv uten lovkravet er det gode grunner til å ta det på alvor: En nettside som er lett å bruke for alle, er som regel også lettere å bruke for de fleste.

Her er seks sjekker du kan gjøre selv, uten å være utvikler.

1. Naviger med bare tastaturet

Legg bort musa og bruk Tab-tasten for å gå gjennom siden. Shift+Tab tar deg bakover, og Enter aktiverer lenker og knapper.

Se etter dette:

• Ser du hele tiden hvor du er på siden? Det skal være en tydelig markering, for eksempel en ramme, rundt lenken eller knappen du står på.
• Kommer du til alle menyvalg, knapper og skjemafelt?
• Blir du sittende fast noe sted, for eksempel i en popup eller en meny?

Mange er avhengige av tastatur eller hjelpemidler som fungerer på samme måte. Kommer du deg ikke gjennom kontaktskjemaet uten mus, gjør ikke de det heller.

2. Sjekk kontrasten mellom tekst og bakgrunn

Lys grå tekst på hvit bakgrunn kan se elegant ut, men er tung å lese for mange, særlig på mobil utendørs. Det samme gjelder tekst lagt rett oppå bilder.

Det finnes gratis kontrastsjekkere på nettet der du legger inn to farger og får vite om kombinasjonen er god nok. WCAG anbefaler et kontrastforhold på minst 4,5:1 for vanlig brødtekst. Sjekk særlig brødtekst, knapper og lenker. Ofte er det nok å gjøre teksten litt mørkere, eller å legge en mørk flate bak tekst som står på bilder.

3. Gi bildene alternativ tekst

Skjermlesere leser opp innholdet på siden for brukere som ikke ser den. Når de kommer til et bilde, leser de den alternative teksten, ofte kalt alt-tekst. Mangler den, får brukeren bare vite at det er et bilde, eller får høre filnavnet, som «IMG_4032.jpg».

Noen gode tommelfingerregler:

• Beskriv det bildet formidler, ikke alt som er på det. «Montør installerer varmepumpe i en enebolig» sier mer enn «bilde av mann».
• Bilder som bare er pynt, kan ha tom alt-tekst. Da hopper skjermleseren over dem.
• Inneholder bildet tekst, for eksempel et tilbud eller åpningstider, må den teksten også stå i alt-teksten eller på selve siden.

I de fleste publiseringsverktøy finner du feltet for alt-tekst når du laster opp eller redigerer et bilde.

4. Bruk overskrifter som struktur, ikke som pynt

Overskrifter gjør det lettere for alle å skumlese en side. For dem som bruker skjermleser, er de enda viktigere: Mange hopper fra overskrift til overskrift for å finne det de leter etter.

Det betyr at overskriftene må være ekte overskrifter i publiseringsverktøyet, ikke bare tekst som er gjort stor og fet. Hold også rekkefølgen ryddig: én hovedoverskrift øverst og mellomoverskrifter under den. Velg overskriftsnivå etter struktur, ikke etter hvilken størrelse du synes ser best ut.

5. Skriv lenker og knapper som forklarer seg selv

«Klikk her» og «Les mer» sier lite når de står alene. Skjermleserbrukere får ofte opp en liste over alle lenkene på siden, og da blir ti «Les mer» etter hverandre helt meningsløst.

Skriv heller hva som skjer når man klikker: «Se prisene for vinterservice», «Last ned produktarket» eller «Bestill time». Det hjelper alle brukere, og det gir søkemotorene en tydeligere beskjed om hva siden handler om.

6. Test skjemaene dine

Kontaktskjemaet er ofte det viktigste på hele nettsiden, og samtidig et sted der mye går galt. Sjekk dette:

• Har hvert felt en synlig ledetekst som står der hele tiden? Tekst som bare står inne i feltet og forsvinner når du begynner å skrive, er vanskelig for mange.
• Får du en forståelig feilmelding hvis du glemmer et felt eller skriver e-postadressen feil, og står det hvilket felt det gjelder?
• Blir feil markert med noe mer enn farge? Rød ramme alene er ikke nok for den som ikke skiller rødt fra grønt.

Fyll ut skjemaet selv, både riktig og med vilje feil, og se hvordan det oppleves.

Hva gjør du med det du finner?

Noe kan du fikse selv på en ettermiddag, som alt-tekster, lenketekster og overskrifter. Annet, som kontrast i fargepaletten, tastaturnavigasjon og skjemaer, ligger ofte i designet eller koden og krever litt mer.

Et godt råd er å gjøre det til en del av rutinene: Skriv alt-tekst hver gang du laster opp et bilde, og tenk på kontrast og lenketekster når du lager nytt innhold. Planlegger du ny nettside, bør universell utforming være med fra starten. Det er langt enklere enn å rette det opp etterpå.

Disse seks sjekkene dekker ikke alle kravene, men de fanger opp mange av de vanligste problemene. Vil du ha en fullstendig gjennomgang, kan det lønne seg å få hjelp av noen som kjenner regelverket.

Vil du ha et ekstra blikk på nettsiden din? Ta gjerne kontakt for en uforpliktende prat med oss i Webnor.

Bilde: Glenn Carstens-Peters / Unsplash – https://unsplash.com/photos/person-using-macbook-pro-npxXWgQ33ZQ