Status messages (feedback for screenreader users)
Nobody has claimed this yet.
- Dominant language
- PHP
- Stars
- 2.2k
- Forks
- 587
- Avg merge
- 18h 27m
- Merged PRs (30d)
- 333
Description
Problem description
When the user starts typing in a search field some results are shown immediately. To follow this success criterion screen reader users must be notified that there are search results, and how many there are, the status of the search. But it’s important that this information is not conveyed while the user is still typing, as this can be very disturbing. Using aria-live=“polite” is a good way oh handling it.
There are other places as well in the service where status messages are shown, but they’re never read by screen readers. An example is shown in the screenshot below where the user has tried to uncheck the favourite icon for a file and a message says that the user can’t change this setting.
Making sure that status messages are read when appropriate by screen readers is a vital part in making a service such as this accessible for screen reader users.
In the profile settings page, a verification symbol is used to verify when the user inputs personal data. This verification symbol is not communicated to screen readers. This and similar interactions need to work well for screen reader users and so need to be communicated. Again, aria-live is a good way of doing this. These also lack descriptions, more on that in 1.1.1.
The screenshot below shows the verification symbol.
Talk app
When searching for a conversation the search results change dynamically, but screen reader users aren’t notified that there are search results.
The same is true when searching for emojis.
Status changes in the chat are communicated visually, but they’re not communicated to screen reader users. This includes such things as new messages, when a conversation ends, and such.
Some checkboxes open new areas with status messages that must be communicated to screen reader users.
Suggested solution
When the result of an action is shown without reloading the page, such as the results of a search, make sure any messages regarding the results are read to screen reader users without moving focus.
This can be done by adding aria-live=“polite” to the text. When the contents are changed they will be read to the user.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by auditing the dynamic status messages in the search fields, Talk app, chat, emoji search, checkboxes, and profile settings described in the issue. Verify that result and action updates are announced politely to screen reader users without moving focus, including new messages and verification states. Done means the relevant non-reloading status changes are communicated appropriately.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100