Problem/Motivation
Drupal has several buttons or links where the text is visibly hidden and replaced with a small icons. This poses challenges to speech recognition users because they don't know what to say to trigger those commands. For buttons or links where the text is visible (e.g., "Home" or "Menu") speech rec users can simply say "Click Home" or "Click Menu". For icons without text, they can guess if the names of the controls are intuitive, but in Drupal's case they aren't.
Steps to reproduce
Proposed resolution
- Add a title attribute to each control in order to reveal the text for that control to users when they hover. They'll need to use mouse commands at least once to discover the text, but subsequently they can use that text in a voice commands, which will be much more efficient.
- Consider using more intuitive text. For example, rather than "Vertical orientation" and "Horizontal orientation" consider using "Move menu to left" and "Move menu to top"
- Use larger icons so they're easier targets
Remaining tasks
Review
Commit
User interface changes
NA
API changes
NA
Data model changes
NA
Release notes snippet
NA
Original Post
Problem/Motivation
Drupal 8 has several buttons or links where the text is visibly hidden and replaced with a small icons. This poses challenges to speech recognition users because they don't know what to say to trigger those commands. For buttons or links where the text is visible (e.g., "Home" or "Menu") speech rec users can simply say "Click Home" or "Click Menu". For icons without text, they can guess if the names of the controls are intuitive, but in Drupal's case they aren't.
Alternatively they can operate their mouse by voice (mouse left, mouse up, faster, faster, faster, stop, mouse down, mouse right, stop, click) but this is very cumbersome and if targets are small (which many are in Drupal) it's hard to stop at precisely the right position.
Proposed resolution
- Add a title attribute to each control in order to reveal the text for that control to users when they hover. They'll need to use mouse commands at least once to discover the text, but subsequently they can use that text in a voice commands, which will be much more efficient.
- Consider using more intuitive text. For example, rather than "Vertical orientation" and "Horizontal orientation" consider using "Move menu to left" and "Move menu to top"
- Use larger icons so they're easier targets
Examples of icons that require fixing:
Top left corner, pencil icon: <button aria-pressed="false" role="button" class="icon icon-edit">Edit</button>
Secondary pencil icons such as:
<button type="button" class="trigger focusable" aria-pressed="false">open configuration options</button>
And this one, next to search:
<button type="button" class="trigger focusable" aria-pressed="false">open Search configuration options</button>
The small "X" at top right corner of overlay:
<a aria-controls="overlay-content" role="button" class="overlay-close" href="#" id="overlay-close">
<span class="visually-hidden">Close overlay</span>
</a>
The icons for swapping vertical and horizontal orientation of the secondary toolbar menu:
<button type="button" class="icon icon-toggle-vertical" value="vertical">Vertical orientation</button>
And:
<button type="button" class="icon icon-toggle-horizontal" value="horizontal">Horizontal orientation</button>
The Small + or - icon (shortcut.png) that appears next to the main heading on various admin pages is unique in that it has accompanying text, which seems to be serving a function similar to having a title attribute:
<span class="icon">Add or remove shortcut</span>
<span class="text">Add to <em class="Placeholder">Default</em> shortcuts</span>
The text in the second span appears visible on hover. Why is this technique used for this icon only? I think it's ok, and speech rec users can use either text in their voice command (i.e., "Click add or remove shortcut" and "Click add to Default shortcuts" both work). However, it might be confusing if the text in the second span is always changing. Since that's the text that's visibly exposed users will discover that in one context, but if it changes dynamically the same command they've learned in one context might not work in another context.