Errors in forms do not get focus

Archived Issue

Current Iteration of Issue

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 demonstrates impact of error pop up not receiving focus

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.

Accessibility/Usability

Accessibility
Usability

Impacted Assistive Technology

Screen Reader
Screen Magnifier

Impacted Type of Device

Computer
Mobile