WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 6 years ago

#32725 closed defect (bug) (fixed)

Customizer Menus: Accessibility: improve descriptive text and focus for reorder button

Reported by: designsimply Owned by: ocean90
Milestone: 4.3 Priority: normal
Severity: normal Version: 4.3
Component: Customize Keywords: has-patch
Focuses: accessibility, javascript Cc:

Description

/hat tip @afercia for the original report at https://github.com/voldemortensen/menu-customizer/issues/94

Some considerations about the Reorder button:

  • needs a better focus style
  • when pressed, there's no feedback about what's happening and about what user should do as next step
  • when Reorder is pressed, the "Add Links" button is faded out but still focusable, either disable it or tabindex -1 until you're "Done"
  • it's not clear the difference between "Move one level down" and "Move down" (same for "up"), consider to use a better descriptive text
  • the "disabled" arrows are still focusable, announced and clickable (I think this was already reported)
  • all the move arrows need a better focus style

Attachments (3)

32725.patch (4.1 KB) - added by afercia 6 years ago.
32725.2.diff (1.6 KB) - added by afercia 6 years ago.
Avoid duplicate IDs.
32725.3.diff (3.4 KB) - added by afercia 6 years ago.
Avoid duplicate IDs and remove role presentation from the reorder button.

Download all attachments as: .zip

Change History (13)

#1 @celloexpressions
6 years ago

  • Summary changed from Customizer Menus: Accessibility: improve descriptive text and focus to Customizer Menus: Accessibility: improve descriptive text and focus for reorder button
  • Version set to trunk

#2 @celloexpressions
6 years ago

  • Milestone changed from Awaiting Review to Future Release

Note that this is modeled directly off of widgets, so we should be able to improve these issues there as well when we fix them.

#3 @afercia
6 years ago

About the reorder button specifically, here's some feedback by Michelle DeYoung from the accessibility testers group:

it is not very understandable for a non-sighted user to hear “Reorder” and “Done” without knowing they have to navigate back to the menu itself, and without instruction of what and how to reorder. Once back in the menu the reorder buttons are nicely done and announced clearly as to what the action is.

Would make sense to add some instruction/description for the Reorder button and more descriptive labels.

@afercia
6 years ago

#4 @afercia
6 years ago

  • Focuses javascript added
  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Future Release to 4.3
  • Type changed from enhancement to defect (bug)

First pass:

  • give the two spans a semantics of "button" in order to make them act like buttons and provide more descriptive aria-label and description
  • use wp.a11y.speak() to inform users the "reorder mode" is enabled/disabled

Would greatly appreciate some feedback about better wording for the sentence

"When in reorder mode, additional controls to reorder menu items will be available in the items list above."

Tested in Firefox+NVDA, Chrome+ChromeVox, IE8+JAWS 15.

#5 @celloexpressions
6 years ago

Looks good to me.

#6 @ocean90
6 years ago

  • Owner set to ocean90
  • Resolution set to fixed
  • Status changed from new to closed

In 33074:

Customizer: Improve descriptive text and focus for menu items reorder button.

props afercia.
fixes #32725.

#7 @afercia
6 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Just noticed: the id reorder-items-desc must be unique per menu. Quick patch incoming.

@afercia
6 years ago

Avoid duplicate IDs.

#8 @afercia
6 years ago

Sorry there's one more thing, my bad. The ARIA role presentation can't be used on buttons: http://www.w3.org/TR/wai-aria/roles#presentation

If an element with a role of presentation is focusable, user agents MUST ignore the normal effect of the role and expose the element with implicit native semantics, in order to ensure that the element is both understandable and operable.

Additionally, it's also invalid code. So we should use a more standard solution and update the aria-label via JavaScript, see updated patch and please ignore the previous .2

@afercia
6 years ago

Avoid duplicate IDs and remove role presentation from the reorder button.

#9 @obenland
6 years ago

@ocean90, could you get this over the finish line?

#10 @ocean90
6 years ago

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

In 33339:

Customizer: Avoid duplicate IDs and remove role presentation from menu items reorder button. Follow-up to [33074].

props afercia.
fixes #32725.

Note: See TracTickets for help on using tickets.