Your daily frequent11y newsletter, brought to you by @ChrisBAshton:
A beginner’s complete guide to form accessibility: the 5 things accessible forms needs and how to fix common errors
This is a handy guide to forms, covering the basics you need to get right:
- Required fields, fields with special formatting, or other unique parts of the form have clear instructions
- Clear navigation order using just the Tab key to go through the form
- The entire form can be completed using only a keyboard
- One accessible label is associated with each input and is readable by screen readers
- Usable and accessible form validation for form errors
Each of these is covered in more detail further on in the article. The most interesting section is the one on validation:
- Don’t use ‘default’ validation (built into the browser) as these don’t give clear instructions, have poor focus indication and don’t work well with assistive technologies
- Error messages should go both above the form and inline with the fields that need correcting
- Helper text should be programmatically tied to the fields, e.g. with
aria-describedby - You should set focus on the first error message, after submitting a form incorrectly
The article ends with some examples and videos demonstrating good forms.
Prefer longer newsletters? You can subscribe to week11y, fortnight11y or even month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.
