Errors in forms do not get focus

Short Description

When there is an error, focus does not change to help correct the error

Long Description

  • The information about an error on a form entry is not always sequentially next to the entry where the error occurred according to how a screen reader navigates. As a result, once the user finds the error message, they then must search for the relevant form element in order to make the correction. A screen reader user has to spend extra time and energy to make a correction.
  • Visual information such as a graphic or color change might indicate where an error is to help a sighted user find it more easily, but a screen reader user cannot access the visual landmarks. It is helpful, instead if the error message is just before the form field with the error.
  • If a page displays errors after a submission, it is helpful if the focus goes directly to the first error, not the top of the page.
  • The focus of the screen magnifier means that a user cannot look at the whole screen at one time. As a result, any assistance finding important information is helpful. Also, visually putting information about an error next to the error helps a user not have to search the whole screen.

Example of Issue

Screen reader user demonstrating the impact of focus on correcting errors in forms.

Accessibility/Usability

Accessibility
Usability

Impacted Assistive Technology

Screen Reader
Screen Magnifier

Impacted Type of Device

Computer
Mobile

Recommendations

  • Visually, place information about an error next to the form field where the error exists.
  • Make sure a screen reader will navigate sequentially directly from information about the error to the relevant form field.
  • When information about an error appears, move the focus to the information about the error and the relevant form field.
  • Do not rely on visual cues to bring awareness to an error.