[wp-trac] [WordPress Trac] #23562: Using Speech Recognition Software with the Add Media Panel

[WordPress Trac]

#23562: Using Speech Recognition Software with the Add Media Panel
----------------------------+----------------------------
 Reporter:  grahamarmfield  |       Owner:  joedolson
     Type:  defect (bug)    |      Status:  accepted
 Priority:  normal          |   Milestone:  7.0
Component:  Media           |     Version:  3.5.1
 Severity:  normal          |  Resolution:
 Keywords:  needs-testing   |     Focuses:  accessibility
----------------------------+----------------------------

Comment (by joedolson):

 OK. Some of the issues found in retesting are obvious, others less so.

 1) Opening the media library from the editor is quite difficult. When you
 insert an image block, you cannot click on the Media Library button in the
 place holder. It doesn't appear in the list of available buttons. This is
 because the button is hidden behind objects: the drop zone & an `aria-
 hidden` div which I'm uncertain of the intent behind. While screen readers
 ignore these layers, Dragon Naturally Speaking interprets the buttons as
 being hidden, and doesn't allow their selection or activation. This is
 likely true in every context where there are layers on top of buttons.

 2) In the Media Library itself, it's quite difficult to select filters or
 select images. In both cases, I could do it easily if I used the inspector
 to find the name of the object - "Select [image name]" would easily select
 an image, and "Select [filter type]" would easily select the filter; but
 they were difficult to select otherwise. This is unsurprising; voice
 command is heavily tied to naming, and if you can't see what a control is
 named, it's difficult to select. This is particularly key for images,
 since the images are custom controls which are quite non-standard.

 3) The issue cited by @GrahamArmfield above that related to select the
 input fields was not an issue, and I had no trouble with those.

 As I see it, there are three key issues to resolve, two in the modal and
 one in the block editor:

 1) Make labels visible for filters
 2) Make labels visible for image thumbnails.

 Block editor:

 1) Masked controls need to be moved to the top layer. This simplest way I
 was able to handle this in testing was by adjusting their `z-index` so
 that they were above the mask layers. This was odd, however, as while it
 did work, buttons I adjusted that way still weren't selected when I used
 the 'Click button' command to highlight all buttons.

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