Improve accessability of UI #47
Merged
Conversation
This file contains 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
Because vmsg appends its controls to the end of the DOM, it is not easy to focus to the record button when the dialog is launched as keyboard-users need to tab to through the page to the end. Adding `recordBtn.focus()` jumps the focus point right to the dialog, aiding navigation when then dialog is opened. Additionally, when recording is started, hiding the record button can cause focus to jump to the beginning of the page, re-focusing on the stop button ensures that keyboard users have the stop button focused without re-navigating to it. Similarly, when stopping recording, shift the focus back to the newly visible record button. In addition to these focus changes, add title text to the buttons. Their purpose is otherwise hidden from screen-readers.
|
Thanks. Nice videos :) |
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Because vmsg appends its controls to the end of the DOM, it is not easy to
focus to the record button when the dialog is launched as keyboard-users
need to tab to through the page to the end of the DOM where the dialog lives.
Here is an example of what it is like to interact with vmsg in its current state using the built-in Apple MacOS screen reader, "VoiceOver":
https://youtu.be/TT7-0h-5iOQ
Adding
recordBtn.focus()when the record dialog is drawn jumps the focus point right to the dialog, prevents the need for extra navigation and allows the record button to be activated right away.What happens when recording is started or stopped is that the record/stop buttons are hidden, causing focus to jump to a different part of the page. Adding
stopBtn.focus()andrecordBtn.focus()triggers when buttons are swapped ensures thatkeyboard users can access the buttons without re-navigating to them.
In addition to these focus changes, this PR adds title text to the buttons. Their purpose is
otherwise hidden from screen-readers.
Here is an example of what it is like to interact with vmsg with these changes:
https://youtu.be/_YxWQzVhCwI