Forms are interactive elements used to capture user-provided information. There are many aspects that make up a form including the form fields itself (also known as controls), instructions, error identification and form submission. Forms require an extensive amount of user interaction and therefore must be designed in a way that will ensure they are accessible and usable to all users regardless of disabilities.
To ensure accessibility, all forms should have
label elements. Text labels should describe the function of each form field. The label element should explicitly associate text with a form field.
Unique For attribute and ID
label element is present, a specific form control called the
FOR attribute, must be associated to it. A unique ID attribute must also be present that matches the same value as the FOR attribute of the label element. The FOR and the ID must be identical.
In addition to proper form labels and attributes, to ensure the accessibility of a form field, Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) should be used. WAI-ARIA is a technical specification that defines methods to create accessible web content. Aria attributes and properties that are useful for making accessible forms are (but not limited to) aria-label, aria-labeledby, aria-describedby, aria-required, aria-disabled, aria-hidden, aria-live, aria-expanded, roles and landmarks.
When the visual design cannot be accommodated with the label element, the title attribute should be used to identify form controls. For example, a Search field or a phone number field with separate components (area code and the number) may benefit the use of title attribute. The title attribute will not be visually displayed on the page but will be announced to assistive technology users when the field receives focus.
Use of Activate and Focus event handlers
When using “activate” and “focus” event-handlers, it is important to use them correctly to avoid sudden changes that could confuse or distract users. It may cause difficulty to complete an action as well. Actions linked to the “Onfocus” event are not controlled by the user and will be executed the moment a form field receives focus, without any acknowledgment from the user. This will be an unexpected behavior especially for assistive technology users. They may get confused while navigating through the form field elements triggered by a “focus” event-handler. To execute an action, events such as “Onclick”, “Onkeydown” or “Onkeypress” are used because they will listen to the user’s action/entry to trigger the associated function.
For the following HTML buttons, the function associated will be triggered only if the user clicks the button or presses a key.
- <button onclick="SubmitFormData()"> Submit </button>
- <button onkeypress= SubmitFormData()"> Submit </button>
Required sections in forms must be clearly labeled with a symbol or character to inform users that a section is required. Commonly, an asterisk (*) symbol is used to indicate a required form field. Color can be used to show a required form field, as long as it is not the only way to convey the required form field. If color is used it must be combined with a symbol or character to identify as a required form field. An instruction must also be provided to define the meaning of the symbols or characters. (e.g. required form fields are marked by asterisk "*")
Fieldset and Legends
A group of interrelated form fields should be code by
fieldset identifies the entire grouping and
legend identifies the grouping's descriptive text. Using
legend ensures that the text description is read to screen reader users when the grouping is navigated to.
Forms must always be properly validated for correct information and valid data entry. Validating the input notifies the user with form errors and allows them to correct the forms.
Form instructions should be provided to help users understand how to properly fill out the form.
For more information about accessible forms refer to the Best Practices for Accessible Forms page.
Why is it important?
Accessible forms make it visually and pragmatically easier for all users to understand the forms. Users can easily have associated forms and identify what information is asked of them. Additional reasons why form fields are important include:
- Assistive technology users will be able to know what information to input in each form field.
- Screen reader users navigate through a forms using the “Tab” key. Associated form labels are read for each form control when the user navigates to them. If the label is not properly labeled or associated with a form, the form instructions will not be read to assistive technology users.
- When form fields are not properly associated to their labels, assistive technology users will not know which label is related to which form.
- If form fields are not validated, users will not know about errors.