For any element that requires user input, concise labels and/or instructions are provided.
What to do:
- Assign a visible label for every form field or area of user engagement/control (e.g. where you can select an input from a list of options)
- Inside the code, make sure labels are associated with the appropriate form fields
- Do not overdo instructions, one word or a few can suffice
- Provide examples of expected input formats or structure data input so that the expected format must be entered
- Conspicuously mark required fields with an icon
Resources:
- Great tutorial on creating accessible forms (YouTube – 51 min 34 secs)
Plain English Explanation:
Every element that allows for user input should have clear, concise, descriptive labels and, where applicable, instructions.
A label could be “First Name”.
An instruction could be “All fields marked with an * are required.”
It’s very important that you don’t overdo your instructions and bog down the process of inputting data.
For example, rather than simply labeling a form field as “email”, you put:
“your email that you prefer to receive our newsletter at”
The purpose of this success criterion is to make it easy to understand what data input is being asked for.
The above reference video covers much more than just 3.3.2; guidance for multiple other success criteria are baked inside of it. It’s a tremendous reference for both developers and website owners.
Website owners will better understand form accessibility and developers will receive detailed instructions on how to create accessible forms.
