How to Get Marking Required Fields Right
Showing which form fields must be completed, in a way that works visually and for assistive technology.
Marcus Adeyemi
Why does it matter?
Asterisks alone are ambiguous, and required state must be communicated programmatically as well as visually.
What are the numbers?
- required attribute communicates the requirement to assistive technology
- Visual indication needs explanation, not just a symbol
- Optional marking marking optional fields can be clearer when most are required
- Consistency the same convention should apply across a site
What should I do?
- Use the required attribute
- Explain the convention at the start of the form
- Mark the smaller group, whether required or optional
- Keep indication consistent sitewide
- Test announcements with a screen reader
What should I avoid?
Avoid:
- Asterisks with no explanation
- Required state shown only by color
- Different conventions on different forms
- Validation that only appears after submission
When should I get help?
Short answer Bring in help when forms are a main conversion path.
Where this comes from
- W3C Web Accessibility Initiative — Accessible forms
- MDN Web Docs — The Input element
The figures and practices above come from the sources listed.
Working on something like this?
We take on Performance & Accessibility work for teams who want it done once, properly. Tell us what you are building and we will tell you honestly whether we are the right studio for it. Start a project.
Where to go next
Spotted something wrong? Report an error on this page. We correct on the page and say what changed.
