From 9918764ec56f71375e5f52e0fe2146d39e069df0 Mon Sep 17 00:00:00 2001 From: Frank Dahle Date: Wed, 16 Sep 2026 16:11:36 +0200 Subject: [PATCH 1/4] Update accessibility.mdx Added lists from Mattilsynet + link to Wiki. Signed-off-by: Frank Dahle --- .../app/content/intro/no/accessibility.mdx | 27 +++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/apps/www/app/content/intro/no/accessibility.mdx b/apps/www/app/content/intro/no/accessibility.mdx index 6c25d7ea5f..6bb6c38349 100644 --- a/apps/www/app/content/intro/no/accessibility.mdx +++ b/apps/www/app/content/intro/no/accessibility.mdx @@ -11,12 +11,35 @@ 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 ``. +- **Aktivere darkmode:** ved hjelp av ``. +- **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. + From e7364bb56b17cc6ae3fb0a4ac87b8d80c260c30c Mon Sep 17 00:00:00 2001 From: Frank Dahle Date: Thu, 17 Sep 2026 13:57:41 +0200 Subject: [PATCH 2/4] Update accessibility.mdx Removed text Signed-off-by: Frank Dahle --- apps/www/app/content/intro/no/accessibility.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/www/app/content/intro/no/accessibility.mdx b/apps/www/app/content/intro/no/accessibility.mdx index 6bb6c38349..c630c11e86 100644 --- a/apps/www/app/content/intro/no/accessibility.mdx +++ b/apps/www/app/content/intro/no/accessibility.mdx @@ -41,5 +41,4 @@ Universell utforming er en del av hele vår arbeidsprosess - fra vi begynner å 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. From 1dcac15fa63dc93855b003f8cd2ad50832de2bcc Mon Sep 17 00:00:00 2001 From: Eirik Backer Date: Thu, 17 Sep 2026 15:35:23 +0200 Subject: [PATCH 3/4] Create nice-ads-change.md Signed-off-by: Eirik Backer --- .changeset/nice-ads-change.md | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 .changeset/nice-ads-change.md diff --git a/.changeset/nice-ads-change.md b/.changeset/nice-ads-change.md new file mode 100644 index 0000000000..a845151cc8 --- /dev/null +++ b/.changeset/nice-ads-change.md @@ -0,0 +1,2 @@ +--- +--- From 7c5a396beb81edd3c5b297bc09fec0d164a1e581 Mon Sep 17 00:00:00 2001 From: Frank Dahle Date: Thu, 17 Sep 2026 16:58:28 +0200 Subject: [PATCH 4/4] Update accessibility.mdx Corrected a fiew minor errors Signed-off-by: Frank Dahle --- apps/www/app/content/intro/no/accessibility.mdx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/www/app/content/intro/no/accessibility.mdx b/apps/www/app/content/intro/no/accessibility.mdx index c630c11e86..78ebca6070 100644 --- a/apps/www/app/content/intro/no/accessibility.mdx +++ b/apps/www/app/content/intro/no/accessibility.mdx @@ -18,8 +18,7 @@ Universell utforming krever ofte detaljerte tekniske og designmessige vurderinge ## 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: - +### 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. @@ -28,7 +27,7 @@ Designsystemet følger WCAG-kravene som inngår i regelverket for universell utf - **Tilgjengelige skjema:** Korrekt struktur, sammenknytting og validering. - **Interaktiv elementstørrelse:** Tilstrekkelig berøringsflate. -### Dette må du sørge for selv: +### 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 ``.