Make WordPress Core

Opened 13 years ago

Closed 13 years ago

#19394 closed task (blessed) (fixed)

Add ARIA attributes to the menus in the admin

Reported by: azaozz's profile azaozz Owned by: azaozz's profile azaozz
Milestone: 3.3 Priority: normal
Severity: normal Version: 3.3
Component: Accessibility Keywords: has-patch commit
Focuses: Cc:

Description

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.

Attachments (5)

19394.diff (2.5 KB) - added by DrewAPicture 13 years ago.
Adds navigatoin roles and first effort at menubar and menu/menuitem trees to Admin Bar
19394-2.patch (16.0 KB) - added by azaozz 13 years ago.
19394-3.patch (17.2 KB) - added by azaozz 13 years ago.
Merged 19394.diff and 19394-2.patch
tabbed-menu-overlap.png (26.0 KB) - added by DrewAPicture 13 years ago.
19394-4.patch (3.0 KB) - added by azaozz 13 years ago.

Download all attachments as: .zip

Change History (26)

#1 @azaozz
13 years ago

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.

#2 @DrewAPicture
13 years ago

  • Cc xoodrew@… added

@DrewAPicture
13 years ago

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

@azaozz
13 years ago

@azaozz
13 years ago

Merged 19394.diff and 19394-2.patch

#3 @azaozz
13 years ago

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

#4 @azaozz
13 years ago

In [19484]:

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

#5 @DrewAPicture
13 years ago

  • Version set to 3.3

#6 @azaozz
13 years ago

In [19485]:

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

#7 @azaozz
13 years ago

In [19486]:

Reset aria_arrtibutes when reaching admin submenu, see #19394

#8 @DrewAPicture
13 years ago

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

#9 follow-up: @DrewAPicture
13 years ago

  • Keywords dev-feedback added

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.

Last edited 13 years ago by DrewAPicture (previous) (diff)

#10 in reply to: ↑ 9 @azaozz
13 years ago

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 or opens another one.

Last edited 13 years ago by azaozz (previous) (diff)

#11 @azaozz
13 years ago

In [19505]:

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

#12 @azaozz
13 years ago

In [19508]:

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

#13 @azaozz
13 years ago

  • Milestone changed from Future Release to 3.3
  • Resolution set to fixed
  • Status changed from new to closed

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

#14 @azaozz
13 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

@azaozz
13 years ago

#15 @nacin
13 years ago

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

#16 @DrewAPicture
13 years ago

@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.

#17 follow-up: @nacin
13 years ago

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

#18 in reply to: ↑ 17 @DrewAPicture
13 years ago

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.

Last edited 13 years ago by DrewAPicture (previous) (diff)

#19 @nacin
13 years ago

  • Keywords has-patch commit added; dev-feedback removed

Alright.

#20 @ryan
13 years ago

Looks good.

#21 @azaozz
13 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from reopened to closed

In [19548]:

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

Note: See TracTickets for help on using tickets.