WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#19394 closed task (blessed) (fixed)

Add ARIA attributes to the menus in the admin

Reported by: azaozz Owned by: 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 4 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 4 years ago.
19394-3.patch (17.2 KB) - added by azaozz 4 years ago.
Merged 19394.diff and 19394-2.patch
tabbed-menu-overlap.png (26.0 KB) - added by DrewAPicture 4 years ago.
19394-4.patch (3.0 KB) - added by azaozz 4 years ago.

Download all attachments as: .zip

Change History (26)

comment:1 @azaozz4 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.

comment:2 @DrewAPicture4 years ago

  • Cc xoodrew@… added

@DrewAPicture4 years ago

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

@azaozz4 years ago

@azaozz4 years ago

Merged 19394.diff and 19394-2.patch

comment:3 @azaozz4 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

comment:4 @azaozz4 years ago

In [19484]:

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

comment:5 @DrewAPicture4 years ago

  • Version set to 3.3

comment:6 @azaozz4 years ago

In [19485]:

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

comment:7 @azaozz4 years ago

In [19486]:

Reset aria_arrtibutes when reaching admin submenu, see #19394

comment:8 @DrewAPicture4 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

comment:9 follow-up: @DrewAPicture4 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 4 years ago by DrewAPicture (previous) (diff)

comment:10 in reply to: ↑ 9 @azaozz4 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.

Version 0, edited 4 years ago by azaozz (next)

comment:11 @azaozz4 years ago

In [19505]:

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

comment:12 @azaozz4 years ago

In [19508]:

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

comment:13 @azaozz4 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.

comment:14 @azaozz4 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.

@azaozz4 years ago

comment:15 @nacin4 years ago

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

comment:16 @DrewAPicture4 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.

comment:17 follow-up: @nacin4 years ago

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

comment:18 in reply to: ↑ 17 @DrewAPicture4 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 4 years ago by DrewAPicture (previous) (diff)

comment:19 @nacin4 years ago

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

Alright.

comment:20 @ryan4 years ago

Looks good.

comment:21 @azaozz4 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.