Form guidelines: Labels #366
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
hidde
force-pushed
the
extend-form-guidelines
branch
from
e8ec42d to
5f46190
Compare
hidde
force-pushed
the
add-label-guidance
branch
from
d97ab33 to
cfe4168
Compare
hidde
force-pushed
the
add-label-guidance
branch
from
cfe4168 to
b033023
Compare
| </select> | ||
| ``` | ||
|
|
||
| Het geven van een goede toegankelijke naam aan formuliervelden is verplicht volgens de volgende WCAG-succescriteria: |
There was a problem hiding this comment.
dit kan nog iets concreter (en verwijzen naar 22 docs want die hebben de nieuwste CSS (long story)), zie suggesties hieronder
|
|
||
| Het geven van een goede toegankelijke naam aan formuliervelden is verplicht volgens de volgende WCAG-succescriteria: | ||
|
|
||
| - [2.4.6: Koppen en labels (niveau AA)](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels) |
There was a problem hiding this comment.
| - [2.4.6: Koppen en labels (niveau AA)](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels) | |
| - [2.4.6: Koppen en labels (niveau AA)](https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels): zegt dat een label het onderwerp of doel moet beschrijven |
| Het geven van een goede toegankelijke naam aan formuliervelden is verplicht volgens de volgende WCAG-succescriteria: | ||
|
|
||
| - [2.4.6: Koppen en labels (niveau AA)](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels) | ||
| - [3.3.2: Labels of instructies (niveau A)](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions) |
There was a problem hiding this comment.
| - [3.3.2: Labels of instructies (niveau A)](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions) | |
| - [3.3.2: Labels of instructies (niveau A)](https://www.w3.org/WAI/WCAG22/Understanding/labels-or-instructions): zegt dat formuliervelden een label of instructie moeten hebben (doel van die eis: gebruikers weten wat ze moeten invullen) |
|
|
||
| - [2.4.6: Koppen en labels (niveau AA)](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels) | ||
| - [3.3.2: Labels of instructies (niveau A)](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions) | ||
| - [4.1.2: Naam, rol, waarde (niveau A)](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) |
There was a problem hiding this comment.
| - [4.1.2: Naam, rol, waarde (niveau A)](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) | |
| - [4.1.2: Naam, rol, waarde (niveau A)](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value.html): zegt dat elementen (waaronder formuliervelden) een toegankelijke naam moeten hebben |
|
|
||
| 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. | ||
|
|
||
| [to-do] Afbeelding (of in HTML)goed/slecht |
There was a problem hiding this comment.
@rianrietveld Hier staat nog een to do!
There was a problem hiding this comment.
@jeffreylauwers Kun jij hier een plaatje voor maken?
Iets als
Met als alt: Voorbeeld van twee sets formuliervelden voor email en telefoonnummer. De eerste alleen een placeholder als zichtbaar label (fout) en de tweede met een permanent label boven het invoerveld (goed).
| - 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’. | ||
|
|
There was a problem hiding this comment.
@jeffreylauwers Kun je voor dit onderdeel "Zet het label boven het formulierveld" een afbeelding emaken, iets als:
Waarbij het duidelijk is dat het label onder het formulierveld plassten tot verwarring leidt.
Alt tekst: twee maal de weergave van verschillende adresvelden
een met de labels onder het formulierveld en een met de labels boven het formulierveld.
There was a problem hiding this comment.
@hidde @jeffreylauwers
Als Jeffrey nog twee plaatjes maakt (zie comments) is het wat mij betreft goed.
|
@hidde Bij links en diescption heb ik een kort introtekstje gedaan. Dat zou hier ook moeten. "Een label vertelt wat er bij een formulierveld moet worden gekozen of ingevuld. Belangrijk is dat iedereen deze informatie meekrijgt." En dan de rest van de tekst. |
|
Base aangepast naar |
Voorbeeld
Een paar keuzes/vragen:
<label>-element” ipv “label element” of “labelelement”. Verder goed om attributen steeds in ```'s te zetten, zodat ze als code worden weergegeven.:een hoofdletter of niet?ulen codevoorbeelden, wat is de netste plek om dit te doen?Specifiek voor Rian: