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.
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.
Related Issues
WCAG Reference
Accessibility/Usability
Accessibility
Usability
Impacted Assistive Technology
Screen Reader
Screen Magnifier
Impacted Type of Device
Computer
Mobile