Vi slurver mest med HTML og kontrast

To feil går igjen hos Tilsynet for Universell Utforming. - Det handler om godt håndverk.

Malin Rygg er tilsynsdirektør i Tilsynet for Universell Utforming. 📸: Jørgen Jacobsen / Digitaliseringsdirektoratet / digdir.no
Malin Rygg er tilsynsdirektør i Tilsynet for Universell Utforming. 📸: Jørgen Jacobsen / Digitaliseringsdirektoratet / digdir.no Vis mer

For noen uker tilbake kunne du lese om hva som skjer hvis du ikke følger tilgjengelighetsloven på kode24.

Svaret var ganske enkelt; ikke så veldig mye.

Men, det finnes altså et offentlig tilsyn som sjekker norske nettsider. Bare ikke så veldig mange. Den grundigste sjekken kaller de tilsyn, og den har de gjort 49 av, som ligger offentlig tilgjengelig. Den nyeste rapporten omtaler kleskjeden Cubus, og ble lagt ut 1. mars, i år.

Men hvilke feil er det egentlig tilsynet finner?

Vi har tatt en titt på de vanligste, og snakket med tilsynet om hvorfor det er to krav som er gjengangere i store deler av tilsynene.

Enkle HTML-feil

Blant tilsynsrapportene teller vi 68 avvik og merknader på krav 4.1.1 og 4.1.2. Begge kravene går på utforming av HTML.

  • 4.1.1 dekker enkle problemer som at tagger har en start og en slutt-tagg, at elementer er nøstet riktig, og at det ikke er flere elementer med samme ID i HTML-dokumentet.
  • 4.1.2 handler på sin side om at elementer har riktig rolle. For eksempel vil tilsynet reagere på at en span-tag brukes som en knapp uten role="button", eller at et input-felt i et skjema brukes uten label-tag.

Tilsynsdirektør Malin Rygg forteller at mangelfull koding av nettsider er en veldig vanlig feil, og at krav 4.1.1 og 4.1.2 er spesielt viktig.

- God koding handler om godt IKT-faglig håndverk! forteller hun til kode24.

- Begge kravene du viser til, ivaretar hensynet til brukere som er avhengige av hjelpemiddelteknologi til å presentere innholdet, som for eksempel skjermleser, skjermforstørrer og programvare for talegjenkjenning. Dette er særlig aktuelt for blinde, svaksynte eller personer med nedsatt kognisjon, som for eksempel lese- og skrivevansker.

«Dette er særlig aktuelt for blinde, svaksynte eller personer med nedsatt kognisjon.»

Rygg forteller at hvilke type feil de avdekker avhenger av hvilken type innhold de tester i tilsynene.

- Vi ser ulike typer brudd. I kontrollene vi gjorde i 2019 var det syntaksfeil, at skjemaelement ikke er koblet til en ledetekst i koden og at knapper ikke er kodet som knapper, forteller hun.

Kjør kodevalidator

Rygg har også noen tips til hvordan man kan unngå feilene ved krav 4.1.1 og 4.1.2.

Når det gjelder 4.1.1 anbefaler Rygg å kjøre enkeltsider på nettstedet ditt gjennom W3C sin kodevalidator: Markup Validation Service. Rygg forteller at man skal se etter og rette feilene som blir nevnt, inkludert "Fatal Error".

Rygg forteller at feilbeskrivelsen i kodevalidatoren kan se slik ut:

  • "Element [navn på element] not allowed…"
  • "Unclosed element [navn på element]".
  • "End tag for [navn på element] omitted".
  • "End tag for [navn på element] which is not finished".
  • "Duplicate attribute [navn på attributt]".
  • "Duplicate specification of attribute [navn på attributt]".
  • "Duplicate ID [navn på ID]".
  • "ID [navn på element] already defined".

Les dokumentasjonen

Feil rundt 4.1.2 anbefaler Rygg at du luker ut ved hjelp av dokumentasjon på deres egne nettsider, og gir en god forklaring på hvorfor akkurat 4.1.2 er så viktig.

- Rett identifikasjon av brukergrensesnittkomponenter, som for eksempel skjemaelement og knapper, er nødvendig for at de skal være tilgjengelige for personer som bruker hjelpemiddelteknologi, forteller Rygg til kode24.

- Uten dette er det vanskelig for brukeren å vite hvilken informasjon som skal fylles ut i hvilke felter, eller hva som skjer når de trykker på en knapp.

- Feil kan gjøre at brukeren ikke får gjennomført kjøp av en vare i en nettbutikk, eller opprettet abonnement på en avis. For eksempel fordi brukeren ikke får rett informasjon om hvilke opplysninger som skal fylles inn, eller de ikke finner knappen for innsending av skjemaet.

Feil kontrast

I 34 av nettsidene tilsynet har hatt kontroll med, er det rapportert avvik eller merknad på krav 1.4.3, om kontrast.

Av dokumentene til tilsynet kommer det frem at kravet er: "Den visuelle presentasjonen av tekst og bilder av tekst har et kontrastforhold på minst 4.5:1".

«Virksomhetene må ha et bevisst forhold til fargevalg og kombinasjoner.»

Tilsynsdirektør Malin Rygg bekrefter at det avdekkes mange brudd på dette kravet, både i tilsyn og andre statusmålinger.

- Grunnen til at det avdekkes mange feil, er trolig at virksomhetene er ikke er oppmerksomme nok på kravet, når de bestemmer fargepalett, forteller Rygg.

- Virksomhetene må ha et bevisst forhold til fargevalg- og -kombinasjoner når de utarbeider styleguide eller andre rutiner som legger gjennomgående føringer for fargepaletten som brukes på nettstedet.

Pass på paletten

Hva man bør gjøre for å unngå feil bruk av kontrast er Rygg klokkeklar på.

- Test kontrasten! Sjekk kontrastforholdet mellom de ulike fargekombinasjoner du tenker å ta i bruk på nettstedet, og velg en palett som oppfyller kravene, forteller hun.

Rygg forteller også at man bør unngå å velge paletter som bare så vidt oppfyller kravet. Da kan det bli, som hun selv ordlegger det, "stang ut", i tilfeller hvor man bruker graderinger av bakgrunnsfarge.

- Vi bruker for eksempel gratisverktøyene Color Contrast Analyser og Siteimprove Accessibility Checker, forteller Rygg.

- Begge verktøyene er enkle i bruk og gir god informasjon om kontrasten.