Accessibility in web forms
Explain the form
The most important first step for an accessible web form is the content around the form itself. Make sure your instructions are brief, clear, and set the visitor’s expectations properly. Explain what filling out the form is going to accomplish for them. In the example of a contact form, explain up front how soon a response should be expected. If you are setting your form up to have multiple pages, it is very important to tell the visitor how long the form really is.
Identify required fields
Our forms automatically identify when you have set a field to be required, but it is good to indicate at the start of the form how required fields are indicated:
* indicates required fields
Use clear labels
For every form field, a “Field Label” and “Description” can be set. While the description is optional, the field label is required for good web accessibility. While it may be clear to you what a form field is for, a visitor using a screen reader relies on form field labels. The optional description can give additional guidance, when necessary.
Labels for checkbox and radio button sets: There may be times when a checkbox (or radio button) may seem self-explanatory, for example:
☑ please add me to your mailing list
The above example still needs a proper label for web accessibility, such as this improvement:
Join our mailing list
☑ please add me to your mailing list
Placeholder text can be helpful
Sometimes it can be useful to give visitors a hint about information you are requesting. If you want to show an example of what you want, placeholder text can appear inside the form field. Placeholder text will go away when the visitor starts typing in the field, and is not included in a form submission. This option is available in the “Appearance” tab of the form field options.
In most cases, a clear form label and description are sufficient for a form field.
Use text buttons
Our form system uses text buttons by default. While there is an option to make the button an image, this should be avoided for proper web accessibility. By default, the submit button says “Submit” but you can customize this text for the purpose of the form. For example, if the form is to subscribe to a newsletter, the button should say “Subscribe.” This may be set in “Form options.”