[wp-trac] [WordPress Trac] #21334: Accessibility of Quick Edit panel in Posts/Pages/etc

[WordPress Trac]

#21334: Accessibility of Quick Edit panel in Posts/Pages/etc
-----------------------------------+--------------------
 Reporter:  grahamarmfield         |       Owner:
     Type:  defect (bug)           |      Status:  new
 Priority:  normal                 |   Milestone:  3.6
Component:  Accessibility          |     Version:  3.4.1
 Severity:  normal                 |  Resolution:
 Keywords:  2nd-opinion has-patch  |
-----------------------------------+--------------------

Comment (by grahamarmfield):

 Replying to [comment:12 adamsilverstein]:
 > Replying to [comment:11 azaozz]:
 > > Tabindex is "evil" :)
 > >
 > > It breaks the natural flow of tabbing affecting negatively all users,
 and behaves differently in different browsers when added to elements that
 can be shown/hidden or are moved in the DOM.
 > >
 > > A better way to fix this may be to make the table cell (or row?)
 "focusable" and show these links on focus. This should also be tested on
 touch devices.

 In 'normal' use I agree that tabindex is evil. However there are two
 values of tabindex that are actually useful - especially in answer to how
 you can give focus to something that isn't a link or a button.

 * tabindex="0" - this includes the item in the tab order for the page, but
 using the context of the order that it appears in the HTML. Focus can be
 given to the item in javascript too.
 * tabindex="-1" - Focus can be given to an item using javascript only. It
 does not appear in the natural tab order within a page.

 These values are supported in enough modern browsers to make them safely
 usable.

 So, you could try giving the table cells or rows tabindex values of 0. You
 would certainly be able to tab to the table cell/row then. Whether the
 table cell or row maintains meaningful focus whilst you tab around the
 quick links inside is another matter. I'm thinking of how you may keep the
 quick links panel open whilst a user interacts with with the various links
 and input fields. I've not tested this.

 Another approach might be to use your javascript to add an extra class to
 the table cell or row when the post/page title receives focus. This could
 trigger the opening of the quick links panel. Then, whenever any of the
 links or elements within the quick links panel receive focus the class is
 pushed up through all ancestors to the tabel cell in order to keep open
 the quick links panel until the user tabs to a different post/page.

 This all sounds much more complicated than providing a link just after the
 post/page title that says 'Open Quicklinks'. Clicking this will open
 quicklinks for that title and it will change the link to now say 'Close
 quicklinks'. The quicklinks panel will stay open until the user
 specifically closes it by clicking on that link. That way a screen reader
 user will onlu get all the extra items if they want them, and speech
 recognition users will be catered for too.

 Screenshots attached.

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