diff --git a/.changeset/dusty-lemons-giggle.md b/.changeset/dusty-lemons-giggle.md new file mode 100644 index 00000000000..bda6ae2a3e5 --- /dev/null +++ b/.changeset/dusty-lemons-giggle.md @@ -0,0 +1,5 @@ +--- +"@nl-design-system-unstable/documentation": minor +--- + +Toegankelijkheidsacceptatiecriteria voor Form Field Description. diff --git a/docs/componenten/ac/NLDS/_wcag-1.3.1-nlds-description.md b/docs/componenten/ac/NLDS/_wcag-1.3.1-nlds-description.md new file mode 100644 index 00000000000..b365cb39483 --- /dev/null +++ b/docs/componenten/ac/NLDS/_wcag-1.3.1-nlds-description.md @@ -0,0 +1,14 @@ + + +De Form Field Description kan met `aria-describedby` aan het bijbehorende input-element worden gekoppeld. + +```html + +
Vul je voornaam en achternaam in.
+ +``` + +NL Design System richtlijnen: + +- [Toegankelijke descriptions bij formuliervelden](/richtlijnen/formulieren/descriptions/) +- [Toegankelijke formulieren](/richtlijnen/formulieren/) diff --git a/docs/componenten/ac/_wcag-1.3.1-description.md b/docs/componenten/ac/_wcag-1.3.1-description.md new file mode 100644 index 00000000000..366af02e3c1 --- /dev/null +++ b/docs/componenten/ac/_wcag-1.3.1-description.md @@ -0,0 +1,14 @@ + + +Koppel de Form Field Description met `aria-describedby` aan het bijbehorende input-element: + +```html + +Vul je voornaam en achternaam in.
+ +``` + +NL Design System richtlijnen: + +- [Toegankelijke instructies en beschrijvingen](/richtlijnen/formulieren/descriptions/) +- [Toegankelijke formulieren](/richtlijnen/formulieren/) diff --git a/docs/componenten/ac/_wcag-1.3.2-description.md b/docs/componenten/ac/_wcag-1.3.2-description.md new file mode 100644 index 00000000000..088bc829fcc --- /dev/null +++ b/docs/componenten/ac/_wcag-1.3.2-description.md @@ -0,0 +1,20 @@ + + +Zorg ervoor dat instructies die nodig zijn om te begrijpen wat er van de bezoeker verwacht wordt op een logische plek staan en gekoppeld zijn aan het formulierveld. + +De meest gebruiksvriendelijke plek voor instructies is tussen het label en het invoerveld. Als instructies ónder het veld staan, worden ze mogelijk bedekt door de autocomplete-functionaliteit van de browser. + +Een screenreader schakelt in een formulierveld over van leesmodus naar focusmodus. Als een bezoeker daarna instructies tússen de velden wil lezen, moet diegene weer handmatig terugschakelen naar de leesmodus. Koppel instructies daarom ook aan het formulierveld met `aria-describedby`. Op die manier wordt de beschrijving voorgelezen wanneer de toetsenbordfocus op het formulierveld staat. + +Voorbeeld: + +```html + +Vul je voornaam en achternaam in.
+ +``` + +NL Design System richtlijnen: + +- [Toegankelijke instructies en beschrijvingen](/richtlijnen/formulieren/descriptions/) +- [Toegankelijke formulieren](/richtlijnen/formulieren/) diff --git a/docs/componenten/form-field-description/index.mdx b/docs/componenten/form-field-description/index.mdx index f1c297b4593..2baa7c0dcfb 100644 --- a/docs/componenten/form-field-description/index.mdx +++ b/docs/componenten/form-field-description/index.mdx @@ -27,6 +27,20 @@ keywords: {/* @license CC0-1.0 */} import componentProgress from "@nl-design-system/component-progress/dist/index.json"; +import AcComponent from "@nl-design-system-unstable/documentation/componenten/ac/\_ac_component.md"; +import AcImplementatie from "@nl-design-system-unstable/documentation/componenten/ac/\_ac_implementatie.md"; +import IntroGebruik from "@nl-design-system-unstable/documentation/componenten/ac/\_component_gebruiken_intro.md"; +import Wcag131 from "@nl-design-system-unstable/documentation/componenten/ac/\_wcag-1.3.1-description.md"; +import Wcag131NLDS from "@nl-design-system-unstable/documentation/componenten/ac/NLDS/\_wcag-1.3.1-nlds-description.md"; +import Wcag132 from "@nl-design-system-unstable/documentation/componenten/ac/\_wcag-1.3.2-description.md"; +import Wcag1410 from "@nl-design-system-unstable/documentation/componenten/ac/\_wcag-1.4.10.md"; +import Wcag1412 from "@nl-design-system-unstable/documentation/componenten/ac/\_wcag-1.4.12.md"; +import Wcag143 from "@nl-design-system-unstable/documentation/componenten/ac/\_wcag-1.4.3.md"; +import Wcag144 from "@nl-design-system-unstable/documentation/componenten/ac/\_wcag-1.4.4.md"; +import Wcag312 from "@nl-design-system-unstable/documentation/componenten/ac/\_wcag-3.1.2.md"; +import Wcag324 from "@nl-design-system-unstable/documentation/componenten/ac/\_wcag-3.2.4-form.md"; +import Wcag133 from "@nl-design-system-unstable/documentation/wcag/summaries/\_1.3.3-summary.md"; +import { Checklist } from "@site/src/components/Checklist"; import { DefinitionOfDone, HelpImproveComponent, @@ -43,14 +57,100 @@ export const component = componentProgress.find((item) => item.number === issueN