Universell utforming
Alle komponenter i Designsystemet er utviklet for å gi en god brukeropplevelse for alle, uansett varige eller midlertidige funksjonsnedsettelser. Kravene til universell utforming i WCAG 2.1 (uutilsynet) nivå AA er et minimum, og vi strekker oss lenger der vi kan. Når vi oppdager feil eller mangler på komponenten som påvirker om den er universelt utformet vil disse oppgavene alltid bli prioritert først av teamet.
Hva løser Designsystemet, og hva må du gjøre selv
Designsystemet hjelper deg med deler av WCAG-kravene som inngår i regelverket for universell utforming, men etterlevelse avhenger også av komponentbruk og innhold.
Her finner du hensyn som gjelder generelt eller på tvers av flere komponenter. Hensyn som er spesifikke for én komponent, er dokumentert under fanen "Tilgjengelighet" i den enkelte komponentoversikten.
Dette løser Designsystemet:
- Fokustilstander: Tydelige og synlige fokustilstander for interaktive elementer på alle bakgrunner.
- Fargekontrast: Tilstrekkelig kontrast og form på innhold for både svaksynte og fargeblinde.
- Tastaturtilgjengelighet: Alle interaktive elementer kan nås og betjenes med tastatur.
- Skalerbart design: Tilpasning til forskjellige skjermstørrelser, zoom og preferert tekststørrelse.
- Rolle og tilstand: Støtte hjelpeteknologi med semantikk og ARIA-attributter.
- Tilgjengelige skjema: Korrekt struktur, sammenknytting og validering.
- Interaktiv elementstørrelse: Tilstrekkelig berøringsflate basert på WCAG 2.2-kriteriet 2.5.8, som er veiledning utover dagens lovpålagte WCAG 2.1-krav.
Dette må du sørge for selv:
- Semantisk HTML: Bruk passende elementer for å formidle riktig rolle og overskriftshierarki.
- Tekstalternativer: Bruk passende tekstalternativer for ikke-tekstlig innhold. Kravene er dokumentert på de enkelte komponentsidene.
- Spesifiser innholdsspråk: Angi riktig språkkode for siden, for eksempel
<html lang="no">for norsk. - Korrekt token-bruk: Dersom en token heter
border- bruk den til border og ikke background, osv. - Fargemodus (valgfritt): Bruk
<body data-color-scheme="auto">for å følge brukerens systempreferanser. - Tastaturnavigasjon er ivaretatt av Designsystemet, men merk at dersom du bruker
event.preventDefault()på et keypress-event, hindrer du standardatferden i nettleseren. Da må du teste tastaturnavigasjonen selv.