3.6 Tilgjengelighet og universell utforming

Nettet er for alle -- eller burde være det

Tenk et øyeblikk på alle de ulike menneskene som bruker nettet. Noen er blinde og «ser» siden gjennom en skjermleser som leser opp innholdet høyt. Noen har nedsatt motorikk og kan ikke bruke mus, men navigerer kun med tastaturet. Noen er fargeblinde og kan ikke skille rødt fra grønt. Faktisk har omtrent 15 til 20 prosent av befolkningen en form for funksjonsnedsettelse. Hva skjer hvis nettsiden din bare fungerer for dem med perfekt syn, motorikk og en mus?

Da stenger du ute en femtedel av brukerne dine. Universell utforming handler om det motsatte -- å lage digitale produkter som fungerer for alle, uavhengig av funksjonsevne, alder eller utstyr. Og dette er ikke bare god folkeskikk: i Norge er universell utforming av IKT-løsninger faktisk lovpålagt gjennom likestillings- og diskrimineringsloven. Nettsider må oppfylle den internasjonale standarden WCAG på nivå Å.

I denne fortellingen skal vi lære å bygge for alle. Vi skal forstå de fire grunnprinsippene i WCAG, se hvorfor semantisk HTML og god alt-tekst er fundamentet, lære ARIA og tastaturnavigasjon, og forstå hvorfor fargekontrast kan være forskjellen på lesbart og uleselig.

Fire ord å bygge på

Den internasjonale standarden for tilgjengelighet heter WCAG -- Web Content Accessibility Guidelines. Den kan virke overveldende med sine mange punkter, men i bunnen hviler den på fire enkle prinsipper, som huskes med ordet POUR.

Det første er Perceivable -- mulig å oppfatte. Alt innhold må kunne oppfattes av en eller annen sans. Et bilde uten alternativ tekst er usynlig for en blind bruker; en video uten teksting er utilgjengelig for en døv. Det andre er Operable -- mulig å betjene. Alle funksjoner må kunne brukes med tastatur alene. Ingenting bør kreve mus, for da stenger du ute alle som ikke kan bruke en. Det tredje er Understandable -- mulig å forstå. Innholdet og navigasjonen må være forståelig, med klart språk og et konsekvent design som ikke forvirrer. Og det fjerde er Robust -- robust. Innholdet må fungere på tvers av ulike nettlesere og hjelpemidler, både i dag og i framtida.

Disse fire ordene -- oppfatte, betjene, forstå, robust -- er ikke tørre regler. De er en sjekkliste for medmenneskelighet i koden din. Hver gang du bygger noe, kan du spørre: kan alle oppfatte dette? Kan alle betjene det? Forstår alle det? Vil det fortsette å virke? Klarer du det, har du laget noe som virkelig er for alle.

Fundamentet: riktig HTML og gode beskrivelser

Det aller viktigste du kan gjøre for tilgjengelighet, er overraskende enkelt: bruk riktige HTML-elementer. Skjermlesere er bygget for å forstå semantisk HTML, og når du bruker elementene slik de er ment, får hjelpemidlene den informasjonen de trenger gratis.

Ta et klikkbart element. Mange lager en <div> med en klikk-funksjon, og det ser riktig ut på skjermen. Men for en skjermleser er en <div> bare tekst -- den vet ikke at det er en knapp, den kan ikke aktiveres med tastaturet, og den får ingen fokusmarkering. Bruker du derimot et ekte <button>, får du alt dette automatisk: skjermleseren annonserer «knapp», Enter og mellomrom aktiverer den, og den blir fokusbar med Tab. Det samme gjelder overskrifter -- bruk <h1> til <h6> i riktig rekkefølge, ikke en <div> som ser ut som en overskrift.

Den andre grunnsteinen er alt-tekst på bilder. Attributtet alt gir en tekstbeskrivelse som skjermleseren leser opp. Men her gjelder det å være meningsfull. alt="bilde" hjelper ingen. Derimot forteller alt="Søylediagram som viser norsk BNP-vekst fra 2015 til 2024" faktisk hva bildet inneholder. Og et lite poeng mange glemmer: er bildet rent dekorativt -- en pynteramme uten informasjon -- skal du gi det tom alt-tekst, alt="", så skjermleseren bare hopper over det i stedet for å lese opp en filnavn. Til slutt: bruk alltid <label> på skjemafelt, så brukeren vet hva hvert felt er til for. Semantikk og gode beskrivelser er hele fundamentet.

ARIA og veien gjennom tastaturet

Noen ganger er ikke vanlig HTML nok til å forklare hjelpemidlene hva som foregår -- særlig i interaktive ting som menyer og dialoger. Da har vi ARIA -- Accessible Rich Internet Applications -- et sett med spesielle HTML-attributter som gir ekstra informasjon til skjermlesere.

Noen eksempler: aria-label gir en usynlig etikett, nyttig for en knapp som bare viser en «X» men egentlig betyr «lukk dialogboks». aria-expanded forteller om en meny er åpen eller lukket. aria-live varsler skjermleseren om at noe har endret seg dynamisk, for eksempel «skjemaet ble sendt». Og role kan beskrive et elements funksjon, som role="alert" for en viktig feilmelding. Men det finnes én jernregel her: bruk alltid semantisk HTML først. ARIA er et supplement, ikke en erstatning. Et ekte <button> er nesten alltid bedre enn en <div> med en haug ARIA-attributter klistret på.

Den andre store delen er tastaturnavigasjon. Mange brukere navigerer hele nettet uten å røre en mus. Tab-tasten flytter fokus framover, Shift+Tab bakover, Enter og mellomrom aktiverer knapper og lenker, og Escape lukker dialoger og menyer. Alt det interaktive på siden din må kunne nås på denne måten. Og et siste, kritisk punkt: når noe får fokus via tastaturet, må det vises en synlig fokusindikator -- gjerne en tydelig ramme med CSS :focus. En vanlig synd blant utviklere er å fjerne denne med outline: none fordi de synes den er stygg. Det skal du aldri gjøre, for da blir tastaturbrukeren bokstavelig talt blind for hvor på siden de befinner seg.

Kontrasten som avgjør lesbarheten

Til slutt skal vi snakke om noe som høres trivielt ut, men som stenger ute mange brukere hver eneste dag: fargekontrast. Det handler om forskjellen i lysstyrke mellom teksten og bakgrunnen den står på. For lite kontrast, og teksten blir umulig å lese -- særlig for eldre, svaksynte og folk som leser i sterkt sollys.

WCAG setter konkrete krav, målt som et kontrastforhold. For vanlig tekst krever nivå Å et forhold på minst 4,5 til 1. For stor tekst, fra 18 piksler og oppover, holder det med 3 til 1. Vil du nå det strengeste nivået, AAA, må du opp i 7 til 1 for vanlig tekst. La oss se det i praksis: lysegrå tekst på hvit bakgrunn, som #aaa på #fff, gir bare rundt 2,3 til 1 -- det feiler. Men mørk tekst på lys bakgrunn, som #333 på #fff, gir hele 12,6 til 1 og består med god margin. Du trenger ikke regne dette i hodet; verktøy som WebAIM Contrast Checker gjør jobben for deg.

Det er ett poeng til som er like viktig: stol aldri på farge alene for å formidle informasjon. Tenk på en fargeblind bruker. Hvis du bare farger et ord rødt for å si at det er feil, ser ikke han eller hun forskjellen. Løsningen er å legge til mer enn farge -- et ikon, et mønster, eller best av alt: tekst. I stedet for bare et rødt «Feil», skriv «Feil: E-postadressen er ugyldig». Da forstår alle budskapet, uansett om de oppfatter fargen eller ikke. God kontrast og flere signaler enn farge -- det er det siste laget som gjør siden din lesbar for alle.

Oppsummering

Vi har lært å bygge nettsider for alle gjennom universell utforming -- lovpålagt i Norge med krav om WCAG nivå Å. WCAG hviler på fire prinsipper, POUR: innholdet skal være mulig å oppfatte, betjene, forstå og være robust.

Fundamentet er semantisk HTML -- ekte <button> og riktige overskrifter -- sammen med meningsfull alt-tekst på bilder (og tom alt-tekst på dekorative). Der HTML ikke strekker til, supplerer vi med ARIA-attributter, men alltid med semantisk HTML først. All funksjonalitet må kunne nås med tastatur, og fokusindikatoren må aldri fjernes. Til slutt sørget vi for nok fargekontrast -- minst 4,5:1 for vanlig tekst -- og for å formidle informasjon med mer enn bare farge. Slik blir nettet det det burde være: for alle.