Add ARIA attributes to the menus in the admin

[azaozz]

Support for screen readers can be (significantly) enhanced by adding few ARIA related attributes to the HTML tags in our menus. The role="navigation" is a must, perhaps some explanatory text for top level menus as well.

[azaozz]

​http://core.trac.wordpress.org/attachment/ticket/19088/ARIA.menu.roles.patch is a good start. Thinking the next step should be to have aria.menu, aria.menuitem, etc. and some text.

[DrewAPicture]

Adds navigatoin roles and first effort at menubar and menu/menuitem trees to Admin Bar

[azaozz]

Merged 19394.diff and 19394-2.patch

[azaozz]

In [19483]:

Fix the tabbing JS to work as described in the W3 ARIA draft: Tab to select, Enter to show submenu, Esc to close submenu, return to top menu and focus it. See #19394

[azaozz]

In [19484]:

Add ARIA related attributes (first take), props DrewAPicture, see #19394

[azaozz]

In [19485]:

Add tabbing JS to the admin menu, same functionality as the top menu, see #19394

[azaozz]

In [19486]:

Reset aria_arrtibutes when reaching admin submenu, see #19394

[DrewAPicture]

Replying to azaozz:

In [19485]:

Add tabbing JS to the admin menu, same functionality as the top menu, see #19394

Is the ability to have multiple dropdowns/flyouts open simultaneously intended behavior?

See attachment:tabbed-menu-overlap.png​

[DrewAPicture]

I got some insight from an accessibility specialist in our Access Center at the college this morning. He offered up a couple of points on the tabbing behavior and ARIA role setting:

• He applauds any efforts we're making to improve usability for people using adaptive technologies like screen readers.

• He mentioned tabbing may not be as popular today as it once was (Due in part to the advancement of adaptive technologies).

• The actual action of tabbing through the menus was straightforward and helpful, with the reader reading out the proper menu names as we went, but one thing that became immediately obvious was that the ability to simultaneously have multiple menus open wreaks havoc because opening a menu via enter essentially inserts items between top level items into the tabindex.

Example Index: Dashboard >> Home >> Updates > Posts > Media

Can become: Dashboard >> Home >> Updates > Posts >> All Posts >> Add New >> Categories >> Tags > Media

See attachment:tabbed-menu-overlap.png​

I think we may need to tackle how to enforce having single menus open at once, if possible. Hope that helps.

[azaozz]

Replying to DrewAPicture:

...
I think we may need to tackle how to enforce having single menus open at once, if possible. Hope that helps.

Thinking we can close any open submenus on pressing Enter to open another submenu. That would still leave the "old" submenu open unless the user presses Esc.

[azaozz]

In [19505]:

When tabbing: on Enter open the current submenu and close other submenus if open, see #19394

[azaozz]

In [19508]:

Include wp-admin-bar-secondary-* when closing non-current submenus, see #19394

[azaozz]

This should be completed for now. For any bugs please open new tickets.

[azaozz]

Spoke too soon :)

Seems we cannot use role=menu and role=menuitem without having arrows keys navigation. Attaching a patch to remove these for now.

[nacin]

19394-4.patch​ doesn't seem to revert all of our aria stuff. Is that intentional?

[DrewAPicture]

@nacin:

We can leave the role="navigation" attributes in because they're just ARIA landmarks and don't demand arrow key navigation. The more specific menu and menuitem attributes are what can't go in without arrow key navigation functionality.

[nacin]

Okay. Is there a reason why role=navigation shifted elements?

[DrewAPicture]

Replying to nacin:

Okay. Is there a reason why role=navigation shifted elements?

Yessir. Because of the expected hierarchy of using menubar, menu and menuitem child roles we compensated by moving the navigation landmark up a level to adminmenuwrap. Since the menu and menuitem roles have been reverted, it looks like @azaozz decided to move the navigation role back down a level to adminmenu where it should've been anyway.

[nacin]

Alright.

[ryan]

Looks good.

[azaozz]

In [19548]:

Remove role="menu" and role="menuitem" for now, fixes #19394