From 948b01da35b01dee615cf742982b952556fefb11 Mon Sep 17 00:00:00 2001 From: Lasse Febakke Straum <33222679+Febakke@users.noreply.github.com> Date: Tue, 28 Apr 2026 15:35:35 +0200 Subject: [PATCH 1/6] added breadcrumbs docs --- .../components/avatar/en/accessibility.mdx | 30 ++++---- .../breadcrumbs/en/accessibility.mdx | 64 +++++++++++++++-- .../breadcrumbs/no/accessibility.mdx | 69 +++++++++++++++++-- 3 files changed, 140 insertions(+), 23 deletions(-) diff --git a/apps/www/app/content/components/avatar/en/accessibility.mdx b/apps/www/app/content/components/avatar/en/accessibility.mdx index f6c4f59ee9..752374d365 100644 --- a/apps/www/app/content/components/avatar/en/accessibility.mdx +++ b/apps/www/app/content/components/avatar/en/accessibility.mdx @@ -1,34 +1,34 @@ ## What you need to check - **Informative `Avatar` must have an accessible name.** +**Informative `Avatar` must have an accessible name.** - The accessible name can be provided using `aria-label`. If multiple avatars are displayed together, each name must be unique. +The accessible name can be provided using `aria-label`. If multiple avatars are displayed together, each name must be unique. - - WCAG: [1.3.1 Info and relationships](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90) - + +WCAG: [1.3.1 Info and relationships](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90) + \ - **Decorative `Avatar` must be hidden from screen readers.** +**Decorative `Avatar` must be hidden from screen readers.** - This applies when the `Avatar` is purely decorative and does not convey information. Example: If an `Avatar` is shown inside a button with the text “Ola Nordmann”, the avatar can be hidden because the name already identifies the person. +This applies when the `Avatar` is purely decorative and does not convey information. Example: If an `Avatar` is shown inside a button with the text “Ola Nordmann”, the avatar can be hidden because the name already identifies the person. - - WCAG: [1.1.1 Non-text content](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87) - + +WCAG: [1.1.1 Non-text content](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87) + \ - **Clickable `Avatar` must have an accessible name.** + **Clickable `Avatar` must have an accessible name.** - The accessible name can be provided using `aria-label`. Example: “Profile for Ola Nordmann”. Avvoid: just initails or “Avatar”. +The accessible name can be provided using `aria-label`. Example: “Profile for Ola Nordmann”. Avvoid: just initails or “Avatar”. - - WCAG: [4.1.2 Name, role, value](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121) - + +WCAG: [4.1.2 Name, role, value](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121) + diff --git a/apps/www/app/content/components/breadcrumbs/en/accessibility.mdx b/apps/www/app/content/components/breadcrumbs/en/accessibility.mdx index cabf1a83ce..0790ead575 100644 --- a/apps/www/app/content/components/breadcrumbs/en/accessibility.mdx +++ b/apps/www/app/content/components/breadcrumbs/en/accessibility.mdx @@ -1,8 +1,64 @@ - -We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on [Github](https://github.com/digdir/designsystemet/issues/new?template=1bug_report.yml) or [Slack](https://designsystemet.no/slack). - +## What you need to check -`Breadcrumbs` can contain multiple interactive elements that must be navigable with the keyboard. Therefore, make sure that the [`SkipLink`](/en/components/docs/skip-link/overview) of the main content also skips `Breadcrumbs`. +**`Breadcrumbs` must be handled so that it does not become too long on small screens.** + +Check that the breadcrumb trail does not extend beyond the visible area at a narrow viewport or high zoom. +If the trail becomes too long, it should be replaced with a back link. + +See the [Breadcrumbs documentation](/en/components/docs/breadcrumbs/code) for the recommended solution. + + +(WCAG: [1.4.10 Reflow](https://www.uutilsynet.no/wcag-standarden/1410-dynamisk-tilpasning-reflow-niva-aa/144)) + + + + +\ +**Skip link must bypass `Breadcrumbs` and go directly to the main content.** + +Users should be able to skip repeated content without navigating through the breadcrumbs. + + +(WCAG: [2.4.1 Bypass blocks](https://www.uutilsynet.no/wcag-standarden/241-hoppe-over-blokker-niva-a/95)) + + + + +\ +**The link text in `Breadcrumbs` must be understandable.** + +Avoid generic names or unclear abbreviations. + +Example: “Tax for businesses” +Not just: “Page 2” or “Info” + + +(WCAG: [2.4.4 Link purpose (in context)](https://www.uutilsynet.no/wcag-standarden/244-lenkeformal-i-kontekst-niva-aa/107)) + + + + +\ +**`Breadcrumbs` must be consistently placed and structured across pages.** + +The breadcrumb trail should appear in the same location and follow the same order on all pages where it is used. + + +(WCAG: [3.2.3 Consistent navigation](https://www.uutilsynet.no/wcag-standarden/323-konsistent-navigasjon-niva-aa/119)) + + + + +\ +**`Breadcrumbs` must not be the only way to navigate.** + +Users should have multiple ways to navigate to content. + + +(WCAG: [2.4.5 Multiple ways](https://www.uutilsynet.no/wcag-standarden/245-flere-mater-niva-aa/106)) + + + ## Last level The last link should correspond to the current page. It looks like regular text, but is coded as a link with `aria-current="page"`. This way, screen readers get the correct information about which page the user is on, without other users mistakenly perceiving it as a clickable link. diff --git a/apps/www/app/content/components/breadcrumbs/no/accessibility.mdx b/apps/www/app/content/components/breadcrumbs/no/accessibility.mdx index faa270370d..69ba380f9e 100644 --- a/apps/www/app/content/components/breadcrumbs/no/accessibility.mdx +++ b/apps/www/app/content/components/breadcrumbs/no/accessibility.mdx @@ -1,9 +1,70 @@ - -Vi jobber med å forbedre dokumentasjonen for tilgjengelighet på denne komponenten. Har du spørsmål eller ser noe som bør prioriteres, ta gjerne kontakt med oss på [Github](https://github.com/digdir/designsystemet/issues/new?template=1bug_report.yml) eller [Slack](https://designsystemet.no/slack). - +## Dette må du sjekke selv +**`Breadcrumbs` skal håndteres slik at den ikke blir for lang på små skjermer.** -`Breadcrumbs` kan innehalde fleire interaktive element som må kunne navigerast med tastatur. Pass derfor på at [`SkipLink`](/no/components/docs/skip-link/overview) til hovudinnhaldet også hoppar over `Breadcrumbs`. +Test at brødsmulestien ikke går utenfor synlig område ved smal viewport eller høy zoom. Hvis stien blir for lang, bør den erstattes med en tilbake-lenke. + +Se [dokumentasjon for Breadcrumbs](/no/components/docs/breadcrumbs/code) for anbefalt løsning. + + +WCAG: [1.4.10 Dynamisk tilpasning (Reflow)](https://www.uutilsynet.no/wcag-standarden/1410-dynamisk-tilpasning-reflow-niva-aa/144) + + + + +\ +**Skiplink skal hoppe forbi `Breadcrumbs` og direkte til hovedinnholdet.** + +Brukeren skal kunne navigere forbi gjentakende innhold uten å måtte gå gjennom `Breadcrumbs`. + + + +WCAG: [2.4.1 Hoppe over blokker](https://www.uutilsynet.no/wcag-standarden/241-hoppe-over-blokker-niva-a/95) + + + + + +\ +**Lenketekstene i `Breadcrumbs` skal være forståelige.** + +Unngå generiske navn eller forkortelser som er vanskelige å forstå. +Eksempel: “Skatt for næringsdrivende” +Ikke bare: “Side 2” eller “Info” + + + +WCAG: [2.4.4 Lenkeformål (i kontekst)](https://www.uutilsynet.no/wcag-standarden/244-lenkeformal-i-kontekst-niva-aa/107) + + + + + +\ +**`Breadcrumbs` skal være konsistent plassert og bygget opp på tvers av sider.** + +Brødsmulestien skal vises på samme sted og i samme rekkefølge på alle sider der den brukes. + + + +(WCAG: [3.2.3 Konsistent navigasjon](https://www.uutilsynet.no/wcag-standarden/323-konsistent-navigasjon-niva-aa/119)) + + + + + +\ +**`Breadcrumbs` skal ikke være eneste måte å navigere på.** + +Brukeren skal ha flere måter å navigere til innholdet på. + + + +WCAG: [2.4.5 Flere måter](https://www.uutilsynet.no/wcag-standarden/245-flere-mater-niva-aa/106) + + + + ## Siste nivå Den siste lenka skal tilsvare noverande side. Den ser ut som vanleg tekst, men er koda som ein lenkje med `aria-current="page"`. På den måten får skjermlesarar korrekt informasjon om kva side brukaren er på, utan at andre brukarar feilaktig oppfattar det som ei klikkbar lenkje. From 0080ea2f3df2df6f6161c7f2f6c43d146fe7be2b Mon Sep 17 00:00:00 2001 From: Lasse Febakke Straum <33222679+Febakke@users.noreply.github.com> Date: Mon, 4 May 2026 08:55:03 +0200 Subject: [PATCH 2/6] Updated Button docs --- .../components/button/en/accessibility.mdx | 52 +++++++++++++++- .../components/button/no/accessibility.mdx | 62 ++++++++++++++++++- 2 files changed, 108 insertions(+), 6 deletions(-) diff --git a/apps/www/app/content/components/button/en/accessibility.mdx b/apps/www/app/content/components/button/en/accessibility.mdx index 148e41e643..1dd3c95865 100644 --- a/apps/www/app/content/components/button/en/accessibility.mdx +++ b/apps/www/app/content/components/button/en/accessibility.mdx @@ -1,6 +1,52 @@ - -We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on [Github](https://github.com/digdir/designsystemet/issues/new?template=1bug_report.yml) or [Slack](https://designsystemet.no/slack). - +## What you need to check + +**`Button` text must clearly describe the action.** + +Avoid vague text such as “Click here”. + +Example: “Create account” + + + +(WCAG: [2.4.4 Link purpose (in context)](https://www.uutilsynet.no/wcag-standarden/244-lenkeformal-i-kontekst-niva-aa/107)) + + + + + +\ +**The accessible name must match the visible text.** + +If you use `aria-label` or other techniques that override the accessible name, it must still match the visible text. + + + +(WCAG: [2.5.3 Label in Name](https://www.uutilsynet.no/wcag-standarden/253-ledetekst-i-navn-niva/150)) + + + + +\ +**Icon-only `Button` must have an accessible name that describes the action.** + +This applies when the `Button` consists only of an icon. + + +(WCAG: [4.1.2 Name, role, value](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121)) + + + + +\ +**Using a loader in `Button` must provide understandable feedback to screen reader users.** + +If the button shows a loading indicator, consider how the status is communicated (for example with an `aria-live` region or updated text). + + +(WCAG: [4.1.3 Status messages](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152)) + + + ## Avoid using disabled buttons diff --git a/apps/www/app/content/components/button/no/accessibility.mdx b/apps/www/app/content/components/button/no/accessibility.mdx index 14047558f5..9f738c5518 100644 --- a/apps/www/app/content/components/button/no/accessibility.mdx +++ b/apps/www/app/content/components/button/no/accessibility.mdx @@ -1,6 +1,62 @@ - -Vi jobber med å forbedre dokumentasjonen for tilgjengelighet på denne komponenten. Har du spørsmål eller ser noe som bør prioriteres, ta gjerne kontakt med oss på [Github](https://github.com/digdir/designsystemet/issues/new?template=1bug_report.yml) eller [Slack](https://designsystemet.no/slack). - +## Dette må du sjekke selv +**`Button`-tekst skal tydelig beskrive hva som skjer når brukeren aktiverer den.** + +Unngå generiske tekster som “Klikk her”. + + + + +(WCAG: [2.4.4 Lenkeformål (i kontekst)](https://www.uutilsynet.no/wcag-standarden/244-lenkeformal-i-kontekst-niva-aa/107)) + + + + + +\ +**Det tilgjengelige navnet skal samsvare med synlig tekst.** + +Hvis du bruker `aria-label` eller andre teknikker som overstyrer det tilgjengelige navnet, må det fortsatt samsvare med den synlige teksten. + + + +(WCAG: [2.5.3 Ledetekst i navn](https://www.uutilsynet.no/wcag-standarden/253-ledetekst-i-navn-niva/150)) + + + + + +\ +**Ikon i `Button` med tekst skal være dekorativt og skjules for skjermlesere.** + +Ikonet skal ikke leses opp hvis teksten allerede beskriver handlingen. + + +(WCAG: [1.1.1 Ikke-tekstlig innhold](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87)) + + + + +\ +**Ikon-knapper skal ha et tilgjengelig navn som beskriver handlingen.** + +Dette gjelder når `Button` kun består av et ikon. + + +(WCAG: [4.1.2 Navn, rolle, verdi](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121)) + + + + +\ +**Bruk av loader i `Button` skal gi forståelig tilbakemelding til skjermleserbrukere.** + +Hvis knappen viser en lasteindikator, må det vurderes hvordan status kommuniseres (for eksempel med en `aria-live` region eller oppdatert tekst). + + +(WCAG: [4.1.3 Statusbeskjeder](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152)) + + + ## Unngå å bruke deaktiverte knappar From 66456c14074c69a4276a64bce4aa38af577668c9 Mon Sep 17 00:00:00 2001 From: Lasse Febakke Straum <33222679+Febakke@users.noreply.github.com> Date: Mon, 4 May 2026 11:00:32 +0200 Subject: [PATCH 3/6] Added card docs, fixed WCAG links --- .../breadcrumbs/en/accessibility.mdx | 10 ++-- .../breadcrumbs/no/accessibility.mdx | 8 ++-- .../components/button/en/accessibility.mdx | 10 ++-- .../components/button/no/accessibility.mdx | 10 ++-- .../components/card/en/accessibility.mdx | 48 +++++++++++++++++-- .../components/card/no/accessibility.mdx | 47 ++++++++++++++++-- 6 files changed, 105 insertions(+), 28 deletions(-) diff --git a/apps/www/app/content/components/breadcrumbs/en/accessibility.mdx b/apps/www/app/content/components/breadcrumbs/en/accessibility.mdx index 0790ead575..ff0d150980 100644 --- a/apps/www/app/content/components/breadcrumbs/en/accessibility.mdx +++ b/apps/www/app/content/components/breadcrumbs/en/accessibility.mdx @@ -8,7 +8,7 @@ If the trail becomes too long, it should be replaced with a back link. See the [Breadcrumbs documentation](/en/components/docs/breadcrumbs/code) for the recommended solution. -(WCAG: [1.4.10 Reflow](https://www.uutilsynet.no/wcag-standarden/1410-dynamisk-tilpasning-reflow-niva-aa/144)) +WCAG: [1.4.10 Reflow](https://www.uutilsynet.no/wcag-standarden/1410-dynamisk-tilpasning-reflow-niva-aa/144) @@ -19,7 +19,7 @@ See the [Breadcrumbs documentation](/en/components/docs/breadcrumbs/code) for th Users should be able to skip repeated content without navigating through the breadcrumbs. -(WCAG: [2.4.1 Bypass blocks](https://www.uutilsynet.no/wcag-standarden/241-hoppe-over-blokker-niva-a/95)) +WCAG: [2.4.1 Bypass blocks](https://www.uutilsynet.no/veiledning/241-hoppe-over-blokker/1041) @@ -33,7 +33,7 @@ Example: “Tax for businesses” Not just: “Page 2” or “Info” -(WCAG: [2.4.4 Link purpose (in context)](https://www.uutilsynet.no/wcag-standarden/244-lenkeformal-i-kontekst-niva-aa/107)) +WCAG: [2.4.4 Link purpose (in context)](https://www.uutilsynet.no/wcag-standarden/244-formal-med-lenke-i-kontekst-niva/106) @@ -44,7 +44,7 @@ Not just: “Page 2” or “Info” The breadcrumb trail should appear in the same location and follow the same order on all pages where it is used. -(WCAG: [3.2.3 Consistent navigation](https://www.uutilsynet.no/wcag-standarden/323-konsistent-navigasjon-niva-aa/119)) +WCAG: [3.2.3 Consistent navigation](https://www.uutilsynet.no/veiledning/323-konsekvent-navigering/1261) @@ -55,7 +55,7 @@ The breadcrumb trail should appear in the same location and follow the same orde Users should have multiple ways to navigate to content. -(WCAG: [2.4.5 Multiple ways](https://www.uutilsynet.no/wcag-standarden/245-flere-mater-niva-aa/106)) +WCAG: [2.4.5 Multiple ways](https://www.uutilsynet.no/veiledning/245-flere-mater/1252) diff --git a/apps/www/app/content/components/breadcrumbs/no/accessibility.mdx b/apps/www/app/content/components/breadcrumbs/no/accessibility.mdx index 69ba380f9e..419c41a28a 100644 --- a/apps/www/app/content/components/breadcrumbs/no/accessibility.mdx +++ b/apps/www/app/content/components/breadcrumbs/no/accessibility.mdx @@ -19,7 +19,7 @@ Brukeren skal kunne navigere forbi gjentakende innhold uten å måtte gå gjenno -WCAG: [2.4.1 Hoppe over blokker](https://www.uutilsynet.no/wcag-standarden/241-hoppe-over-blokker-niva-a/95) +WCAG: [2.4.1 Hoppe over blokker](https://www.uutilsynet.no/veiledning/241-hoppe-over-blokker/1041) @@ -34,7 +34,7 @@ Ikke bare: “Side 2” eller “Info” -WCAG: [2.4.4 Lenkeformål (i kontekst)](https://www.uutilsynet.no/wcag-standarden/244-lenkeformal-i-kontekst-niva-aa/107) +WCAG: [2.4.4 Formål med lenke (i kontekst)](https://www.uutilsynet.no/wcag-standarden/244-formal-med-lenke-i-kontekst-niva/106) @@ -47,7 +47,7 @@ Brødsmulestien skal vises på samme sted og i samme rekkefølge på alle sider -(WCAG: [3.2.3 Konsistent navigasjon](https://www.uutilsynet.no/wcag-standarden/323-konsistent-navigasjon-niva-aa/119)) +WCAG: [3.2.3 Konsekvent navigering](https://www.uutilsynet.no/veiledning/323-konsekvent-navigering/1261) @@ -60,7 +60,7 @@ Brukeren skal ha flere måter å navigere til innholdet på. -WCAG: [2.4.5 Flere måter](https://www.uutilsynet.no/wcag-standarden/245-flere-mater-niva-aa/106) +WCAG: [2.4.5 Flere måter](https://www.uutilsynet.no/veiledning/245-flere-mater/1252) diff --git a/apps/www/app/content/components/button/en/accessibility.mdx b/apps/www/app/content/components/button/en/accessibility.mdx index 1dd3c95865..da9786fc91 100644 --- a/apps/www/app/content/components/button/en/accessibility.mdx +++ b/apps/www/app/content/components/button/en/accessibility.mdx @@ -4,11 +4,9 @@ Avoid vague text such as “Click here”. -Example: “Create account” - -(WCAG: [2.4.4 Link purpose (in context)](https://www.uutilsynet.no/wcag-standarden/244-lenkeformal-i-kontekst-niva-aa/107)) +WCAG: [2.4.4 Link purpose (in context)](https://www.uutilsynet.no/wcag-standarden/244-formal-med-lenke-i-kontekst-niva/106) @@ -21,7 +19,7 @@ If you use `aria-label` or other techniques that override the accessible name, i -(WCAG: [2.5.3 Label in Name](https://www.uutilsynet.no/wcag-standarden/253-ledetekst-i-navn-niva/150)) +WCAG: [2.5.3 Label in Name](https://www.uutilsynet.no/wcag-standarden/253-ledetekst-i-navn-niva/150) @@ -32,7 +30,7 @@ If you use `aria-label` or other techniques that override the accessible name, i This applies when the `Button` consists only of an icon. -(WCAG: [4.1.2 Name, role, value](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121)) +WCAG: [4.1.2 Name, role, value](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121) @@ -43,7 +41,7 @@ This applies when the `Button` consists only of an icon. If the button shows a loading indicator, consider how the status is communicated (for example with an `aria-live` region or updated text). -(WCAG: [4.1.3 Status messages](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152)) +WCAG: [4.1.3 Status messages](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152) diff --git a/apps/www/app/content/components/button/no/accessibility.mdx b/apps/www/app/content/components/button/no/accessibility.mdx index 9f738c5518..aa24228c75 100644 --- a/apps/www/app/content/components/button/no/accessibility.mdx +++ b/apps/www/app/content/components/button/no/accessibility.mdx @@ -6,7 +6,7 @@ Unngå generiske tekster som “Klikk her”. -(WCAG: [2.4.4 Lenkeformål (i kontekst)](https://www.uutilsynet.no/wcag-standarden/244-lenkeformal-i-kontekst-niva-aa/107)) +WCAG: [2.4.4 Formål med lenke (i kontekst)](https://www.uutilsynet.no/wcag-standarden/244-formal-med-lenke-i-kontekst-niva/106) @@ -19,7 +19,7 @@ Hvis du bruker `aria-label` eller andre teknikker som overstyrer det tilgjengeli -(WCAG: [2.5.3 Ledetekst i navn](https://www.uutilsynet.no/wcag-standarden/253-ledetekst-i-navn-niva/150)) +WCAG: [2.5.3 Ledetekst i navn](https://www.uutilsynet.no/wcag-standarden/253-ledetekst-i-navn-niva/150) @@ -31,7 +31,7 @@ Hvis du bruker `aria-label` eller andre teknikker som overstyrer det tilgjengeli Ikonet skal ikke leses opp hvis teksten allerede beskriver handlingen. -(WCAG: [1.1.1 Ikke-tekstlig innhold](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87)) +WCAG: [1.1.1 Ikke-tekstlig innhold](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87) @@ -42,7 +42,7 @@ Ikonet skal ikke leses opp hvis teksten allerede beskriver handlingen. Dette gjelder når `Button` kun består av et ikon. -(WCAG: [4.1.2 Navn, rolle, verdi](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121)) +WCAG: [4.1.2 Navn, rolle, verdi](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121) @@ -53,7 +53,7 @@ Dette gjelder når `Button` kun består av et ikon. Hvis knappen viser en lasteindikator, må det vurderes hvordan status kommuniseres (for eksempel med en `aria-live` region eller oppdatert tekst). -(WCAG: [4.1.3 Statusbeskjeder](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152)) +WCAG: [4.1.3 Statusbeskjeder](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152) diff --git a/apps/www/app/content/components/card/en/accessibility.mdx b/apps/www/app/content/components/card/en/accessibility.mdx index 644f1d5c9c..e1923a5740 100644 --- a/apps/www/app/content/components/card/en/accessibility.mdx +++ b/apps/www/app/content/components/card/en/accessibility.mdx @@ -1,5 +1,45 @@ - -We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on [Github](https://github.com/digdir/designsystemet/issues/new?template=1bug_report.yml) or [Slack](https://designsystemet.no/slack). - +## What you need to check -If the entire card is a link with an image, the image should **not** be informative, and the `alt` attribute should be empty. +**Link text in `Card` must clearly describe where the link goes.** + +Use a clear title or link text that explains the destination. +Avoid generic text such as “Read more” or “Click here”. + + +WCAG: [2.4.4 Link purpose (in context)](https://www.uutilsynet.no/veiledning/244-formal-med-lenke-i-kontekst/1251) + + + + +\ +**The accessible name must match the visible text.** + +If you use `aria-label` or other techniques that override the accessible name, it must still match the visible text. + + +WCAG: [2.5.3 Label in Name](https://www.uutilsynet.no/wcag-standarden/253-ledetekst-i-navn-niva/150) + + + + +\ +**Images in link cards must be decorative.** + +If the entire `Card` is a link with an image, the image must not be informative and should have an empty `alt` attribute. + + +WCAG: [1.1.1 Non-text content](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87) + + + + +\ +**Headings in `Card` must use the correct level relative to the rest of the page.** + +Do not skip heading levels (for example from `h1` to `h3`). + + +WCAG: [1.3.1 Info and relationships](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90) + + + \ No newline at end of file diff --git a/apps/www/app/content/components/card/no/accessibility.mdx b/apps/www/app/content/components/card/no/accessibility.mdx index 8a8c88824f..1d2b02551a 100644 --- a/apps/www/app/content/components/card/no/accessibility.mdx +++ b/apps/www/app/content/components/card/no/accessibility.mdx @@ -1,6 +1,45 @@ - -Vi jobber med å forbedre dokumentasjonen for tilgjengelighet på denne komponenten. Har du spørsmål eller ser noe som bør prioriteres, ta gjerne kontakt med oss på [Github](https://github.com/digdir/designsystemet/issues/new?template=1bug_report.yml) eller [Slack](https://designsystemet.no/slack). - +## Dette må du sjekke selv +**Lenketeksten i `Card` skal tydelig beskrive hvor lenken går.** -Dersom hele kortet er en lenke med bilde, så skal **ikke** bildet være informativt, og `alt` attributtet skal være tomt. +Bruk en tydelig tittel eller lenketekst som forklarer målet med lenken. +Unngå generiske tekster som “Les mer” eller “Klikk her”. + + +WCAG: [2.4.4 Formål med lenke (i kontekst)](https://www.uutilsynet.no/veiledning/244-formal-med-lenke-i-kontekst/1251) + + + + +\ +**Det tilgjengelige navnet skal samsvare med synlig tekst.** + +Hvis du bruker `aria-label` eller andre teknikker som overstyrer det tilgjengelige navnet, må det fortsatt samsvare med den synlige teksten. + + +WCAG: [2.5.3 Ledetekst i navn](https://www.uutilsynet.no/wcag-standarden/253-ledetekst-i-navn-niva/150) + + + + +\ +**Bilder i lenkekort skal være dekorative.** + +Hvis hele `Card` er en lenke med bilde, skal bildet ikke være informativt og ha tom `alt`-tekst. + + +WCAG: [1.1.1 Ikke-tekstlig innhold](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87) + + + + +\ +**Overskrifter i `Card` skal bruke riktig nivå i forhold til resten av siden.** + +Ikke hopp over nivåer (for eksempel fra `h1` til `h3`). + + +WCAG: [1.3.1 Informasjon og relasjoner](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90) + + + \ No newline at end of file From f0f4a76c0c012b3ef8c672f132c540033051299c Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Wed, 13 May 2026 09:10:54 +0200 Subject: [PATCH 4/6] missed --- apps/www/app/content/components/avatar/en/accessibility.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/www/app/content/components/avatar/en/accessibility.mdx b/apps/www/app/content/components/avatar/en/accessibility.mdx index e9b21d7793..f016b6ee1b 100644 --- a/apps/www/app/content/components/avatar/en/accessibility.mdx +++ b/apps/www/app/content/components/avatar/en/accessibility.mdx @@ -10,7 +10,7 @@ WCAG: [1.3.1 Info and relationships](https://www.uutilsynet.no/wcag-standarden/1 - +\ **Decorative avatar must be hidden from screen readers.** This applies when the avatar is purely decorative and does not convey information. Example: If an avatar is shown inside a button with the text “Ola Nordmann”, the avatar can be hidden because the name already identifies the person. @@ -21,7 +21,7 @@ WCAG: [1.1.1 Non-text content](https://www.uutilsynet.no/wcag-standarden/111-ikk - +\ **Clickable avatar must have an accessible name.** The accessible name can be provided using `aria-label`. Example: “Profile for Ola Nordmann”. Avoid: just initials or “Avatar”. From 90073b9a6b3decb410391681f8f35550e5a1f50a Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Wed, 13 May 2026 09:56:14 +0200 Subject: [PATCH 5/6] fix formatting --- .../app/content/components/avatar/en/accessibility.mdx | 1 - .../app/content/components/button/en/accessibility.mdx | 8 ++++---- .../app/content/components/button/no/accessibility.mdx | 8 ++++---- apps/www/app/content/components/card/en/accessibility.mdx | 6 +++--- apps/www/app/content/components/card/no/accessibility.mdx | 6 +++--- 5 files changed, 14 insertions(+), 15 deletions(-) diff --git a/apps/www/app/content/components/avatar/en/accessibility.mdx b/apps/www/app/content/components/avatar/en/accessibility.mdx index f016b6ee1b..c79624ff09 100644 --- a/apps/www/app/content/components/avatar/en/accessibility.mdx +++ b/apps/www/app/content/components/avatar/en/accessibility.mdx @@ -1,6 +1,5 @@ ## What you need to check - **Informative avatar must have an accessible name.** The accessible name can be provided using `aria-label`. If multiple avatars are displayed together, each name must be unique. diff --git a/apps/www/app/content/components/button/en/accessibility.mdx b/apps/www/app/content/components/button/en/accessibility.mdx index da9786fc91..6542bb4bb0 100644 --- a/apps/www/app/content/components/button/en/accessibility.mdx +++ b/apps/www/app/content/components/button/en/accessibility.mdx @@ -1,6 +1,6 @@ ## What you need to check -**`Button` text must clearly describe the action.** +**Button text must clearly describe the action.** Avoid vague text such as “Click here”. @@ -25,9 +25,9 @@ WCAG: [2.5.3 Label in Name](https://www.uutilsynet.no/wcag-standarden/253-ledete \ -**Icon-only `Button` must have an accessible name that describes the action.** +**Icon-only button must have an accessible name that describes the action.** -This applies when the `Button` consists only of an icon. +This applies when the button consists only of an icon. WCAG: [4.1.2 Name, role, value](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121) @@ -36,7 +36,7 @@ WCAG: [4.1.2 Name, role, value](https://www.uutilsynet.no/wcag-standarden/412-na \ -**Using a loader in `Button` must provide understandable feedback to screen reader users.** +**Using a loader in button must provide understandable feedback to screen reader users.** If the button shows a loading indicator, consider how the status is communicated (for example with an `aria-live` region or updated text). diff --git a/apps/www/app/content/components/button/no/accessibility.mdx b/apps/www/app/content/components/button/no/accessibility.mdx index aa24228c75..4d8e633a40 100644 --- a/apps/www/app/content/components/button/no/accessibility.mdx +++ b/apps/www/app/content/components/button/no/accessibility.mdx @@ -1,5 +1,5 @@ ## Dette må du sjekke selv -**`Button`-tekst skal tydelig beskrive hva som skjer når brukeren aktiverer den.** +**Button-tekst skal tydelig beskrive hva som skjer når brukeren aktiverer den.** Unngå generiske tekster som “Klikk her”. @@ -26,7 +26,7 @@ WCAG: [2.5.3 Ledetekst i navn](https://www.uutilsynet.no/wcag-standarden/253-led \ -**Ikon i `Button` med tekst skal være dekorativt og skjules for skjermlesere.** +**Ikon i button med tekst skal være dekorativt og skjules for skjermlesere.** Ikonet skal ikke leses opp hvis teksten allerede beskriver handlingen. @@ -39,7 +39,7 @@ WCAG: [1.1.1 Ikke-tekstlig innhold](https://www.uutilsynet.no/wcag-standarden/11 \ **Ikon-knapper skal ha et tilgjengelig navn som beskriver handlingen.** -Dette gjelder når `Button` kun består av et ikon. +Dette gjelder når button kun består av et ikon. WCAG: [4.1.2 Navn, rolle, verdi](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121) @@ -48,7 +48,7 @@ WCAG: [4.1.2 Navn, rolle, verdi](https://www.uutilsynet.no/wcag-standarden/412-n \ -**Bruk av loader i `Button` skal gi forståelig tilbakemelding til skjermleserbrukere.** +**Bruk av loader i button skal gi forståelig tilbakemelding til skjermleserbrukere.** Hvis knappen viser en lasteindikator, må det vurderes hvordan status kommuniseres (for eksempel med en `aria-live` region eller oppdatert tekst). diff --git a/apps/www/app/content/components/card/en/accessibility.mdx b/apps/www/app/content/components/card/en/accessibility.mdx index e1923a5740..748e41ce38 100644 --- a/apps/www/app/content/components/card/en/accessibility.mdx +++ b/apps/www/app/content/components/card/en/accessibility.mdx @@ -1,6 +1,6 @@ ## What you need to check -**Link text in `Card` must clearly describe where the link goes.** +**Link text in card must clearly describe where the link goes.** Use a clear title or link text that explains the destination. Avoid generic text such as “Read more” or “Click here”. @@ -25,7 +25,7 @@ WCAG: [2.5.3 Label in Name](https://www.uutilsynet.no/wcag-standarden/253-ledete \ **Images in link cards must be decorative.** -If the entire `Card` is a link with an image, the image must not be informative and should have an empty `alt` attribute. +If the entire card is a link with an image, the image must not be informative and should have an empty `alt` attribute. WCAG: [1.1.1 Non-text content](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87) @@ -34,7 +34,7 @@ WCAG: [1.1.1 Non-text content](https://www.uutilsynet.no/wcag-standarden/111-ikk \ -**Headings in `Card` must use the correct level relative to the rest of the page.** +**Headings in card must use the correct level relative to the rest of the page.** Do not skip heading levels (for example from `h1` to `h3`). diff --git a/apps/www/app/content/components/card/no/accessibility.mdx b/apps/www/app/content/components/card/no/accessibility.mdx index 1d2b02551a..49685d47fb 100644 --- a/apps/www/app/content/components/card/no/accessibility.mdx +++ b/apps/www/app/content/components/card/no/accessibility.mdx @@ -1,6 +1,6 @@ ## Dette må du sjekke selv -**Lenketeksten i `Card` skal tydelig beskrive hvor lenken går.** +**Lenketeksten i card skal tydelig beskrive hvor lenken går.** Bruk en tydelig tittel eller lenketekst som forklarer målet med lenken. Unngå generiske tekster som “Les mer” eller “Klikk her”. @@ -25,7 +25,7 @@ WCAG: [2.5.3 Ledetekst i navn](https://www.uutilsynet.no/wcag-standarden/253-led \ **Bilder i lenkekort skal være dekorative.** -Hvis hele `Card` er en lenke med bilde, skal bildet ikke være informativt og ha tom `alt`-tekst. +Hvis hele card er en lenke med bilde, skal bildet ikke være informativt og ha tom `alt`-tekst. WCAG: [1.1.1 Ikke-tekstlig innhold](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87) @@ -34,7 +34,7 @@ WCAG: [1.1.1 Ikke-tekstlig innhold](https://www.uutilsynet.no/wcag-standarden/11 \ -**Overskrifter i `Card` skal bruke riktig nivå i forhold til resten av siden.** +**Overskrifter i card skal bruke riktig nivå i forhold til resten av siden.** Ikke hopp over nivåer (for eksempel fra `h1` til `h3`). From e305d4b1f861bc5bfcbf3e6b78f4eb074e5804a5 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Wed, 13 May 2026 14:37:55 +0200 Subject: [PATCH 6/6] updated missing en and busy --- .../components/button/en/accessibility.mdx | 15 ++++++++++++++- .../components/button/no/accessibility.mdx | 4 +++- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/apps/www/app/content/components/button/en/accessibility.mdx b/apps/www/app/content/components/button/en/accessibility.mdx index 6542bb4bb0..30de8017c3 100644 --- a/apps/www/app/content/components/button/en/accessibility.mdx +++ b/apps/www/app/content/components/button/en/accessibility.mdx @@ -23,6 +23,17 @@ WCAG: [2.5.3 Label in Name](https://www.uutilsynet.no/wcag-standarden/253-ledete + +\ +**Icon in a button with text should be decorative and hidden from screen readers.** + +The icon should not be announced if the text already describes the action. + + +WCAG: [1.1.1 Non-text content](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87) + + + \ **Icon-only button must have an accessible name that describes the action.** @@ -38,7 +49,9 @@ WCAG: [4.1.2 Name, role, value](https://www.uutilsynet.no/wcag-standarden/412-na \ **Using a loader in button must provide understandable feedback to screen reader users.** -If the button shows a loading indicator, consider how the status is communicated (for example with an `aria-live` region or updated text). +If the button shows a loading indicator, remember to add `aria-busy="true"` to indicate that an action is in progress. + +In addition, you must consider how status is communicated, for example by updating the text. WCAG: [4.1.3 Status messages](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152) diff --git a/apps/www/app/content/components/button/no/accessibility.mdx b/apps/www/app/content/components/button/no/accessibility.mdx index 4d8e633a40..9186a0f5c9 100644 --- a/apps/www/app/content/components/button/no/accessibility.mdx +++ b/apps/www/app/content/components/button/no/accessibility.mdx @@ -50,7 +50,9 @@ WCAG: [4.1.2 Navn, rolle, verdi](https://www.uutilsynet.no/wcag-standarden/412-n \ **Bruk av loader i button skal gi forståelig tilbakemelding til skjermleserbrukere.** -Hvis knappen viser en lasteindikator, må det vurderes hvordan status kommuniseres (for eksempel med en `aria-live` region eller oppdatert tekst). +Hvis knappen viser en lasteindikator, huske å legg på `aria-busy="true"` for å indikere at en handling pågår. + +I tillegg må du vurdere hvordan status kommuniseres, for eksempel ved å oppdatere teksten. WCAG: [4.1.3 Statusbeskjeder](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152)