nl-design-system · RenateRoke · Jan 9, 2026 · Jan 9, 2026 · Jan 9, 2026 · Jan 9, 2026
@@ -0,0 +1,5 @@
+---
+"@nl-design-system-unstable/documentation": minor
+---
+
+Toevoegen en gelijktrekken van interne WCAG-richtlijnen bij bestaande formulierrichtlijnen.
@@ -18,9 +18,12 @@ keywords:
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Code from "./_code.mdx";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
 
 <Code />
 
+<WCAG />
+
 <FooterInfo />
@@ -2,10 +2,8 @@
 
 # Toetsenbordbediening van een button
 
-Veel gebruikers navigeren door een formulier met hun Tab-toets om van focusable element naar focusable element te springen (buttons, links, invoervelden, radio buttons, checkboxes etc).
+Veel gebruikers navigeren door een formulier met hun Tab-toets om van interactief element naar interactief element te springen, zoals buttons, links, invoervelden, radio buttons en checkboxes.
 
 Krijgt een button de toetsenbordfocus, dan kan die met “enter” of “spatiebalk” worden geactiveerd. Zorg ervoor dat deze functionaliteit blijft werken als je een webcomponent bouwt, dit is standaard en verwacht gedrag van een button.
 
-Een consistente toetsenbordbediening is nodig om te voldoen aan het [WCAG-succescriterium 2.1.1 Toetsenbord](/wcag/2.1.1) (niveau A).
-
-En ook volg je dan de [WCAG-richtlijn 3.2 Voorspelbaar](https://www.w3.org/WAI/WCAG22/Understanding/predictable.html): maak het uiterlijk en de bediening van webpagina's voorspelbaar.
+Zorg ervoor dat de volgorde waarin interactieve elementen focus krijgen logisch is en dat er geen onverwachte veranderingen plaatsvinden als een bezoeker de button activeert.
@@ -0,0 +1,9 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 2.1.1 Toetsenbord](/wcag/2.1.1/)
+- [Succescriterium 3.2.1 Bij focus](/wcag/3.2.1/)
+- [Succescriterium 3.2.3 Consistente navigatie](/wcag/3.2.3/)
@@ -18,9 +18,12 @@ keywords:
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Code from "./_code.mdx";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
 
 <Code />
 
+<WCAG />
+
 <FooterInfo />
@@ -9,5 +9,3 @@ Versturen na bijvoorbeeld het kiezen van een optie kan de gebruiker verrassen: w
 Let wel: het gaat hier om het daadwerkelijk versturen van het formulier. Dus als de **context** verandert. Bijvoorbeeld: je gaat naar een bevestigingspagina.
 
 Het updaten van bijvoorbeeld zoekresultaten waarbij alleen de **content** verandert valt hier niet onder. Bijvoorbeeld: alleen het aantal zoekresultaten verandert, maar je blijft op dezelfde pagina.
-
-Een formulier niet onverwacht versturen is nodig om te voldoen aan het [WCAG-succescriterium 3.2.2 Bij Input](/wcag/3.2.2/) (niveau A).
@@ -0,0 +1,10 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 2.1.1 Toetsenbord](/wcag/2.1.1/)
+- [Succescriterium 3.2.1 Bij focus](/wcag/3.2.1/)
+- [Succescriterium 3.2.2 Bij input](/wcag/3.2.2/)
+- [Succescriterium 3.2.3 Consistente navigatie](/wcag/3.2.3/)
@@ -18,9 +18,12 @@ keywords:
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Code from "./_code.mdx";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
 
 <Code />
 
+<WCAG />
+
 <FooterInfo />
@@ -0,0 +1,8 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 1.4.4 Herschalen van tekst](/wcag/1.4.4/)
+- [Succescriterium 1.4.10 Reflow](/wcag/1.4.10/)
@@ -18,9 +18,12 @@ keywords:
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Code from "./_code.mdx";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
 
 <Code />
 
+<WCAG />
+
 <FooterInfo />
@@ -0,0 +1,8 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 2.4.6 Koppen en labels](/wcag/2.4.6/)
+- [Succescriterium 4.1.2 Naam, rol, waarde](/wcag/4.1.2/)
@@ -18,9 +18,12 @@ keywords:
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Code from "./_code.mdx";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
 
 <Code />
 
+<WCAG />
+
 <FooterInfo />
@@ -64,8 +64,3 @@ Deze optie heeft niet de voorkeur omdat er geen visuele tekst bij het icoontje s
 ```
 
 Voor het toekennen van toegankelijke namen aan SVG's bestaan ook andere technieken, Carie Fisher beschrijft ze in [<span lang="en">Accessible SVGs: Perfect Patterns For Screen Reader Users</span>](https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/).
-
-Een toegankelijke naam voor de button, is nodig om te voldoen aan één van de voorwaarden voor de WCAG-succescriteria:
-
-- [1.3.1 Info en relaties](/wcag/1.3.1) (niveau A).
-- [4.1.2 Naam, rol, waarde](/wcag/4.1.2) (niveau A).
@@ -0,0 +1,8 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 1.3.1 Info en relaties](/wcag/1.3.1)
+- [Succescriterium 4.1.2 Naam, rol, waarde](/wcag/4.1.2/)
@@ -19,9 +19,12 @@ keywords:
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Code from "./_code.mdx";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
 
 <Code />
 
+<WCAG />
+
 <FooterInfo />
@@ -6,10 +6,4 @@ Zorg ervoor dat tekst in afbeeldingen goed meeschaalt als de gebruiker inzoomt.
 
 Gebruik daarom liever geen jpg-, gif- of png-bestanden voor buttontekst. Maar gebruik bij voorkeur CSS om buttontekst mooi gestyled weer te geven. Dan heeft de gebruiker meer controle over de weergave en grootte van de tekst.
 
-Een schaalbare en flexibele weergave tekst in buttons is nodig om te voldoen aan de WCAG-succescriteria:
-
-- [1.4.4 Herschalen van tekst](/wcag/1.4.4) (niveau AA).
-- [1.4.10 Reflow](/wcag/1.4.10) (niveau AA)
-- [1.4.5 Afbeeldingen van tekst](/wcag/1.4.5) (niveau AA).
-
-![Een button met het label 'Verstuur uw vraag' daarnaast een vergroting waarbij de tekst korrelig wordt](https://raw.githubusercontent.com/nl-design-system/documentatie/assets/richtlijnen_formulier_buttons_label-as-image.png)
+![Een button met het label 'Verstuur uw vraag' met daarnaast een vergroting waarbij de tekst korrelig wordt](https://raw.githubusercontent.com/nl-design-system/documentatie/assets/richtlijnen_formulier_buttons_label-as-image.png)
@@ -0,0 +1,9 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 1.4.4 Herschalen van tekst](/wcag/1.4.4)
+- [Succescriterium 1.4.10 Reflow](/wcag/1.4.10)
+- [Succescriterium 1.4.5 Afbeeldingen van tekst](/wcag/1.4.5)
@@ -19,9 +19,12 @@ keywords:
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Code from "./_code.mdx";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
 
 <Code />
 
+<WCAG />
+
 <FooterInfo />
@@ -0,0 +1,12 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 1.4.3 Contrast (minimum)](/wcag/1.4.3/)
+- [Succescriterium 1.4.10 Reflow](/wcag/1.4.10)
+- [Succescriterium 2.1.1 Toetsenbord](/wcag/2.1.1/)
+- [Succescriterium 2.4.3 Focus volgorde](/wcag/2.4.3/)
+- [Succescriterium 3.3.2 Labels of instructies](/wcag/3.3.2/)
+- [Succescriterium 4.1.2 Naam, rol, waarde](/wcag/4.1.2/)
@@ -18,6 +18,10 @@ keywords:
 
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
+
+<WCAG />
+
 <FooterInfo />
@@ -0,0 +1,7 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 4.1.3 Statusberichten](/wcag/4.1.3/)
@@ -17,6 +17,10 @@ keywords:
 
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
+
+<WCAG />
+
 <FooterInfo />
@@ -6,8 +6,3 @@ Net zoals bij de foutmeldingen is het belangrijk dat de gebruiker de succesmeldi
 
 - Feedback van [screenreaders](/woordenlijst/#screenreader) en focusmanagement na submit.
 - Update van de `<title>` in het `<head>`-element.
-
-De succesmelding toegankelijk te maken voor alle gebruikers is nodig om te voldoen aan de WCAG-succescriteria:
-
-- [1.3.1 Info en relaties](/wcag/1.3.1) (niveau A).
-- [2.4.2 Paginatitel](/wcag/2.4.2) (niveau A).
@@ -0,0 +1,9 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 2.4.2 Paginatitel](/wcag/2.4.2)
+- [Succescriterium 2.4.3 Focus volgorde](/wcag/2.4.3/)
+- [Succescriterium 4.1.3 Statusberichten](/wcag/4.1.3/)
@@ -18,7 +18,12 @@ keywords:
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Code from "./_code.mdx";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
+
 <Code />
+
+<WCAG />
+
 <FooterInfo />
@@ -0,0 +1,7 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 3.2.6 Consistente hulp](/wcag/3.2.6/)
@@ -18,6 +18,10 @@ keywords:
 
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
+
+<WCAG />
+
 <FooterInfo />
@@ -0,0 +1,7 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 3.2.6 Consistente hulp](/wcag/3.2.6/)
@@ -18,7 +18,12 @@ keywords:
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Code from "./_code.mdx";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
+
 <Code />
+
+<WCAG />
+
 <FooterInfo />
@@ -0,0 +1,11 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 1.3.1 Info en relaties](/wcag/1.3.1)
+- [Succescriterium 1.3.2 Betekenisvolle volgorde](/wcag/1.3.2/)
+- [Succescriterium 2.4.3 Focus volgorde](/wcag/2.4.3/)
+- [Succescriterium 2.4.6 Koppen en labels](/wcag/2.4.6/)
+- [Succescriterium 3.3.2 Labels of instructies](/wcag/3.3.2/)
@@ -18,7 +18,12 @@ keywords:
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Code from "./_code.mdx";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
+
 <Code />
+
+<WCAG />
+
 <FooterInfo />
@@ -0,0 +1,11 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 1.3.1 Info en relaties](/wcag/1.3.1)
+- [Succescriterium 1.3.2 Betekenisvolle volgorde](/wcag/1.3.2/)
+- [Succescriterium 2.4.3 Focus volgorde](/wcag/2.4.3/)
+- [Succescriterium 2.4.6 Koppen en labels](/wcag/2.4.6/)
+- [Succescriterium 3.3.2 Labels of instructies](/wcag/3.3.2/)
@@ -18,7 +18,12 @@ keywords:
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Code from "./_code.mdx";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
+
 <Code />
+
+<WCAG />
+
 <FooterInfo />
@@ -0,0 +1,11 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 1.3.1 Info en relaties](/wcag/1.3.1)
+- [Succescriterium 1.3.2 Betekenisvolle volgorde](/wcag/1.3.2/)
+- [Succescriterium 2.4.3 Focus volgorde](/wcag/2.4.3/)
+- [Succescriterium 2.4.6 Koppen en labels](/wcag/2.4.6/)
+- [Succescriterium 3.3.2 Labels of instructies](/wcag/3.3.2/)
@@ -18,7 +18,12 @@ keywords:
 import FooterInfo from "@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md";
 import Code from "./_code.mdx";
 import Guideline from "./_guideline.md";
+import WCAG from "./_wcag.md";
 
 <Guideline />
+
 <Code />
+
+<WCAG />
+
 <FooterInfo />
@@ -0,0 +1,11 @@
+<!-- @license CC0-1.0 -->
+
+## Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
+
+Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
+
+- [Succescriterium 1.3.1 Info en relaties](/wcag/1.3.1)
+- [Succescriterium 1.3.2 Betekenisvolle volgorde](/wcag/1.3.2/)
+- [Succescriterium 2.4.3 Focus volgorde](/wcag/2.4.3/)
+- [Succescriterium 2.4.6 Koppen en labels](/wcag/2.4.6/)
+- [Succescriterium 3.3.2 Labels of instructies](/wcag/3.3.2/)
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,5 +9,3 @@ Versturen na bijvoorbeeld het kiezen van een optie kan de gebruiker verrassen: w
		Let wel: het gaat hier om het daadwerkelijk versturen van het formulier. Dus als de context verandert. Bijvoorbeeld: je gaat naar een bevestigingspagina.

		Het updaten van bijvoorbeeld zoekresultaten waarbij alleen de content verandert valt hier niet onder. Bijvoorbeeld: alleen het aantal zoekresultaten verandert, maar je blijft op dezelfde pagina.

		Een formulier niet onverwacht versturen is nodig om te voldoen aan het [WCAG-succescriterium 3.2.2 Bij Input](/wcag/3.2.2/) (niveau A).