Form guidelines: Labels (new setup) #393

rianrietveld · 2023-11-24T13:52:50Z

Deze vervangt #366.
Voegt de pagina met richtlijnen voor formulierlabels toe.

vercel · 2023-11-24T13:52:55Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
documentatie	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 27, 2023 10:53am

hidde · 2023-11-24T14:39:38Z

docs/richtlijnen/formulieren/00-alle-richtlijnen/01-labels.mdx

+<LabelText />
+<LabelTextCode />
+
+Deze richtlijnen worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? [Open een issue op GitHub](https://github.com/nl-design-system/documentatie/issues/new) met je suggesties.


Moeten we deze in aparte include zetten?

hidde · 2023-11-24T14:40:49Z

docs/richtlijnen/formulieren/00-alle-richtlijnen/_label-accessible-name-code.mdx

+
+<Guideline
+  appearance="dont"
+  title="een label zonder gekoppelde input. Door het label-element te gebruiken zonder fo` mis je de koppeling tussen het label en de input voor mensen die de visuele context niet waarnemen."


typo:

Suggested change

title="een label zonder gekoppelde input. Door het label-element te gebruiken zonder fo` mis je de koppeling tussen het label en de input voor mensen die de visuele context niet waarnemen."

title="een label zonder gekoppelde input. Door het label-element te gebruiken zonder for mis je de koppeling tussen het label en de input voor mensen die de visuele context niet waarnemen."

Het ID van dit blok wordt de hele title. Ik stel voor dat we naast een title en ook een description meegeven, om deze teksten wat te splitsten. Dan is het ook beter mogelijk om HTML/markdown te gebruiken in de description. Nu moet alles in een lange zin. Te te voegen aan: #387

hidde · 2023-11-24T14:43:06Z

docs/richtlijnen/formulieren/00-alle-richtlijnen/_label-accessible-name.md

+</select>
+```
+
+Het geven van een goede toegankelijke naam aan formuliervelden is verplicht volgens de volgende WCAG-succescriteria:


Ze verplichten elk een specifiek ding, ik vind deze zin daarom niet zo gelukkig.

What about

Suggested change

Het geven van een goede toegankelijke naam aan formuliervelden is verplicht volgens de volgende WCAG-succescriteria:

Het geven van een goede toegankelijke naam aan formuliervelden is verplicht volgens WCAG. Deze succescriteria zijn relevant:

hidde · 2023-11-24T14:47:45Z

docs/richtlijnen/formulieren/00-alle-richtlijnen/_label-always-visible-code.mdx

+<Guideline appearance="do" title="het label blijft zichtbaar, ook als de gebruiker gaat invullen.">
+  <Canvas language="html">
+    <label for="dier1">Wat is je lievelingsdier?</label>
+    <br />


moet hier echt een br?

Ik ga ff puzzelen in de CSS, ik wil liever hier geen style classes gebruiken, specifiek voor deze guideline weergaves.

hidde · 2023-11-24T14:49:54Z

docs/richtlijnen/formulieren/00-alle-richtlijnen/_label-always-visible.md

+
+De placeholder kan ook voor verwarring zorgen bij gebruikers. Is het al veld ingevuld? Zie het onderzoek [Placeholders in Form Fields Are Harmful](https://www.nngroup.com/articles/form-design-placeholders/) van de Nielsen Norman Group.
+
+Een label vertelt **wat** je moet invullen en een placeholder **hoe** je een formulierveld moet invullen. Voor een e-mailveld kan het label bijvoorbeeld “Jouw e-mailadres” zijn en de placeholder “[email protected]”.


Misschien hier ook nog op wijzen dat je “hoe” informatie ook als description kunt toevoegen, onder het label, of als onderdeel van het label, als in: het hoeft niet in een placeholder?

hidde · 2023-11-24T14:52:26Z

docs/richtlijnen/formulieren/00-alle-richtlijnen/_label-visible-accessible-name.md

+
+Als de toegankelijke naam niet begint met de zichtbare naam werkt dit niet goed. Dit kan gebeuren bij het verkeerd gebruik van het attribute `aria-label`. Met `aria-label` kan een formulierveld ook een toegankelijke naam worden gegeven, onzichtbaar voor de ziende gebruiker.
+
+Door te zorgen dat zichtbare naam en toegankelijke naam overeenkomen, voldoe je aan een WCAG-criterium: [2.5.3: Label in naam (Niveau A)](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html).


Mooi dit zo!

hidde · 2023-11-24T14:53:00Z

docs/richtlijnen/formulieren/01-toegankelijk.mdx

-    </FormField>
-  </Canvas>
-</Guideline>
+Lees hierover meer op de [richtlijnen over labels](http://localhost:3000/richtlijnen/formulieren/alle-richtlijnen/labels).


deze is nog met localhost

hidde · 2023-11-24T14:53:09Z

docs/richtlijnen/formulieren/02-duidelijk.mdx

-    </FormField>
-  </Canvas>
-</Guideline>
+Lees hierover meer op de [richtlijnen over labels](http://localhost:3000/richtlijnen/formulieren/alle-richtlijnen/labels).


deze is nog met localhost

hidde · 2023-11-24T14:53:24Z

docs/richtlijnen/formulieren/05-voorspelbaar.mdx

@@ -73,6 +73,7 @@ _Dit is verplicht om te voldoen aan WCAG 2.1, criterium [2.4.2 Paginatitel](http
 ## Velden onder elkaar

 Om iemand comfortabel een formulier te laten scannen, is de aanbeveling meerdere kolommen te vermijden. Plaats velden bij voorkeur onder elkaar.
+Lees ook de [richtlijnen over labels](http://localhost:3000/richtlijnen/formulieren/alle-richtlijnen/labels).


hidde · 2023-11-24T14:53:26Z

docs/richtlijnen/formulieren/05-voorspelbaar.mdx

-1. Het biedt voldoende ruimte voor labels van verschillende lengtes. Het kan zijn dat gebruikers vertaalsoftware gebruiken op de pagina, waardoor labels langer of korter kunnen zijn dan je verwacht.
-1. Dit werkt beter voor gebruikers die de tekst inzoomen
-1. Het biedt een natuurlijke ‘scan-lijn’
+Lees hierover meer op de [richtlijnen over labels](http://localhost:3000/richtlijnen/formulieren/alle-richtlijnen/labels).


rianrietveld · 2023-11-27T08:35:00Z

@hidde @Robbert @jeffreylauwers
Klaar voor publicatie?

jeffreylauwers · 2023-11-27T08:39:47Z

docs/richtlijnen/formulieren/00-alle-richtlijnen/01-labels.mdx

+# Labels
+
+Een label geeft aan welke gegevens de gebruiker bij een formulierveld in kan vullen.
+Voor de toegankelijkheid van labels en dus ook formuliervelden zijn de volgende de volgende punten belangrijk:


Twee keer 'de volgende'

hidde · 2023-11-27T09:40:04Z

docs/richtlijnen/formulieren/00-alle-richtlijnen/_label-accessible-name.md

+- Geef het label het attribute `for` met als waarde de ID van het bijbehorende formulierveld.
+
+<!-- prettier-ignore -->
+```html


syntax highlighting van deze is nog ontoegankelijk qua kleurcontrasten

Hiervoor is een apart issue aangemaakt: #394

jeffreylauwers

Dat las lekker weg :) Dit zijn mijn comments.

jeffreylauwers · 2023-11-27T08:41:15Z

docs/richtlijnen/formulieren/00-alle-richtlijnen/01-labels.mdx

+Een label geeft aan welke gegevens de gebruiker bij een formulierveld in kan vullen.
+Voor de toegankelijkheid van labels en dus ook formuliervelden zijn de volgende de volgende punten belangrijk:
+
+- Geef een formulierveld toegankelijke naam met een label.


Geef een formulierveld een toegankelijke naam met een label

jeffreylauwers · 2023-11-27T08:41:42Z

docs/richtlijnen/formulieren/00-alle-richtlijnen/01-labels.mdx

+- De zichtbare naam moet overeenkomen met de toegankelijke naam.
+- Zet het label boven het formulierveld.
+- Zorg ervoor dat het label altijd zichtbaar is.
+- Zet het label boven het formulierveld.


Deze is dubbelop.

jeffreylauwers · 2023-11-27T08:42:09Z

docs/richtlijnen/formulieren/00-alle-richtlijnen/01-labels.mdx

+- Zorg ervoor dat het label altijd zichtbaar is.
+- Zet het label boven het formulierveld.
+- Zet alleen tekst in het label.
+- Gebruik duidelijke labelteksten


Mist een punt.

jeffreylauwers · 2023-11-27T08:47:55Z

docs/richtlijnen/formulieren/00-alle-richtlijnen/_label-visible-accessible-name.md

+
+Als de toegankelijke naam niet begint met de zichtbare naam werkt dit niet goed. Dit kan gebeuren bij het verkeerd gebruik van het attribute `aria-label`. Met `aria-label` kan een formulierveld ook een toegankelijke naam worden gegeven, onzichtbaar voor de ziende gebruiker.
+
+Door te zorgen dat zichtbare naam en toegankelijke naam overeenkomen, voldoe je aan een WCAG-criterium: [2.5.3: Label in naam (Niveau A)](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html).


Door te zorgen dat de zichtbare naam...

jeffreylauwers · 2023-11-27T09:03:10Z

docs/richtlijnen/formulieren/00-alle-richtlijnen/_label-above-field.md

+
+- Het biedt voldoende ruimte voor labels van verschillende lengtes. Het kan zijn dat gebruikers vertaalsoftware gebruiken op de pagina, waardoor labels langer of korter kunnen zijn dan je verwacht.
+- Dit werkt beter voor gebruikers die de tekst inzoomen.
+- Het biedt een natuurlijke ‘scan-lijn’.


Misschien nog even toelichten wat we met 'scan-lijn' bedoelen voor als men hier niet bekend mee is? Bijvoorbeeld zoiets als "Door labels, formuliervelden en acties verticaal uit te lijnen, wordt een natuurlijke 'scan-lijn' gecreëerd. Hierdoor kunnen mensen hun aandacht gemakkelijk op deze lijn richten."

jeffreylauwers · 2023-11-27T10:29:15Z

docs/richtlijnen/formulieren/00-alle-richtlijnen/_label-above-field.md

+
+Waarom is dit belangrijk? Mensen lezen van boven naar beneden en verwachten dat de informatie in die volgorde staat.
+
+Je brein verbindt automatisch wat er bij elkaar is geplaatst, dus zorg er ook voordat het label visueel dicht bij het formulierveld staat. Dan is duidelijk wat bij elkaar hoort.


Misschien kunnen we hier met een link verwijzen naar de Stijl richtlijnen rondom ruimte? En dan met name dit stukje: https://www.nldesignsystem.nl/richtlijnen/stijl/ruimte#ontwerpen-met-ruimte:~:text=Gebruik%20ruimte%20om%20relaties%20te%20cre%C3%ABren%20tussen%20elementen.

hidde

LGTM, dank voor alle comments @jeffreylauwers !

docs: Add label guidance

7572588

vercel bot deployed to Preview November 24, 2023 13:54 View deployment

hidde reviewed Nov 24, 2023

View reviewed changes

rianrietveld added 6 commits November 27, 2023 09:22

add form footer info

8d94a1f

remove break

a2bc329

typo

8f7d8df

adds footer info

9a4e10b

change local url

c1a2943

text adjustmenst

a6325d5

vercel bot deployed to Preview November 27, 2023 08:28 View deployment

change local url

17c8d99

rianrietveld requested review from Robbert and jeffreylauwers November 27, 2023 08:35

jeffreylauwers reviewed Nov 27, 2023

View reviewed changes

vercel bot deployed to Preview November 27, 2023 08:44 View deployment

hidde reviewed Nov 27, 2023

View reviewed changes

docs: change text sidebas and fix typo

73343ca

vercel bot deployed to Preview November 27, 2023 09:57 View deployment

jeffreylauwers reviewed Nov 27, 2023

View reviewed changes

docs: typos and addition text

8d20751

vercel bot deployed to Preview November 27, 2023 10:53 View deployment

hidde approved these changes Nov 27, 2023

View reviewed changes

hidde merged commit 5892c6a into main Nov 27, 2023
6 checks passed

hidde deleted the add-label-guideline-new-setup branch November 27, 2023 11:15

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Form guidelines: Labels (new setup) #393

Form guidelines: Labels (new setup) #393

rianrietveld commented Nov 24, 2023 •

edited

Loading

vercel bot commented Nov 24, 2023 •

edited

Loading

hidde Nov 24, 2023

hidde Nov 24, 2023

rianrietveld Nov 27, 2023 •

edited

Loading

hidde Nov 24, 2023

hidde Nov 24, 2023

rianrietveld Nov 27, 2023

hidde Nov 24, 2023

hidde Nov 24, 2023

hidde Nov 24, 2023

hidde Nov 24, 2023

hidde Nov 24, 2023

hidde Nov 24, 2023

rianrietveld commented Nov 27, 2023

jeffreylauwers Nov 27, 2023

hidde Nov 27, 2023

rianrietveld Nov 27, 2023 •

edited

Loading

jeffreylauwers left a comment

jeffreylauwers Nov 27, 2023

jeffreylauwers Nov 27, 2023

jeffreylauwers Nov 27, 2023

jeffreylauwers Nov 27, 2023

jeffreylauwers Nov 27, 2023

jeffreylauwers Nov 27, 2023

hidde left a comment

	title="een label zonder gekoppelde input. Door het label-element te gebruiken zonder fo` mis je de koppeling tussen het label en de input voor mensen die de visuele context niet waarnemen."
	title="een label zonder gekoppelde input. Door het label-element te gebruiken zonder for mis je de koppeling tussen het label en de input voor mensen die de visuele context niet waarnemen."

	Het geven van een goede toegankelijke naam aan formuliervelden is verplicht volgens de volgende WCAG-succescriteria:
	Het geven van een goede toegankelijke naam aan formuliervelden is verplicht volgens WCAG. Deze succescriteria zijn relevant:


		De placeholder kan ook voor verwarring zorgen bij gebruikers. Is het al veld ingevuld? Zie het onderzoek [Placeholders in Form Fields Are Harmful](https://www.nngroup.com/articles/form-design-placeholders/) van de Nielsen Norman Group.

		Een label vertelt wat je moet invullen en een placeholder hoe je een formulierveld moet invullen. Voor een e-mailveld kan het label bijvoorbeeld “Jouw e-mailadres” zijn en de placeholder “[email protected]”.


		Als de toegankelijke naam niet begint met de zichtbare naam werkt dit niet goed. Dit kan gebeuren bij het verkeerd gebruik van het attribute `aria-label`. Met `aria-label` kan een formulierveld ook een toegankelijke naam worden gegeven, onzichtbaar voor de ziende gebruiker.

		Door te zorgen dat zichtbare naam en toegankelijke naam overeenkomen, voldoe je aan een WCAG-criterium: [2.5.3: Label in naam (Niveau A)](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html).


		Waarom is dit belangrijk? Mensen lezen van boven naar beneden en verwachten dat de informatie in die volgorde staat.

		Je brein verbindt automatisch wat er bij elkaar is geplaatst, dus zorg er ook voordat het label visueel dicht bij het formulierveld staat. Dan is duidelijk wat bij elkaar hoort.

Form guidelines: Labels (new setup) #393

Form guidelines: Labels (new setup) #393

Conversation

rianrietveld commented Nov 24, 2023 • edited Loading

vercel bot commented Nov 24, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rianrietveld Nov 27, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rianrietveld commented Nov 27, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rianrietveld Nov 27, 2023 • edited Loading

Choose a reason for hiding this comment

jeffreylauwers left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hidde left a comment

Choose a reason for hiding this comment

rianrietveld commented Nov 24, 2023 •

edited

Loading

vercel bot commented Nov 24, 2023 •

edited

Loading

rianrietveld Nov 27, 2023 •

edited

Loading

rianrietveld Nov 27, 2023 •

edited

Loading