#30512 closed defect (bug) (invalid)
Improve media views accessibility
Reported by: | afercia | Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | 4.0 |
Component: | Media | Keywords: | has-patch |
Focuses: | ui, accessibility, javascript | Cc: |
Description
Splitting this out from #29371
About the media grid:
Replying to bramd:
I had some thoughts about this and discussed it on the WP a11y mailinglist, where people seem to agree.
Currently, we use aria to indicate the list as a group of checkboxes, I propose we make that a listbox with multiselection if applicable (role="listbox", aria-multiselect). Then it also makes sense to mark the whole thing with aria role application to indicate we handle focus inside. We can rely on the arrow key navigation and make the list focusable by tabbing to it. This means the individual items will get a tabindex of -1. As an added bonus, we get the screenreader reading indexes for freee (e.g. "Testfile" item 1 of 3).
First try to apply @bramd idea, the attachment grid has now an ARIA role of "application" and seems it's working nicely. Added ARIA roles, attributes, improved keyboard accessibility and screen readers feedback. It's complex so please bear with me :) It's just a first try and there are still many things to refine.
Any thoughts more than welcome, please test extensively.
Basically, when in the attachment grid:
- use arrows to navigate through attachments in any direction
- use tab to navigate sequentially
- once an attachment is selected, additional controls "Deselect" and "Edit details" will be announced, use tab to focus and activate them
- arrows navigation will skip the additional controls so it's possible to navigate quickly through attachments even when many of them are selected
Focus is no more automatically moved to the Details sidebar. The idea is to have a dedicated control to move to the Attachment Details that will be revealed just when the attachment is selected.
Many other details, TL;DR
Some things to improve:
- labels refinements
- add a control to go back from Attachment Details to the currently selected image
- better "saved" feedback message after editing attachment details
- inline help
- visual: designers feedback welcome
Attachments (1)
Change History (17)
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
10 years ago
This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.
10 years ago
#5
@
10 years ago
Okay, so went through this on stable (4.0.1), nightly (4.1beta2-30673) and on trunk with the patch using VO in Safari (Yosemite). Went through on stable for context because I'm pretty sure the slight functionality I get in beta2 is from the fix for #30386.
In any case, on nightly selecting an image pops me over to the URL field within Attachment Details and I can edit everything within there and insert the selected image. (At least so long as I don't want to select anything else instead.)
On trunk with the patch, opening the Add Media panel puts me outside of it, so I have to use the web rotor to get to the Insert Media heading. From there I can't get into the grid at all. (Can't within the Media Library from the navigation menu either, by the way.) Arrowing around I skip over the grid entirely and go from the Search field to the Insert into post button.
#6
@
10 years ago
Tested with IE 10 and 11 with Jaws and this totally does not work. Tested with NVDA latest release and Firefox latest and it works flawlessly. Not sure what to do about IE and VO/Jaws as FF supports about 85% of the accessibility standards and the others drop significantly.
#7
@
10 years ago
Thanks to everyone for testing, after the Monday testing meeting on Slack now we have a precious feedback.
Testers reported using role=listbox
for the media grid and role=option
for the media grid items:
- works nicely in Firefox + NVDA @arush reported "this is the best fix ever. As long as I use Firefox and Nvda I can insert media with no problem"
- works with some issues in Chrome + NVDA (tested by me)
- doesn't work at all in IE 10 and 11 + JAWS
- doesn't work at all in Safari + VoiceOver
Spent some time doing additional testing the best I can and tried a crazy thing: testing with Internet Explorer 8 and JAWS 15 and, surprisingly, it works. It's not perfect, but it works. I can select, do multiple selection, deselect, edit details, etc. Wondering why it doesn't work in IE 10 and 11.
I'm fairly confident with a bit of research and development we can get better results but I need testers :)
Found this test case by James Craig, WAI-ARIA editor and many other things, which is basically the same thing we're trying with the media grid: a div
with role=application
with a listbox
and option
items:
http://cookiecrook.com/test/aria/multiselect/listbox.html
I'd like to invite everyone to test on different platforms, browsers, screen readers and report results here.
Alternatively, I've seen some improvements using list
and listitem
and to my understanding, listbox
and option
are internally mapped as list
and listitem
by the various accessibility APIs.
It would be nice to have help from some experts, anyway it's worth doing some more investigations.
#9
follow-up:
↓ 10
@
10 years ago
- Keywords needs-refresh added
- Milestone changed from Awaiting Review to Future Release
Fire up grunt watch
please and edit the new media modules - this patch uses media-views.js
#10
in reply to:
↑ 9
@
10 years ago
Replying to wonderboymusic:
Fire up
grunt watch
please and edit the new media modules - this patch usesmedia-views.js
I know I know :) patch needs a refresh, as well as other patches after the media views split. Will do when/if the accessibility team will make a decision about how to proceed, this patch was still in an "experimental" stage.
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
9 years ago
This ticket was mentioned in Slack in #feature-imageflow by teamadesign. View the logs.
9 years ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
8 years ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
8 years ago
#15
@
8 years ago
- Milestone Future Release deleted
- Resolution set to invalid
- Status changed from new to closed
Discussed this in the accessibility team meeting:
We need to replace this ticket for clearer and smaller tickets.
So this one we close.
#16
@
8 years ago
- Keywords needs-testing dev-feedback needs-refresh removed
Just wanted to add experimentation and research on this ticket was precious. We also made some mistakes :) While research done here has a historic value, a new, better, approach would be trying to address smaller issues with smaller patches, one by one.
Additional notes, things to improve:
aria-selected
should be used only when attachments are actually selectable (e.g. not in the Media Library grid mode)role=application
needs to be set on a proper element wrapping only the attachments list