Appropriate labels or instructions are provided when content requires user input, form labels are always visible

Design Notes

Ensure forms have adequate labels and instructions for user to know how to complete a form

Provide clear instructions and descriptive labels for form fields to help people understand how to enter information into a web page.

Form labels should always be visible

Ensure a clear label is provided for all form fields in designs and the label persists when users interact with the form field. Indicating in designs that the placeholder should be used as the label is not sufficient.

Placeholders disappear when a user starts typing, they don't have full browser support and relying on them can make it hard for users to check their answers before submitting a form.

https://adamsilver.io/articles/placeholders-are-problematic/

Developer Notes

Reliant on design influence.

Testing Notes

To check, either:

Use the code to ensure that both the field and the label have matching for and ID attribute values, or that a form field contains a programmatic label, such as aria-label, that explains the purpose of the field.

Ensure that the relevant label is read by a screen reader, and the purpose of the form field is conveyed