MD Extensions: A11y: Improve action association |
|||||||
Issue descriptionFrom Issue 606526: We need a better way to associate the buttons per each extension (remove, enable/disable toggle) with the extension name. Right now, if you didn't visually see which extension those items correspond with, it could be very confusing. I think we should insert the extension name into the utterance of those buttons so you actually hear "remove ___, button" for example.
,
Dec 6 2017
Please use the correct component when filing MD extensions bug, or use go/md-extensions-bug for a pre-populated template.
,
Dec 6 2017
,
Dec 13 2017
Issue 789280 has been merged into this issue.
,
Dec 15 2017
,
Dec 20 2017
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/dc8229d2f35d0dbf949d0c7814a90456543c0cb9 commit dc8229d2f35d0dbf949d0c7814a90456543c0cb9 Author: Hector Carmona <hcarmona@chromium.org> Date: Wed Dec 20 01:03:45 2017 MD Extensions: A11y - Add extension to description of all controls. Bug: 791665 Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation Change-Id: Iaa6082db8d58b426b110bdb4fcecb6c9f0a6cc9b Reviewed-on: https://chromium-review.googlesource.com/831346 Commit-Queue: Hector Carmona <hcarmona@chromium.org> Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org> Cr-Commit-Position: refs/heads/master@{#525208} [modify] https://crrev.com/dc8229d2f35d0dbf949d0c7814a90456543c0cb9/chrome/app/md_extensions_strings.grdp [modify] https://crrev.com/dc8229d2f35d0dbf949d0c7814a90456543c0cb9/chrome/browser/resources/md_extensions/item.html [modify] https://crrev.com/dc8229d2f35d0dbf949d0c7814a90456543c0cb9/chrome/browser/resources/md_extensions/item.js [modify] https://crrev.com/dc8229d2f35d0dbf949d0c7814a90456543c0cb9/chrome/browser/ui/webui/extensions/extensions_ui.cc
,
Dec 20 2017
,
Feb 23 2018
Chrome: 65.0.3353.0 Canary
NVDA: 2017.4
The new labels are only read when tabbing or when pressing 'b' to jump to the button. When using down arrow, only the visual text is read.
The accessible label is a bit too verbose
This could be improved by implementing option 1. Other suggestions could improve the experience
1. Setting the button aria-label to the action +<extension name>
Example: <button aria-label="Details for Google Docs Offline">Details</button>
<button aria-label="remove Google Docs Offline">Remove</button>
2. Make the extension name a heading to make it easier to jump to the next extension
Example: <h2>Application Launcher for Drive (by Google)</h2>
3. Group the elements in an extension listing together with aria-group
<div role="group" aria-label]"Extension">
Extension Icon
Added by a third-party
Application Launcher for Drive (by Google)
Open Drive files directly from your browser in compatible applications installed on your computer.
DETAILS
REMOVE
Extension Enabled
</div>
,
Aug 1
,
Aug 9
Re comment #8's proposals: 1. Setting label for "Action + Extension" This would be an ideal solution, but would require doubling the number of strings for i18n because we can't just concat strings since the order could be different in other languages. When we first implemented the solution with "related to extension" we did that as a compromise between many strings and not being usable. 2. Make the extension name a heading for easier navigation This should be doable, I don't know if there's any down sides to doing this 3. Group elements together This sounds like it could be a good working solution if it allows people on screen readers to know what the buttons are associated with. |
|||||||
►
Sign in to add a comment |
|||||||
Comment 1 by sdy@chromium.org
, Dec 6 2017Labels: -Type-Bug Type-Feature