Nyttige verktøy i arbeidet med universell utforming (WCAG)

I denne artikkelen skal vi gjennomgå noen nyttige verktøy, krav og anbefalinger som er hensiktsmessig å ha i bakhodet i arbeidet med universell utforming av innhold på nett.

I artikkelen ser vi nærmere på følgende områder:

• Kontrastforhold
• Linjehøyde, avsnitt og avstand
• Bruk av etiketter på skjemaer og inndata
• Alternativ tekst på bilder og elementer som ikke er tekst
• Lenkers mål og funksjon
• Kjør en tilgjengelighetsanalyse med Axe
• Prøv et tekstopplesningverktøy – for en dypere forståelse
• Unngå feil og mangler i kode med validering

Kontrastforhold

Når det kommer til design er det lett å tegne opp nye som en synes ser pent og rent ut. Men, det vi ofte glemmer er at det finnes en del som har utfordringer med lave kontraster. Svaksynte og personer som har utfordringer med lese og skrivevansker kan finne det vanskelig å kunne lese og oppfatte innhold riktig, hvis kontrastforholdet er for lavt. Dette gjelder typisk elementer slik som titler, avsnitt og knapper. Derfor er det viktig å passe på at bakgrunn- og forgrunnsfarge har riktig kontrastforhold i forhold til hverandre.

I WCAG 2.0, stilles det et krav om at kontrastforholdet mellom bakgrunnen og forgrunnen skal være på 4,5:1.

Eksempel på kontrastforhold i arbeidet med titler og avsnitt.

Sjekk kontrastforhold med Google Chromes utviklerverktøy

Bruk Google Chromes innebygde utviklerverktøy for å se kontrastforholdet mellom bakgrunn- og forgrunnsfarge.

Åpne i Windows med CTRL + Shift + C eller på Mac med CMD + Option + C og velg elementet du vil inspisere nærmere.

Sjekk kontrast med Stark for Adobe XD

Stark er en utvidelse til Adobe XD som lar deg sjekke kontraster og gjennomføre fargeblindhetsanalyser.

Last ned Stark til Adobe XD

Linjehøyde, avsnitt og avstand

For personer som sliter med nedsatt syn og dysleksi kan teksten på nettsiden skape utfordringer. Derfor er det viktig at vi passer på at vi har et gode lesbare titler og avsnitt. I følge kommende WCAG 2.1 er det anbefalt å ha minst:

• Linjeavstand til minst 1,5 ganger størrelsen på skriften
• Avstand etter avsnitt til minst 2 ganger størrelsen på skriften
• Avstand i blokker av tekst skal være minst 0,12 ganger skriftstørrelsen
• Avstanden mellom ord skal være minst 0,16 ganger skriftstørrelsen

Bruk av etiketter på skjemaer og inndata

Personer med nedsatt syn og personer med lese- og skrivevansker kan benytte seg av tekstopplesningsverktøy for å høre og navigere seg rundt i innholdet. Spesielt når det kommer til skjemaer. Derfor er det viktig at skjemaer benytter seg av etiketter på inndatafelt slik at tekstopplesningverktøyet oppfatter feltene riktig.

I arbeidet med skjemaer kan vi bruke etiketter (label). Etiketter bidrar til at inndatafeltene (input) blir riktig oppfattet av verktøyet og at feltet er identifiserbart og gir mening.

I et skjema kan en benytte seg av HTML-taggen: <label> for at verktøyet skal oppfatte feltet riktig.

Alternativ tekst på bilder og elementer som ikke er tekst

For at opplesningverktøyet skal oppfatte bilder, figurer og illustrasjoner og andre elementer av ikke-tekstlig innhold er det påkrevd med en alternativ beskrivelse av elementet.

Bilder skal ha en alternativ bildetekst som beskriver innholdet. Dette gjelder alle elementer med unntak av bilder eller figurer som er av dekorativt formål, da skal alternativ teksten være tom.

Eksempel på bilde med alternativ tekst og dekorativt bilde uten alternativ tekst.

Lenkers mål og funksjon

Det er anbefalt at lenken er beskrivende i henhold til innholdet på lenkens destinasjonsside. For eksempel: Vi har utarbeidet en liste over markedsføringsprinsipper, som gir deg større forståelse for markedsføring.

Lenken må også kunne oppfattes som en lenke i forhold til konteksten rundt dem, slik at det ikke skaper forvirring om at der er en lenke eller for eksempel tekst. For å tydeliggjøre dette kan en benytte seg av en linje under lenken. I CSS-dokumentet kan en legge til text-decoration: underline; på anker-taggen.

Kjør en tilgjengelighetsanalyse med Axe

Axe lar deg gjennomføre tilgjengelighetsanalyser av nettsider og hjelpe deg å avdekke feil i utformingen.

Last ned Axe for Google Chrome

Prøv et tekstopplesningverktøy – for en dypere forståelse

Et tekstopplesningverktøy kan gi dypere innsikt i hvordan nettsiden faktisk oppleves for personer som preges av blindhet, redusert syn, dysleksi og andre kognitive utfordringer.

Last ned Chrome Vox for Google Chrome
Les mer om tilgjengelighet for Mac OS

Unngå feil og mangler i kode med validering

Kode som inneholder feil på nettstedet kan føre til at tilgjengelighetsverktøy og brukere med spesialverktøy ikke kan navigere rundt eller oppfatter siden riktig. Derfor er det viktig å validere koden på nettsiden og å passe på at vi retter opp i potensielle feil som valideringsverktøyet finner.

Gå til W3C Validator for HTML
Gå til W3C Validator for CSS

Kilder:
Kva seier forskrifta? – Direktoratet for forvaltning og IKT
WCAG 2.0-standaren – Direktoratet for forvalting og IKT
Løsningsforslag for web – Direktoratet for forvaltning og IKT
Webdirektivet og WCAG 2.1 – Direktoratet for forvaltning og IKT
Web Content Accesability Guidelines (WCAG) Overview – W3C