Making forms accessible
Accessibility is a growing concern for websites. It is vital we make our websites as accessible as possible for all users. When working with forms in HTML, there are a few key areas in which we can improve accessibility, which we will now look at:
- Labeling form elements
- Grouping related form elements
- Validating user input
Labeling form elements correctly
We have already used labels for form elements, which is one of the most crucial ways of ensuring form accessibility. Whenever you use a label
element, you need to ensure you use the for
attribute, as follows:
<label for="first_name">First name:</label> <input id="first_name" type="text" name="first_name" />
This ensures that you explicitly associate a descriptive label with a form control.
Grouping related form elements
We previously grouped our form elements with the fieldset
element, but there is an additional element...