[wp-trac] [WordPress Trac] #30512: Improve media views accessibility

[WordPress Trac]

#30512: Improve media views accessibility
-------------------------------------+-------------------------------------
 Reporter:  afercia                  |       Owner:
     Type:  defect (bug)             |      Status:  new
 Priority:  normal                   |   Milestone:  Awaiting Review
Component:  Media                    |     Version:  4.0
 Severity:  normal                   |  Resolution:
 Keywords:  has-patch needs-testing  |     Focuses:  ui, accessibility,
  dev-feedback                       |  javascript
-------------------------------------+-------------------------------------

Comment (by afercia):

 Thanks to everyone for testing, after the
 [https://wordpress.slack.com/archives/accessibility/p1417449558001707
 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 [http://www.w3.org/TR/wai-aria-
 implementation/#mapping_role_table accessibility APIs].
 It would be nice to have help from some experts, anyway it's worth doing
 some more investigations.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/30512#comment:7>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform