digdir · Febakke · Apr 28, 2026 · May 4, 2026 · May 4, 2026 · May 4, 2026
@@ -1,34 +1,33 @@
 ## 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.
-
-        <span data-size="sm"> 
-        WCAG: [1.3.1 Info and relationships](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90)
-        </span> 
+<span data-size="sm"> 
+WCAG: [1.3.1 Info and relationships](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90)
+</span> 
 
 <Divider/>
 \
-        **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 with `aria-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.
 
 
-        <span data-size="sm"> 
-        WCAG: [1.1.1 Non-text content](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87)
-        </span> 
+<span data-size="sm"> 
+WCAG: [1.1.1 Non-text content](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87)
+</span> 
 
 <Divider/>
 \
-        **Clickable avatars 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”. Avoid: just initails or “Avatar”.
+The accessible name can be provided using `aria-label`. Example: “Profile for Ola Nordmann”. Avoid: just initials or “Avatar”.
 
-        <span data-size="sm"> 
-        WCAG: [4.1.2 Name, role, value](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121)
-        </span> 
+<span data-size="sm"> 
+WCAG: [4.1.2 Name, role, value](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121)
+</span> 
 
 
 

@@ -1,8 +1,64 @@
-<Alert data-color="info">
-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).
-</Alert>
+## What you need to check
 
-Breadcrumbs can contain multiple interactive elements that must be navigable with the keyboard. Therefore, make sure that the [skip link](/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.
+
+<span data-size="sm"> 
+WCAG: [1.4.10 Reflow](https://www.uutilsynet.no/wcag-standarden/1410-dynamisk-tilpasning-reflow-niva-aa/144)
+</span>
+
+
+<Divider/>
+\
+**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.
+
+<span data-size="sm"> 
+WCAG: [2.4.1 Bypass blocks](https://www.uutilsynet.no/veiledning/241-hoppe-over-blokker/1041)
+</span>
+
+
+<Divider/>
+\
+**The link text in breadcrumbs must be understandable.**
+
+Avoid generic names or unclear abbreviations.
+
+Example: “Tax for businesses”  
+Not just: “Page 2” or “Info”
+
+<span data-size="sm"> 
+WCAG: [2.4.4 Link purpose (in context)](https://www.uutilsynet.no/wcag-standarden/244-formal-med-lenke-i-kontekst-niva/106)
+</span>
+
+
+<Divider/>
+\
+**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.
+
+<span data-size="sm"> 
+WCAG: [3.2.3 Consistent navigation](https://www.uutilsynet.no/veiledning/323-konsekvent-navigering/1261)
+</span>
+
+
+<Divider/>
+\
+**Breadcrumbs must not be the only way to navigate.**
+
+Users should have multiple ways to navigate to content.
+
+<span data-size="sm"> 
+WCAG: [2.4.5 Multiple ways](https://www.uutilsynet.no/veiledning/245-flere-mater/1252)
+</span>
+
+<Divider/>
 
 ## 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.
@@ -1,9 +1,66 @@
-<Alert data-color="info">
-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).
-</Alert>
+## 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 [skip link](/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.
+
+<span data-size="sm"> 
+WCAG: [1.4.10 Dynamisk tilpasning (Reflow)](https://www.uutilsynet.no/wcag-standarden/1410-dynamisk-tilpasning-reflow-niva-aa/144)
+</span>
+
+<Divider/>
+\
+**Skiplink skal hoppe forbi breadcrumbs og direkte til hovedinnholdet.**
+
+Brukeren skal kunne navigere forbi gjentakende innhold uten å måtte gå gjennom breadcrumbs.
+
+<span data-size="sm"> 
+
+WCAG: [2.4.1 Hoppe over blokker](https://www.uutilsynet.no/veiledning/241-hoppe-over-blokker/1041)
+
+</span>
+
+<Divider/>
+\
+**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”
+
+<span data-size="sm"> 
+
+WCAG: [2.4.4 Formål med lenke (i kontekst)](https://www.uutilsynet.no/wcag-standarden/244-formal-med-lenke-i-kontekst-niva/106)
+
+</span>
+
+<Divider/>
+\
+**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.
+
+<span data-size="sm"> 
+
+WCAG: [3.2.3 Konsekvent navigering](https://www.uutilsynet.no/veiledning/323-konsekvent-navigering/1261)
+
+</span>
+
+<Divider/>
+\
+**Breadcrumbs skal ikke være eneste måte å navigere på.**
+
+Brukeren skal ha flere måter å navigere til innholdet på.
+
+<span data-size="sm"> 
+
+WCAG: [2.4.5 Flere måter](https://www.uutilsynet.no/veiledning/245-flere-mater/1252)
+
+</span>
+
+<Divider/>
+\
 ## 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.
@@ -1,6 +1,63 @@
-<Alert data-color="info">
-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).
-</Alert>
+## What you need to check
+
+**Button text must clearly describe the action.**
+
+Avoid vague text such as “Click here”.
+
+<span data-size="sm"> 
+
+WCAG: [2.4.4 Link purpose (in context)](https://www.uutilsynet.no/wcag-standarden/244-formal-med-lenke-i-kontekst-niva/106)
+
+</span>
+
+<Divider/>
+
+\
+**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.
+
+<span data-size="sm"> 
+
+WCAG: [2.5.3 Label in Name](https://www.uutilsynet.no/wcag-standarden/253-ledetekst-i-navn-niva/150)
+
+</span>
+
+<Divider/>
+\
+**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.
+
+<span data-size="sm"> 
+WCAG: [1.1.1 Non-text content](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87)
+</span>
+
+
+<Divider/>
+\
+**Icon-only button must have an accessible name that describes the action.**
+
+This applies when the button consists only of an icon.
+
+<span data-size="sm"> 
+WCAG: [4.1.2 Name, role, value](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121)
+</span>
+
+
+<Divider/>
+\
+**Using a loader in button must provide understandable feedback to screen reader users.**
+
+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.
+
+<span data-size="sm"> 
+WCAG: [4.1.3 Status messages](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152)
+</span>
+
+<Divider/>
 
 ## Avoid using disabled buttons
 

@@ -1,6 +1,64 @@
-<Alert data-color="info">
-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).
-</Alert>
+## Dette må du sjekke selv
+**Button-tekst skal tydelig beskrive hva som skjer når brukeren aktiverer den.**
+
+Unngå generiske tekster som “Klikk her”.
+
+
+<span data-size="sm"> 
+
+WCAG: [2.4.4 Formål med lenke (i kontekst)](https://www.uutilsynet.no/wcag-standarden/244-formal-med-lenke-i-kontekst-niva/106)
+
+</span>
+
+<Divider/>
+
+\
+**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.
+
+<span data-size="sm"> 
+
+WCAG: [2.5.3 Ledetekst i navn](https://www.uutilsynet.no/wcag-standarden/253-ledetekst-i-navn-niva/150)
+
+</span>
+
+<Divider/>
+
+\
+**Ikon i button med tekst skal være dekorativt og skjules for skjermlesere.**
+
+Ikonet skal ikke leses opp hvis teksten allerede beskriver handlingen.
+
+<span data-size="sm"> 
+WCAG: [1.1.1 Ikke-tekstlig innhold](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87)
+</span>
+
+
+<Divider/>
+\
+**Ikon-knapper skal ha et tilgjengelig navn som beskriver handlingen.**
+
+Dette gjelder når button kun består av et ikon.
+
+<span data-size="sm"> 
+WCAG: [4.1.2 Navn, rolle, verdi](https://www.uutilsynet.no/wcag-standarden/412-navn-rolle-verdi-niva/121)
+</span>
+
+
+<Divider/>
+\
+**Bruk av loader i button skal gi forståelig tilbakemelding til skjermleserbrukere.**
+
+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.
+
+<span data-size="sm"> 
+WCAG: [4.1.3 Statusbeskjeder](https://www.uutilsynet.no/wcag-standarden/413-statusbeskjeder-niva-aa/152)
+</span>
+
+<Divider/>
 
 
 ## Unngå å bruke deaktiverte knappar

@@ -1,5 +1,45 @@
-<Alert data-color="info">
-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).
-</Alert>
+## 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”.
+
+<span data-size="sm"> 
+WCAG: [2.4.4 Link purpose (in context)](https://www.uutilsynet.no/veiledning/244-formal-med-lenke-i-kontekst/1251)
+</span>
+
+
+<Divider/>
+\
+**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.
+
+<span data-size="sm"> 
+WCAG: [2.5.3 Label in Name](https://www.uutilsynet.no/wcag-standarden/253-ledetekst-i-navn-niva/150)
+</span>
+
+
+<Divider/>
+\
+**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.
+
+<span data-size="sm"> 
+WCAG: [1.1.1 Non-text content](https://www.uutilsynet.no/wcag-standarden/111-ikke-tekstlig-innhold-niva/87)
+</span>
+
+
+<Divider/>
+\
+**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`).
+
+<span data-size="sm"> 
+WCAG: [1.3.1 Info and relationships](https://www.uutilsynet.no/wcag-standarden/131-informasjon-og-relasjoner-niva/90)
+</span>
+
+<Divider/>