Improve block mover labels for speech recognition software #5751
Conversation
afercia
added
the
[Focus] Accessibility (a11y)
| 1, | ||
| ) | ||
| } | ||
| </span> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Yes, let's use withInstanceId to ensure unique IDs. since two movers can be visible at the same time (hovering and selecting)
| aria-disabled={ isLast } | ||
| /> | ||
| <span id="editor-block-mover__up-description" className="editor-block-mover__description"> |
There was a problem hiding this comment.
Don't we have a specific className for these kind of labels? like reader-text or something?
There was a problem hiding this comment.
Yes there's screen-reader-text but I'd like the spans not to be read out as normal content. Hiding them with display: none prevents that and still works for aria-describedby.
| <svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" aria-hidden role="img" focusable="false"> | ||
| <path d="M12.293 6.086L9 9.379 5.707 6.086 4.293 7.5 9 12.207 13.707 7.5z" /> | ||
| </svg> | ||
| ); |
| @@ -0,0 +1,14 @@ | |||
| /** | |||
| * Module constants | |||
| */ | |||
There was a problem hiding this comment.
Not certain this comment is valid in a separate file
|
Note: I've removed the quotes from the strings used for the position info because JAWS (screen reader) was reading out them literally, for example: |
|
@youknowriad thanks 🎉 |
This PR tries to improve the block movers for use with speech recognition software.
Users will voice commands based on the visually displayed tooltip, however the accessible name of the block movers (their aria label attribute) doesn't match the displayed tooltip text. For more details please refer to the related issue #5750.
By matching the tooltip text with the aria-label, speech recognition software will execute the related command, e.g.:
Click Move up.The info about the position in the set of blocks is moved to a span element targeted with an aria-describedby attribute. Screen readers will announce in sequence:
notes:
withInstanceId, please let me know if that's desiredFixes #5750