Skip to content

docs: update accessibility article #5380

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
eirikbacker wants to merge 4 commits into from
Closed

docs: update accessibility article #5380

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9918764
Update accessibility.mdx
frankdahle Sep 16, 2026
e7364bb
Update accessibility.mdx
frankdahle Sep 17, 2026
1dcac15
Create nice-ads-change.md
eirikbacker Sep 17, 2026
7c5a396
Update accessibility.mdx
frankdahle Sep 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .changeset/nice-ads-change.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
27 changes: 24 additions & 3 deletions apps/www/app/content/intro/no/accessibility.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,33 @@ order: 40
search_terms: tilgjengelighet, accessibility, inkludering
---

Designsystemet tilbyr grunnleggende komponenter som ivaretar [WCAG-kravene som inngår i regelverket](https://www.uutilsynet.no/wcag-standarden/wcag-standarden/86). Designsystemet tilbyr også veiledning og anbefalinger ut over de lovpålagte kravene, for å gjøre løsningene mest mulig brukervennlige for alle, uavhengig av varige eller midlertidig reduserte evner.
Designsystemet tilbyr grunnleggende komponenter som ivaretar [WCAG-kravene som inngår i regelverket](https://www.uutilsynet.no/wcag-standarden/wcag-standarden/86). Designsystemet tilbyr også veiledning og anbefalinger ut over de lovpålagte kravene, for å gjøre løsningene mest mulig brukervennlige for alle, uavhengig av varige eller midlertidige funksjonsnedsettelser.

Universell utforming krever ofte detaljerte tekniske og designmessige vurderinger. Flere komponenter krever spesifikke HTML- og ARIA-attributter, korrekt fokushåndtering og dynamisk annonsering til skjermlesere. I tillegg må det tas høyde for hvordan ulike skjermlesere og nettlesere tolker kombinasjoner av attributter og elementer. Dette er komplekse utfordringer den enkelte utvikler eller designer ikke skal måtte løse alene. Når vi løser det én gang i felleskap, kan mange gjenbruke det. Eventuelle feil og forbedringer som oppdages kan rettes opp og komme alle som bruker Designsystemet til gode.

Universell utforming er en del av hele vår arbeidsprosess - fra vi begynner å spesifisere komponenten til den er i produksjon. Når vi oppdager feil eller mangler på komponenten som påvirker om den er universelt utformet vil disse oppgavene bli prioritert av teamet.
## Hva løser Designsystemet, og hva må du gjøre selv
Designsystemet følger WCAG-kravene som inngår i regelverket for universell utforming, for å gjøre løsningene mest mulig brukervennlige for alle. Men noen ting må du som utvikler/designer sørge for selv.

### 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 or 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.

### Dette må du sørge for selv
- **Semantisk HTML:** Bruk passende elementer for å formidle riktig rolle og overskriftshierarki.
- **Tekstalternativer:** Beskrivende aria-label for områder og ikke-tekstlig innhold. Dette står dokumentert på de enkelte komponent-sider.
- **Spesifiser innholdsspråk:** ved hjelp av `<html lang="">`.
- **Aktivere darkmode:** ved hjelp av `<body data-color-scheme="auto">`.
- **Korrekt token-bruk:** Dersom en token heter border - bruk den til border og ikke background, osv.

[I Wikien vår på GitHub finner du en detaljert oversikt over hvilke WCAG-krav Designsystemet hjelper deg å oppfylle](https://github.com/digdir/designsystemet/wiki/Designsystemet-hjelper-deg-%C3%A5-oppfylla-WCAG%E2%80%90kravane)

Universell utforming er en del av hele vår arbeidsprosess - fra vi begynner å spesifisere komponenten til den er i produksjon. Når vi oppdager feil eller mangler på komponenten som påvirker om den er universelt utformet vil disse oppgavene bli prioritert av teamet.

Tilgjengelige komponenter er bare en del av det å lage tilgjengelige løsninger. Vi vil derfor også lage guider og andre hjelpemidler slik at teamene får ekstra støtte til å bruke komponentene til det de er ment til.

Under [God praksis - Tilgjengelighet](/no/best-practices#accessibility) kommer vi til å legge ut artikler som handler om hvordan vi kan gjøre løsningene våre mest mulig tilgjengelige.

Loading