Accessibility changes: fix for screen readers not identifying options properly #1007
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Use aria-role and aria-activedescendant in order to shift DOM focus properly when using JAWS screen reader.
This was referenced Jun 26, 2019
Owner
| Wow 😍 This is likely one of the best PRs I’ve seen! Thank you so much. Got to release it this weekend. |
lucapircher pushed a commit to towa-digital/vue-multiselect that referenced this pull request Oct 2, 2019
… properly (shentao#1007) * Accessibility (shentao#1) Use aria-role and aria-activedescendant in order to shift DOM focus properly when using JAWS screen reader. * remove some deprecated code
| @shentao This accessibility update looks great! I've been experiencing issues trying to use the component with screen readers and it seems like this might address those issues. Has this been included in a release yet? |
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
Some accessibility testers found some issues with how vue-multiselect interacts with the JAWS screen reader and the NVDA screen reader, when testing a project I work on.
When using JAWS, the automatic forms modes that JAWS implements prevents the user from navigating the vue-multiselect. The first time the user hits the down arrow it works fine, but at the same time JAWS automatic forms mode causes JAWS to leave forms mode and any following presses on the down arrow do not function properly. This can be fixed using role="application" on your multiselect, however it brings about the following issue that also occurs in NVDA. See issue #1010.
When using JAWS (with role="application") or when using NVDA, the text of the highlighted option is not read by the screen reader when navigating the vue-multiselect with the arrow keys. See issue #1009.
The changes in my request implement aria-activedescendant on the input element of the vue-multiselect. This attribute allows us to change the active child that has focus, which is picked up by screen readers, meaning that the options of the vue-multiselect are read to users with visual impairments.