-
Notifications
You must be signed in to change notification settings - Fork 18
3.3.2
Andrew Hick edited this page Jul 25, 2023
·
4 revisions
Labels or instructions are provided when content requires user input.
If there is a form.
Read text close to form fields and check the accessible name for potentially visually hidden labels. A label in this context does not mean the label
element, but rather any content 'labelling' a form field.
Check:
- any label can either be understood by itself or has instructions close to it - for example, radio buttons and checkboxes on their own without a question could make sense if the options were clear
- forms clearly label which fields are required and which are not - this can be done by either saying which are required and/or which are optional, unless they are all required or optional
- any format requirements or limitations for the form field (such as date format, password rules or maximum file size) are stated near the field - it's acceptable if this only shows on focus
- labels are visible to all, unless a form field's purpose is visually clear (for example with adjacent elements), then it can have a hidden label using an accessible name - using
placeholder
is technically fine as this is initially visible and programmatically determinable
- Labels and instructions should be before the form field visually and in the code, and labels for checkboxes and radio buttons should be after the field - you can check the order using the methods in 1.3.2 Meaningful Sequence
- Use the
label
andlegend
elements - Visual text labels are the most accessible - icons or symbols can sometimes provide additional context but should not be used by themselves
- Using asterisks to mark a field as required can be ambiguous and should be avoided unless its use is explained further, for example by noting "Fields marked with an asterisk (*) are required" at the start of the form
- Do not use
placeholder
s
No difference