3.3.2

3.3.2 Labels or Instructions

WCAG says:

Labels or instructions are provided when content requires user input.

When this is applicable

If there is a form.

Check labels and instructions

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

Best practice

• 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 and legend 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 placeholders

Mobile app testing

No difference