Criteria voor Form Field Description

.changeset/dusty-lemons-giggle.md

@@ -0,0 +1,5 @@
+---
+"@nl-design-system-unstable/documentation": minor
+---
+
+Toegankelijkheidsacceptatiecriteria voor Form Field Description.

docs/componenten/ac/NLDS/_wcag-1.3.1-nlds-description.md

@@ -0,0 +1,14 @@
+<!-- @license CC0-1.0 -->
+
+De Form Field Description kan met `aria-describedby` aan het bijbehorende input-element worden gekoppeld.
+
+```html
+<label for="name">Naam</label>
+<p id="description-name">Vul je voornaam en achternaam in.</p>
+<input id="name" aria-describedby="description-name" autocomplete="name" />
+```
+
+NL Design System richtlijnen:
+
+- [Toegankelijke descriptions bij formuliervelden](/richtlijnen/formulieren/descriptions/)
+- [Toegankelijke formulieren](/richtlijnen/formulieren/)

docs/componenten/ac/_wcag-1.3.1-description.md

@@ -0,0 +1,14 @@
+<!-- @license CC0-1.0 -->
+
+Koppel de Form Field Description met `aria-describedby` aan het bijbehorende input-element:
+
+```html
+<label for="name">Naam</label>
+<p id="description-name">Vul je voornaam en achternaam in.</p>
+<input id="name" aria-describedby="description-name" autocomplete="name" />
+```
+
+NL Design System richtlijnen:
+
+- [Toegankelijke instructies en beschrijvingen](/richtlijnen/formulieren/descriptions/)
+- [Toegankelijke formulieren](/richtlijnen/formulieren/)

docs/componenten/ac/_wcag-1.3.2-description.md

@@ -0,0 +1,20 @@
+<!-- @license CC0-1.0 -->
+
+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
+<label for="name">Naam</label>
+<p id="description-name">Vul je voornaam en achternaam in.</p>
+<input id="name" aria-describedby="description-name" autocomplete="name" />
+```
+
+NL Design System richtlijnen:
+
+- [Toegankelijke instructies en beschrijvingen](/richtlijnen/formulieren/descriptions/)
+- [Toegankelijke formulieren](/richtlijnen/formulieren/)

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
 
 <Introduction component={component} headingLevel={1} description={description} />
 
-## Definition of Done
+### Acceptatiecriteria bij gebruik
 
-<DefinitionOfDone component={component} headingLevel={3} />
+<AcImplementatie />
 
-## Community implementaties
+<Checklist
+  headingLevel="4"
+  items={[
+    {
+      title: "De Form Field Description is gekoppeld aan het bijbehorende input-element.",
+      sc: "1.3.1",
+      status: "",
+      component: <Wcag131 />,
+      tags: ["developer"],
+    },
+    {
+      title: "De Form Field Description staat op een logische plek",
+      sc: "1.3.2",
+      status: "",
+      component: <Wcag132 />,
+      tags: ["designer", "developer"],
+    },
+    {
+      title: "Instructies in de Form Field Description zijn op een inclusieve manier beschreven.",
+      sc: "1.3.3",
+      status: "",
+      component: <Wcag133 />,
+      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: <Wcag143 />,
+      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: <Wcag1410 />,
+      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: <Wcag312 />,
+      tags: ["developer"],
+    },
+  ]}
+/>
 
-<Implementations component={component} headingLevel={3} />
+### Acceptatiecriteria van de component
+
+<AcComponent />
+
+<Checklist
+  headingLevel="4"
+  items={[
+    {
+      title: "De Form Field Description kan aan een input-element gekoppeld worden.",
+      sc: "1.3.1",
+      status: "",
+      component: <Wcag131NLDS />,
+      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: <Wcag144 />,
+      tags: ["developer"],
+    },
+    {
+      title: "Tekst in de Form Field Description blijft leesbaar wanneer de tekstafstand vergroot wordt. ",
+      sc: "1.4.12",
+      status: "",
+      component: <Wcag1412 />,
+      tags: ["developer"],
+    },
+  ]}
+/>
+
+## Definition of Done
+
+<DefinitionOfDone component={component} headingLevel={3} />
 
 ## Help component verbeteren
 
 <HelpImproveComponent component={component} headingLevel={3} />
+
+## Community implementaties
+
+<Implementations component={component} headingLevel={3} />