[wp-trac] [WordPress Trac] #19088: Accessibility for the admin bar

[WordPress Trac]

#19088: Accessibility for the admin bar
---------------------------+-----------------------
 Reporter:  azaozz         |       Owner:  azaozz
     Type:  defect (bug)   |      Status:  reopened
 Priority:  normal         |   Milestone:  3.3
Component:  Accessibility  |     Version:  3.3
 Severity:  normal         |  Resolution:
 Keywords:                 |
---------------------------+-----------------------

Comment (by azaozz):

 Replying to [comment:7 koopersmith]:
 > I've been testing in Chrome and found a few bugs:

 Unfortunately the admin bar was coded/styled without accessibility in
 mind. That makes it hard to get tabbing to work properly. As you see had
 to use JS to keep the drop-downs open. Also the "main" styling is on the
 `<li>` elements instead of the links and tabbing must highlight the links
 (so pressing Enter would follow them).

 There are few things that can be done to make this (at least) look better.
 However it's too late in the dev. cycle to try and re-make it now.

 >       1.      Top-level tabs without children aren't highlighted.

 Move the styling to the links.

 >       2.      Shift+tabbing causes menus to remain expanded.

 This doesn't seem to happen in FF, IE and Chrome on Windows. Menus are
 closed after a short timeout whether you tab forward or backward (Shift +
 Tab).

 >       3.      Menus expanded by tabbing can be collapsed by mousing over
 the menu, but can leave the parent item focused.

 I suppose that's expected behavior, closing the menu by mousing over it
 should leave the parent highlighted and allow tabbing to continue from
 there.

 >       4.      No-JS: Top-level tabs with children are highlighted, but
 do not expand.

 Yes, tabbing requires jQuery. See above.

 >       5.      When the W menu is highlighted, the W logo is not visible.

 See #1.

 >       6.      It is possible to highlight your the name/username item in
 the account menu (which leads to nowhere) — ''I will fix this bug''.

 Proper way to fix that would be to allow passing a `tabindex` var to the
 menu generating code and set that to -1.

 >       7.      Right-aligned menu items are highlighted before/between
 left-aligned menu items — ''I will fix this bug''.

 This depends on the order the HTML elements are outputted. Tabbing follows
 the HTML layout not the visual.

 >       8.      Command + clicking on top-level items with children can
 cause menus to remain expanded and/or the item to remain focused.

 Any type of clicking would usually focus the item (link), that depends on
 the browser. Not sure we can do anything better with the JS for closing
 the menus (hovering over them and out actually closes them as you point
 out above).

 We can make the JS there more complicated and add edge cases handling,
 however IMHO we should try to build/rebuild it with accessibility in mind
 instead of trying to "patch" it with JS.

 Ideally the admin bar shouldn't need JS to be accessible similar to the
 admin menu.

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