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 -## Definition of Done +### Acceptatiecriteria bij gebruik - + -## Community implementaties +, + tags: ["developer"], + }, + { + title: "De Form Field Description staat op een logische plek", + sc: "1.3.2", + status: "", + component: , + tags: ["designer", "developer"], + }, + { + title: "Instructies in de Form Field Description zijn op een inclusieve manier beschreven.", + sc: "1.3.3", + status: "", + component: , + tags: ["designer", "contentmaker"], + }, + { + title: + "De tekst in de Form Field Description heeft een contrastratio van minimaal 4,5:1 met de achtergrondkleur.", + sc: "1.4.3", + status: "", + component: , + tags: ["designer"], + }, + { + title: + "De bezoeker kan de Form Field Description tot 400% vergroten zonder verlies van functionaliteit of informatie.", + sc: "1.4.10", + status: "", + component: , + tags: ["developer", "designer"], + }, + { + title: + "Als de Form Field Description in een andere taal is dan de taal van de pagina, dan heeft het een lang-attribuut met de juiste taalcode.", + sc: "3.1.2", + status: "", + component: , + tags: ["developer"], + }, + ]} +/> - +### Acceptatiecriteria van de component + + + +, + tags: ["developer"], + }, + { + title: "Als je de tekst van de Form Field Description vergroot tot 200% blijft deze in zijn geheel zichtbaar.", + sc: "1.4.4", + status: "", + component: , + tags: ["developer"], + }, + { + title: "Tekst in de Form Field Description blijft leesbaar wanneer de tekstafstand vergroot wordt. ", + sc: "1.4.12", + status: "", + component: , + tags: ["developer"], + }, + ]} +/> + +## Definition of Done + + ## Help component verbeteren + +## Community implementaties + +