docs: wcag-1.4.1 ful page

docs/wcag/1.4.01.mdx

@@ -28,19 +28,11 @@ import Summary from "./summaries/_1.4.1-summary.md";
 
 <Summary />
 
-Een veelgemaakte fout is het weergeven van data in een grafiek door alleen een verschil in kleur te gebruiken.
-Iemand die slechtziend is of kleurenblind, weet dan niet welk lijntje bij welke data hoort.
-
-In de onderstaande afbeelding staan twee grafieken over de populariteit van browsers zien. De grafiek links laat de gegevens van de verschillende browsers zien in gekleurde lijntjes. De weergave rechts is dezelfde grafiek, maar dan in alleen grijstinten, om kleurenblindheid te simuleren. In deze grijze grafiek is het onmogelijk de data goed uit te lezen.
+<h2>Gerelateerde NL Design System-richtlijnen</h2>
 
-![Twee verschillende weergaven van een grafiek over de populariteit van verschillende webbrowsers, een met gekleurde lijntjes en daarnaast dezelfde grafiek in grijstinten.](https://raw.githubusercontent.com/nl-design-system/documentatie/assets/wcag-1-4-1-grafiek-fout.png)
-
-Hoe moet het dan wel? Gebruik naast kleur ook een andere manier om de data te onderscheiden. Bijvoorbeeld stippeltjes of streepjes
-
-In onderstaande afbeelding worden de lijntjes weergegeven zodat ze in grijstinten ook goed onderscheidbaar zijn.
-![Twee verschillende weergaven van een grafiek over de populariteit van verschillende webbrowsers, een met gekleurde maar verschillend gestreepte lijntjes en daarnaast dezelfde grafiek in grijstinten.](https://raw.githubusercontent.com/nl-design-system/documentatie/assets/wcag-1-4-1-grafiek-goed.png)
-
-De data browsergebruik komt van [statcounter.com](https://gs.statcounter.com/browser-market-share#monthly-200901-202412).
+- Stijl - Kleuren: [Vertrouw niet alleen op kleur](https://nldesignsystem.nl/richtlijnen/stijl/kleuren/niet-kleur-alleen)
+- Formulieren - Foutmeldingen: [Schrijf een foutmelding uit in tekst](https://nldesignsystem.nl/richtlijnen/formulieren/foutmeldingen/#schrijf-een-duidelijke-foutmelding)
+- Formulieren -Visueel ontwerp: [Geef fouten weer met meer dan alleen kleur](https://nldesignsystem.nl/richtlijnen/formulieren/visueel-ontwerp/fout-niet-alleen-met-kleur)
 
 ## Hoe te testen
 
@@ -69,6 +61,32 @@ Ook via de browser kun je de kleur uit een pagina verwijderen:
 - Voor FireFox: Open de inspector, kies de "Accessibility"-tab en selecteer bij Simulate Achromatopsia.
 - Voor Chrome: Open de inspector, selecteer het console, klik op de drie puntjes aan de linkerkant, kies Rendering en selecteer helemaal onderaan bij Emulate vision deficiencies "Achromatopsia".
 
+<h2>Veelgemaakte fouten</h2>
+
+<h3>Aangeven van een fout met alleen een rood randje</h3>
+
+Een rood randje rondom een formulierveld dat verplicht is, maar niet is ingevuld, geeft onvoldoende informatie.
+Gebruikers die kleurenblind zijn kunnen deze informatie missen.
+Schrijf daarom ook altijd een duidelijke foutmelding uit in tekst bij een formulierveld.
+
+Meer informatie over foutmeldingen aangeven in onze blogpost over Toegankelijke foutmeldingen in formulieren [Hoe geef ik aan of een vraag niet of niet goed is ingevuld?]
+
+<h3>Weergeven van data in een grafiek door alleen een verschil in kleur te gebruiken</h3>
+
+Een veelgemaakte fout is het weergeven van data in een grafiek door alleen een verschil in kleur te gebruiken.
+Iemand die slechtziend is of kleurenblind, weet dan niet welk lijntje bij welke data hoort.
+
+In de onderstaande afbeelding staan twee grafieken over de populariteit van browsers zien. De grafiek links laat de gegevens van de verschillende browsers zien in gekleurde lijntjes. De weergave rechts is dezelfde grafiek, maar dan in alleen grijstinten, om kleurenblindheid te simuleren. In deze grijze grafiek is het onmogelijk de data goed uit te lezen.
+
+![Twee verschillende weergaven van een grafiek over de populariteit van verschillende webbrowsers, een met gekleurde lijntjes en daarnaast dezelfde grafiek in grijstinten.](https://raw.githubusercontent.com/nl-design-system/documentatie/assets/wcag-1-4-1-grafiek-fout.png)
+
+Hoe moet het dan wel? Gebruik naast kleur ook een andere manier om de data te onderscheiden. Bijvoorbeeld stippeltjes of streepjes.
+
+In onderstaande afbeelding worden de lijntjes weergegeven zodat ze in grijstinten ook goed onderscheidbaar zijn.
+![Twee verschillende weergaven van een grafiek over de populariteit van verschillende webbrowsers, een met gekleurde maar verschillend gestreepte lijntjes en daarnaast dezelfde grafiek in grijstinten.](https://raw.githubusercontent.com/nl-design-system/documentatie/assets/wcag-1-4-1-grafiek-goed.png)
+
+De data browsergebruik komt van [statcounter.com](https://gs.statcounter.com/browser-market-share#monthly-200901-202412).
+
 ## Gebruikersonderzoek
 
 <CTAGebruikersonderzoek />