Universell utforming
God tilgjengelighet kan hjelpe mennesker med funksjonshemninger å oppfatte innholdet vårt på en meningsfull måte. Det er flere ting vi kan gjøre, men det første og viktigste er å skrive semantisk god HTML.
Forskrift om universell utforming av IKT-løsninger stiller krav om at nettsider må oppfylle 35 av 61 suksesskriterier i standarden Retningslinjer for tilgjengelig webinnhold (WCAG) 2.0. Sjekk ut minimumskravene på difi som er omfattet av forskriften.
Mål for universell utforming (UU)
- Løsningen skal fungere 100% ved tab-navigering, med logisk og meningsfull fokusrekkefølge. Tab-indeks må vurderes. Det elementet som er i fokus skal få en egen stilsetting, slik at det er tydelig hvor man står.
- For å sørge for en god brukeropplevelse for blinde, skal sidemalene testes i skjermopplesere. Det er viktig at man er bevisst på om det blir brukt knapper eller linker, da skjermlesere kan få problemer med å tolke funksjonaliteten.
- alt- og title-attributter skal brukes til å gi tilleggsinformasjon til bilder og andre objekter.
- label-element skal ha et for-attributt som matcher skjemakontrollen det tilhører, med mindre label omslutter input-feltet.
- Ulike typer lenker skal brukes riktig (disse har ulikt design basert på om de står sammen med annen tekst, eller om de lenker til interne/eksterne sider)
- Alle sidemaler skal tåle tekststørrelsesendring på opptil 200% uten å brekke eller at tekst forsvinner.
- Alle klikkbare elementer skal være minimum 48px på korteste side. Elementer trenger ikke oppfylle dette visuelt, men kan få et usynlig touch-område rundt seg.
Dynamisk innhold er alltid litt vanskelig med tanke på UU, bruk aria-tags.
Tilpasse WCAG 2.0 sjekkliste for prosjekt (offisiell)
WCAG-krav er retningslinjer, ikke krav. Dersom avvik skjer, bør det finnes en god begrunnelse for avviket.
Rutiner
For å sikre best mulig kvalitet på løsningen, bruk følgende verktøy/steg:
- Sjekk Errors og Alerts i Wave Toolbar
- HTML skal validere (som HTML5).
- Test skjermleserfunksjonalitet (Overskrift-hopping, tabbing, lenker og vanlig lesing) med ChromeVox.
- Skru av CSS i nettleseren og sjekk at rekkefølge på komponenter er logisk.
- Kjør Accessibility Developer Tools Audits fane i dev tools.
Disse stegene er blitt tatt som standard design-review. I tillegg bør det testes på ekte brukere der det er mulig.
Andre nyttige verktøy som kan tas i bruk dersom man trenger mer utdypende info er:
- Kjør Ainspector Sidebar i Firefox (denne deler opp evt feil inn i WCAG standards)
- NoCoffee simulator viser hvordan brukere med nedsatt syn opplever nettsiden
- ChromeLens (legges på i dev tools) kan brukes til å simulere nedsatt syn