Accessibility in forms
It is important to make sure that your forms can be completed by all users. Making a form accessible often results in a better user experience for users without disabilities as well.
Associate labels with inputs
Labels need to be descriptive and programmatically associated to the input field they describe.
Do not use placeholder text instead of a label. Placeholder text can often be hard for people with low vision to see due to low contrast. Placeholder text can also be frustrating for people with short term memory issues because it disappears when the field takes focus or when the user starts typing.
When you are asking one question per page, you should make the question the page heading
h1 as well as the form
legend to avoid any duplication of content.
If you’re asking multiple questions per page, do not use the first question as the page heading.
For radio buttons and checkboxes, place the label to the right of the form control. This makes it easier to align multiple checkboxes or radio buttons. Stacking groups of radio buttons and checkboxes vertically helps users who use screen magnifiers.
Further information: Labeling Controls (Web Accessibility Initiative)
fieldset elements to group related form controls. The first element inside a fieldset must be a
legend element which describes the group.
The label for radio buttons and checkboxes should be associated with the answer and not the related question. Correct use of fieldset and legend elements will help users of assistive technology to understand the relationship between the question and the possible answers.
Further information: Grouping Controls (Web Accessibility Initiative)
Use autocomplete attributes
Users can benefit when common input fields are automatically populated with values stored by their browser. In HTML, use the autocomplete attribute to identify the purpose of the field so that the automated input will be correct. This can be particularly beneficial to users with some cognitive disabilities.
Further information: Input Purposes for User Interface Components (WCAG 2.1)
Provide clear error messaging to help users understand when there has been an error and how to resolve it.
Provide a summary list of validation errors at the top of the page and show individual error messages next to the specific fields that have errors. If possible, include the inline error message as part of the programmatic label so that a screen reader user can hear the error when the field has focus.
For longer forms, provide links from the summary error list which place focus on the field in error.
Further information: Validating Input (Web Accessibility Initiative)
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: email@example.com