diff --git a/apps/www/app/content/components/avatar/en/accessibility.mdx b/apps/www/app/content/components/avatar/en/accessibility.mdx index 1ca5464e70..c79624ff09 100644 --- a/apps/www/app/content/components/avatar/en/accessibility.mdx +++ b/apps/www/app/content/components/avatar/en/accessibility.mdx @@ -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. - - - 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 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. - - 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 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”. - - 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 87c345beff..c26d5d8a27 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 [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. + + +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/veiledning/241-hoppe-over-blokker/1041) + + + + +\ +**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-formal-med-lenke-i-kontekst-niva/106) + + + + +\ +**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/veiledning/323-konsekvent-navigering/1261) + + + + +\ +**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/veiledning/245-flere-mater/1252) + + + ## 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 48f7ece393..ca33b68d08 100644 --- a/apps/www/app/content/components/breadcrumbs/no/accessibility.mdx +++ b/apps/www/app/content/components/breadcrumbs/no/accessibility.mdx @@ -1,9 +1,66 @@ - -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 [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. + + +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/veiledning/241-hoppe-over-blokker/1041) + + + + +\ +**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 Formål med lenke (i kontekst)](https://www.uutilsynet.no/wcag-standarden/244-formal-med-lenke-i-kontekst-niva/106) + + + + +\ +**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 Konsekvent navigering](https://www.uutilsynet.no/veiledning/323-konsekvent-navigering/1261) + + + + +\ +**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/veiledning/245-flere-mater/1252) + + + + +\ ## 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. diff --git a/apps/www/app/content/components/button/en/accessibility.mdx b/apps/www/app/content/components/button/en/accessibility.mdx index 148e41e643..30de8017c3 100644 --- a/apps/www/app/content/components/button/en/accessibility.mdx +++ b/apps/www/app/content/components/button/en/accessibility.mdx @@ -1,6 +1,63 @@ - -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”. + + + +WCAG: [2.4.4 Link purpose (in context)](https://www.uutilsynet.no/wcag-standarden/244-formal-med-lenke-i-kontekst-niva/106) + + + + + +\ +**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 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.** + +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, 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) + + + ## 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..9186a0f5c9 100644 --- a/apps/www/app/content/components/button/no/accessibility.mdx +++ b/apps/www/app/content/components/button/no/accessibility.mdx @@ -1,6 +1,64 @@ - -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 Formål med lenke (i kontekst)](https://www.uutilsynet.no/wcag-standarden/244-formal-med-lenke-i-kontekst-niva/106) + + + + + +\ +**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, 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) + + + ## Unngå å bruke deaktiverte knappar diff --git a/apps/www/app/content/components/card/en/accessibility.mdx b/apps/www/app/content/components/card/en/accessibility.mdx index 644f1d5c9c..748e41ce38 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..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,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