PVince81
commented
2 years ago Open nickvergessen opened 2 years ago
PVince81
commented
2 years ago PVince81
commented
2 years ago ref verification symbol if we choose to add it to the upcoming generic input component: https://github.com/nextcloud/nextcloud-vue/issues/2866
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.