[wp-trac] [WordPress Trac] #23560: Keyboard Accessibility of Add Media Panel

[WordPress Trac]

#23560: Keyboard Accessibility of Add Media Panel
----------------------------+------------------------------
 Reporter:  grahamarmfield  |       Owner:
     Type:  defect (bug)    |      Status:  new
 Priority:  normal          |   Milestone:  Awaiting Review
Component:  Accessibility   |     Version:  3.5.1
 Severity:  normal          |  Resolution:
 Keywords:                  |
----------------------------+------------------------------

Comment (by grahamarmfield):

 Replying to [comment:4 lessbloat]:

 > 23560.diff​ addresses some of these items, including:
 Appreciate the work you're doing on this. I don't have the facility to
 test this myself as I don't have a suitable environment, but I have some
 comments I'd like to make:

 >
 > - Keeping the focus in the media modal once it's open
 Excellent.

 > - Moves focus to #wpbody-content once the modal is closed (needs to be
 an element that is present on every page where the media modal is used)
 OK for now. Perhaps we can discuss further longer term.

 > - Made it so the media items could be tabbed to.  Added role=checkbox,
 and the file name as the title (so that visually impaired users will know
 what they are focused on)
 ... and ...
 > - Adding labels around the items will be a fair amount of work, since
 the focus is actually on LI tags,
 Since the purpose of the attributes that I'm proposing is to allow items
 in the list to get focus and to behave like a checkbox grouping it doesn't
 really matter which element the attributes sit on. So if the <li> item is
 the actual one that responds to click then you could put the attributes on
 that.

 All the attributes that I specified will need to be employed to get this
 to work in screen readers and for keyboard users. See the example code at
 end of this comment.

 Please also note that using the title attribute to label items is no
 guarantee that screen reader users will get that information. Some screen
 readers voice title attributes but not all do, and those that do only
 voice them in certain situations.

 > - When focused on an item, enter selects and deselects it.  Shift +
 enter allows multiple selection.
 You will also need to toggle selection by listening for the space bar
 presses. This ARIA technique works for screen readers by 'fooling' the
 screen reader that this is a checkbox. In standard forms the checkbox
 state is toggled by space bar. Users will expect enter key to submit the
 form they are in.

 Whether the enter key or space bar has been pressed, the aria-checked
 attribute must be updated to reflect the state - true or false.
 > - I added tabindex=-1 to the non-visible tab stop, and to the plus/minus
 link which shows up after you've selected an item
 This may be superfluous, but I'd have to test for real.
 > - Added an empty alt to the image
 Excellent
 > - Added an outline to the "upload files" and "media library" links
 Excellent
 >
 > Please let me know how this works out.
 >
 > A couple of observations after looking at this:
 >
 > - Adding labels around the items will be a fair amount of work, since
 the focus is actually on LI tags, and I'm fairly certain we can't just
 wrap a label around an LI.
 Understand the problem here. I have a solution for this which is to add
 the aria-label attribute to the <li> too and make it's value equal to the
 media file's title. This will remove the need for the label. See code
 example below.
 > - If someone has a lot of media items, they will need to tab through all
 of them to get to the right column.  Is there some keyboard combo we could
 use as a shortcut to get you there?
 It's a valid concern for keyboard-only users and one we should address in
 the future. I'd be cautious about adding extra shortcuts. Screen reader
 users can use the Attachment Details heading to jump to the input fields
 (it's a facility within screen readers to use headings as navigational
 items).

 '''Example code to try'''
 Please note that this has changed from the original example I gave on the
 make.wordpress.org/accessibility blog
 (http://make.wordpress.org/accessibility/2013/03/28/add-media-panel-and-
 wordpress-3-6-a-simple-solution/) to avoid using a <label> element, and to
 attach new attributes to <li> element instead of image.

 Unselected:
 {{{
 <li class="attachment save-ready" tabindex="0" role="checkbox" aria-
 checked="false" aria-label="Media file title">
 }}}

 Selected:
 {{{
 <li class="attachment save-ready details selected" tabindex="0"
 role="checkbox" aria-checked="true" aria-label="Media file title">
 }}}

 I have tested this markup in isolation with NVDA and it behaves as I'd
 expect.

-- 
Ticket URL: <http://core.trac.wordpress.org/ticket/23560#comment:5>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software