Status updates or confirmation messages are not announced by screen reader
What is the problem?
As an individual starts to enter required data in a form, a progress bar is updated. When they submit the form, a message is displayed to indicate success. Both of these messages should be made such that screen readers can announce them. Screen readers and other assistive technologies must be informed of notifications and other changes to the user interface. Without this is, it is highly unlikely that they will be able to find this information.
Live regions can cause immediate visual changes that are not announced by a screen reader
Common examples of live regions are:
- Edit box with autocomplete suggestions
- Dynamic search result, based on current text being typed
- Comment boxes with a character count
- Processing notifications
- Information or status displayed based on visitors input
JavaScript is used to change text being visually displayed on the screen, without consideration of assistive technologies
Add role="status" to the div, span, or paragraph that has changing text
A <div role="status"> cannot be added to the page with the new text. Rather, it must be on the page at load. New text can then be added, or updated, and the content of the ‘div’ will be read by screen readers.
Providing Live Region Notification
By adding ARIA attributes to live regions, you can notify people using screen readers that visual changes have occurred.