Forms

✎ Technique: Identify input purpose

Make it easier for people to complete input fields requesting personal information. People with mobility issues have difficulty entering data into the fields. People with cognitive disabilities may have difficulty remembering details. It may be hard for them to enter personal information due to memory loss, dyslexia, or other impairments.

Developers should use autocomplete on fields that collect personal data to explicitly identify the data type. Use the list of  Input Purposes for User Interface Components to select the correct value. Turn off autocomplete for sensitive information.

(Source: Knowbility article on input purpose)

... Read more about ✎ Technique: Identify input purpose

✎ Technique: Form error communication

Effectively and accessibly communicate form errors by:

  1. Communicating that a form has errors,
  2. Communicating any individual errors case by case, including clear guidance on how to address the error.

In part, this involves thoughtful content-writing to clearly and unambiguously help users recover from the error. But it also requires that error messages are made clear to screen-reader users, who may not otherwise be aware of them. This can...

Read more about ✎ Technique: Form error communication

✎ Technique: Form feedback with live regions

Providing form feedback accessibly helps users submit data more accurately and reduces the chance for error. For learning resources, easy access to feedback supports the learning process; for forms collecting data, good feedback helps to reduce the chance of input errors being made. 

When providing feedback on user input, JavaScript is often employed to print messages to the screen. Users looking at the screen will see the message appear in response to their actions. Screen-reader users who do not...

Read more about ✎ Technique: Form feedback with live regions

Provide helpful error messages

 

People with visual, cognitive and physical impairments are particularly prone to making errors when entering data through forms. When errors resulting from form input happen, it’s important to make sure that error messages are shown accessibly.

  • Provide error messages that give assistance: Describe the related problem in straightforward terms and, where possible, give advice on how to resolve them.
  • Make it easy to locate the problem: Programmatically associate each error message with its...
Read more about Provide helpful error messages

Provide name, role, and value information

Users of assistive technologies must understand what a custom control is and what it does. Custom controls that lack accessibility information become difficult or impossible to understand or operate. Using WAI-ARIA provides a way to fill in missing accessibility information so that assistive technologies can recognize custom controls as controls and not as div or span elements without semantic meaning or value.

  • Provide an accessible name for each custom component. An accessible name is effectively the label for a control, explaining what it does....
Read more about Provide name, role, and value information

Provide accessible labels and instructions

Forms allow users to enter data by typing or selecting from a set of options. When forms are not designed with accessibility in mind, people with disabilities are likely to have difficulty or even find it impossible to enter data without errors. So forms need to be designed so that the purpose of each control is clear.

  • Provide an accessible label for every control. Preferably, give each control a visible text label that explains its purpose. This is best done with an HTML label element that’s programmatically associated with the control....
Read more about Provide accessible labels and instructions