Form Field Label #226
Replies: 16 comments 7 replies
-
AmsterdamScreenshots / VariantenStorybook Figma Notities
|
Beta Was this translation helpful? Give feedback.
-
Den Haag
Screenshots / VariantenFigma - Huidig Notities
|
Beta Was this translation helpful? Give feedback.
-
DSO ToolkitScreenshots / VariantenStorybook Notities
|
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
Open FormulierenStorybook (in combinatie met Text input) Screenshots / VariantenStorybook No asterisks Notities
|
Beta Was this translation helpful? Give feedback.
-
Open GemeentenScreenshots / VariantenPatternlab Notities
|
Beta Was this translation helpful? Give feedback.
-
RotterdamScreenshots / VariantenNotities
|
Beta Was this translation helpful? Give feedback.
-
RVOScreenshots / VariantenStorybook Notities
|
Beta Was this translation helpful? Give feedback.
-
UtrechtScreenshots / VariantenStorybook Notities
|
Beta Was this translation helpful? Give feedback.
-
|
Is er voor 'Form field label' gekozen vs 'Label' om de naam meer gelijk te laten lopen met Form field description en Form field error message e.d.? De naam staat daarmee wat verder af van de HTML terminologie. |
Beta Was this translation helpful? Give feedback.
-
✨ Dit component is nu Help Wanted ✨Help je mee hem door de Community stappen te krijgen? |
Beta Was this translation helpful? Give feedback.
-
✨ Dit component is nu Community ✨Help je mee hem door de Candidate stappen te krijgen? |
Beta Was this translation helpful? Give feedback.
-
Candidate selectieproces: Is de component al ingesteld voor meerdere huisstijlen?Het kernteam heeft gekeken of Form Label van Gemeente Utrecht al geschikt is om richting Hall of Fame te gaan. Hiervoor willen we dat de component succesvol in tenminste 2 verschillende huisstijlen is ingezet. We hebben gekeken naar de huisstijl van Utrecht, Den Haag en Rotterdam en we zijn tot de volgende conclusie gekomen: 🎉 Jazeker! Met jullie hulp hebben we genoeg informatie verzameld om een goed instelbaar component als Candidate beschikbaar te gaan maken. |
Beta Was this translation helpful? Give feedback.
-
Candidate selectieproces: Is de component al ingezet in meerdere projecten?Omdat de Form Label van Utrecht geschikt is voor verschillende huisstijlen heeft het kernteam ook gekeken of hij al gebruikt wordt in productie, prototypes en templates. We hebben hiervoor is gekeken wie de component succesvol heeft ingezet en we zijn tot de volgende conclusie gekomen: 🎉 De component wordt onder andere gebruikt door:
|
Beta Was this translation helpful? Give feedback.
-
Candidate selectieproces: Is de component al meegenomen in een WCAG-EM audit?Om de Form Label van Gemeente Utrecht als een toegankelijk Candidate component beschikbaar te maken is het handig als we weten of de Community implementaties al helemaal toegankelijk kunnen worden ingezet. We hebben hiervoor gekeken of er een toegankelijkheidsverklaring beschikbaar was voor de projecten die in productie worden gebruikt. En: 🎉 Ja! We hebben de uitkomsten van de volgende WCAG-EM audit (1 of meerdere) kunnen vinden:
Notities voor toegankelijkheid📝 De problemen die we hebben gevonden hebben te maken met het toegankelijk inzetten van de component, zoals het niet of aan verkeerde invoervelden koppelen van labels, en alleen een asterisk gebruiken voor verplichte velden zonder ergens te benoemen wat een asterisk betekent. We gaan uiteraard goede documentatie schrijven om te helpen voorkomen dat deze toegankelijkheidsfouten ontstaan. |
Beta Was this translation helpful? Give feedback.
-
|
In de nieuwe Open Formulieren renderer maken we gebruik van de Utrecht Label community component, maar daar hebben we wat nuances aan moeten brengen:
|
Beta Was this translation helpful? Give feedback.






































Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
We willen graag meer leren over het Form Field Label component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?
Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.
Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!
Link naar bericht in Slack
Naam
Form Field Label
Doel
Toont een tekstlabel dat informeert over de in te vullen informatie.
Gerelateerde componenten
Form Field, Form Field Description, Form Field Option Label, Legend
Richtlijnen
Labels in een formulier - NL Design System
Onze richtlijnen rondom labels in formulieren.
Voorkom fouten, help de gebruiker - NL Design System
Onze richtlijnen rondom het markeren van verplicht of niet-verplichte velden in formulieren.
Onderzoek
Always use a label - Adam Silver
Adam Silver legt uit waarom labels altijd toegepast moeten worden en zichtbaar moeten zijn.
The problem with float labels and what to do instead - Adam Silver
Adam Silver legt uit waarom floating labels voor problemen zorgen.
Stop using Material Design text fields! - Matsuko Friedland
Matsuko Friedland legt uit waarom de Material manier van labels voor problemen zorgt.
4 common mistakes UI/UX designers make when trying to help users spot required form fields (and what user research shows is better) - Adam Silver
Adam Silver legt uit hoe je
verplichteoptionele velden het beste kunt markeren.Label Placement in Forms - UX matters
Onderzoek over de positie van labels.
Website Forms Usability: Top 10 Recommendations - Nielsen Norman Group
Checklist voor ontwerp van formulieren waarbij enkele punten betrekking hebben tot Form Field Labels.
Beta Was this translation helpful? Give feedback.
All reactions