De 10 vanligste UU-feilene på norske nettsider

Vi har skannet tusenvis av norske nettsider, og de samme feilene dukker opp igjen og igjen. Det positive er at de fleste av dem er enkle å fikse når du vet hva du ser etter. Her er de ti vanligste tilgjengelighetsfeilene vi finner - og konkrete tips for hvert punkt.

1. Bilder uten alternativ tekst

Dette er den klart vanligste feilen. Bilder som mangler alt-attributt, eller som har en generisk tekst som «bilde» eller «image», gjør at synshemmede brukere med skjermleser ikke får vite hva bildet viser. Søkemotorer får heller ikke noe å jobbe med.

Fiks: Legg til et alt-attributt som kort beskriver bildets innhold. Dekorative bilder får et tomt alt="". Les mer i vår artikkel om bilder og alt-tekst.

2. For lav fargekontrast

Lysegrå tekst på hvit bakgrunn, pastell mot pastell, hvit tekst på lyse bilder - kontrastproblemer finnes overalt. WCAG krever et kontrastforhold på minst 4.5:1 for normal tekst og 3:1 for stor tekst.

Fiks: Bruk et kontrastverktøy som WebAIM Contrast Checker for å måle forholdet, og juster CSS-fargene deretter. Ofte holder det med å gjøre teksten et par nyanser mørkere. Les mer i vår artikkel om fargekontrast.

3. Skjemafelt uten ledetekst (label)

Når et inputfelt ikke har en tilknyttet <label>, vet ikke skjermlesere hva feltet er for. Brukeren hører kanskje bare «redigeringsfelt» uten kontekst. Placeholder-tekst er ikke et godt nok alternativ, fordi den forsvinner så snart brukeren begynner å skrive.

Fiks: Knytt en <label> til hvert skjemafelt med for-attributtet, eller bruk aria-label der det ikke er plass til en synlig ledetekst. Les mer i vår artikkel om skjemaer som mangler label.

4. Manglende språkangivelse i HTML

Mange norske nettsider mangler lang-attributtet på <html>-elementet, eller har feil verdi (for eksempel en i stedet for nb eller no). Dette påvirker hvordan skjermlesere uttaler teksten - en norsk tekst som leses opp med engelsk uttale er vanskelig å forstå.

Fiks: Legg til lang="nb" (bokmål) eller lang="nn" (nynorsk) på <html>-elementet. Les mer i vår artikkel om språk i kode.

5. Tomme lenker og lenker uten meningsfull tekst

Lenker som bare sier «klikk her», «les mer» eller «her» gir ingen kontekst for brukere som navigerer med skjermleser. De hopper ofte fra lenke til lenke, og da er «les mer» fullstendig meningsløst uten sammenhengen rundt. Enda verre er lenker som er helt tomme - et <a>-element uten synlig tekst eller aria-label.

Fiks: Gi hver lenke en beskrivende tekst som gir mening alene. I stedet for «Les mer» kan du skrive «Les mer om universell utforming». Ikonlenker uten tekst trenger et aria-label. Les mer i vår artikkel om lenker som gir mening.

6. Dårlig overskriftsstruktur

Overskrifter som hopper fra <h1> til <h4>, sider uten <h1> i det hele tatt, eller overskriftselementer som bare brukes for å få teksten stor - alt dette ødelegger den logiske strukturen som skjermlesere og navigasjonsverktøy er avhengige av.

Fiks: Bruk overskrifter i riktig hierarkisk rekkefølge. Hver side skal ha én <h1>, deretter <h2> for hovedseksjoner, <h3> for underseksjoner, og så videre. Bruk CSS for visuell styling, ikke overskriftselementer. Les mer i vår artikkel om overskrifter og struktur.

7. Manglende mekanisme for å hoppe over navigasjon

De fleste nettsider har en navigasjonsmeny som gjentas på hver side. Tastaturbrukere og skjermleserbrukere må tab-e gjennom hele menyen for å komme til hovedinnholdet - med mindre du har en «hopp til innhold»-lenke øverst på siden.

Fiks: Legg til en skip-lenke som det første elementet på siden. Lenken skal være synlig ved tastaturfokus og peke til hovedinnholdet. Les mer i vår artikkel om snarveier til innhold.

8. Knapper uten tilgjengelig navn

Ikoniknapper - for eksempel hamburgermeny, søkeforstørrelsesglass eller lukkekryss - som bare inneholder et SVG-ikon uten tekstalternativ, er usynlige for skjermlesere. Brukeren hører bare «knapp» uten å vite hva knappen gjør.

Fiks: Legg til aria-label på knappen, eller inkluder en visuelt skjult tekst inne i knappelementet. Les mer i vår artikkel om knapper som må ha navn.

9. Manglende eller dårlig sidetittel

Sidetittelen (<title>) vises i nettleserfanen og er det første en skjermleser leser opp. Mange nettsider har samme tittel på alle sider, bruker bare domenenavnet som tittel, eller mangler tittelen helt. Det gjør det umulig å skille mellom faner og vanskelig å forstå konteksten.

Fiks: Gi hver side en unik og beskrivende tittel som inkluderer sidens innhold og nettstedets navn. For eksempel: «Kontakt oss – Bedriftsnavn». Les mer i vår artikkel om sidetittel.

10. Dupliserte ID-attributter

Hvert id-attributt i HTML skal være unikt innenfor en side. Når flere elementer har samme id, kan det skape problemer for hjelpeteknologi - for eksempel kan en <label> som peker til en id som finnes flere ganger, bli koblet til feil skjemafelt. Det kan også ødelegge ARIA-referanser og ankerpunkter.

Fiks: Sørg for at alle id-verdier er unike. Bruk utviklerverktøy i nettleseren for å søke etter dupliserte IDer, eller la UU-Kontroll finne dem for deg. Les mer i vår artikkel om unike id-attributter.

Mønsteret er tydelig

Det som er slående med denne listen, er at ingen av feilene er spesielt vanskelige å fikse. De fleste krever noen minutters arbeid per tilfelle. Problemet er at de samler seg opp - en typisk nettside med 50 sider kan fort ha hundrevis av tilgjengelighetsfeil fordelt på disse ti kategoriene.

Nøkkelen er å jobbe systematisk. Start med å skanne nettstedet for å få oversikt. Ta én feiltype om gangen. Og sørg for at nye sider og innhold sjekkes før publisering, slik at du ikke stadig introduserer de samme problemene på nytt.

De ti feilene over utgjør brorparten av alle tilgjengelighetsproblemer vi finner. Fikser du disse, har du kommet veldig langt.