Customizer - Widgets - Screen Readers Don't Announce Widget Names

[GrahamArmfield]

Tested with NVDA on top of FF30 on Windows 7 64 bit.

It's possible to tab to the various sidebar areas using a screen reader - fairly good feedback. Hitting Enter to open the list of widgets works too. But when tabbing between the individual widgets, NVDA is not announcing the widget name but instead a string such as "customize return=%2Fsrc%2Fwp-a… link".

So the screen reader user doesn't know which widget has focus.

A similar result was found when using JAWS on top of IE10.

Expected result: The screen reader should announce widget name.

[GrahamArmfield]

Correct typo in Summary.

[valendesigns]

This needs an accessibility review and someone to take over and create a patch. Anyone from the accessibility team want to review?

[afercia]

Probably something is changed since this ticket was open, still there are a couple of issues. Please refer to the screenshot below, the .widget-action link is empty, there's no text to be read out:

The following link, the one with the 3 span, appears to be something not used, unless I'm missing something. Maybe something inherited from the old widgets screen code when in "accessibility mode" see /wp-admin/widgets.php?widgets-access=on

[afercia]

Reviewed a bit and here's how Firefox+NVDA read out the active widgets:

when arrowing:
clickable clickable link   <-- the non-focusable clickable draggable heading and the link together
heading  level 4 Calendar  <-- the heading with the widget name

when tabbing:
clickable clickable link   <-- the focusable link is empty

There's room for improvement :)

• the toggle link should be a button, the JavaScript part should be updated (no keydown if any, and no preventDefault needed)
• should have an aria attribute aria-expanded to be dynamically updated
• should have some screen reader text to say what it does: "Edit {widget name} widget" and when expanded "Close {widget name} widget"
• the "Remove" and "Close" links should be buttons
• looks like the "search as you type" searches on each keystroke. Should really try to detect when users actually end typing. See for example what was done for the Themes search using _.debounce in #26600 and #31812
• the "Remove" label: it says "Remove" and has a title attribute "Trash widget by moving it to the inactive widgets sidebar." So is it removing, trashing, or moving? What is the "widgets sidebar" in the Customizer context? Bit confusing and doesn't explain the most important thing: settings/content will be preserved.

Agreed would need someone to take over and create a patch. Patchers welcome!

[anonymized_13665966]

I'd be happy to tackle and patch this ticket if no-one else is currently writing a patch?

[westonruter]

@davetgreen Go for it.

[anonymized_13665966]

I'm finally getting around to writing a patch for this. Should hopefully have something ready in the next couple of days.

[afercia]

Related: #27592

[anonymized_13665966]

@afercia I'm dragging my feet on this due to some intense work commitments, but I'm targeting the patch being complete by October 10th latest.

[westonruter]

@davetgreen any update on this ticket?

[anonymized_13665966]

@westonruter If I can't find the time to revisit and complete the patch I was working on for this by close of play Friday March 3rd, I'll make my WIP patch available and remove my ownership of this ticket so that someone else can pickup.

[afercia]

Looking back at this, many issues have already been fixed. As far as I see, the ones left to address are:

• the title title="Trash widget by moving it to the inactive widgets sidebar." See also https://core.trac.wordpress.org/ticket/27575#comment:2
• introducing some debouncing for the search

[anonymized_13665966]

hi @westonruter @afercia

I've changed the title attribute to..

Remove widget by moving it to the inactive widgets list: your widget settings/content will be preserved.

The use of list is as per the text on the Appearance -> Widgets screen. It's tempting to add a sign-post to this title along the lines of...

Remove widget by moving it to the inactive widgets list: your widget settings/content will be preserved. Inactive widgets are managed via the Widgets page in your dashboard.

...but I'm concerned about the length of the text.

A 500 millisecond debounce has been added to the doSearch method.

[afercia]

Looking a bit into this:

• when searching widgets, the current debounce on the announceSearchMatches function doesn't work very well: typing at a normal speed, multiple speak() messages are sent to the ARIA live region and we should avoid to bombard users with lots of audible messages. The debouncing should be applied to the search function instead (the one that receives the input event)
• the title attribute on the "Remove" button is a sign of an UI problem: ideally, UI controls should be self-explanatory. When there's the need to clarify what a control does, that means there's a design problem.

• also, in the Widgets page, saved widgets have 3 available actions:
  • Delete
  • Deactivate (by dragging to the Inactive Widgets area)
  • Done
• Not sure why in the Customizer there's no "Delete". There should be 3 buttons: Delete, Deactivate, Done. This way, there wouldn't be the need for a title attribute. Worth reminding title attributes are only available to pointing device users and should be avoided. See https://core.trac.wordpress.org/query?keywords=~title-attribute

Considering the Widgets page will be refactored (and consequently the Customizer will likely see some adjustments) for the Gutenberg phase 2, I'd propose to keep the title attribute for now and use some better wording.

[afercia]

28888.diff​ addresses the pending issues in this ticket:

• moves debounce to the search function
• changes the title attribute to "Keep widget settings and move it to the inactive widgets"
• removes a couple of preventDefault(): they were applied to button elements with a type="button" attribute: as such, there's no default action to prevent

[afercia]

In 44825:

Accessibility: Customize: Improve the widgets search and the widget Remove button.

• debounces the widgets search to avoid multiple speak() audible messages while typing: search results and messages are now triggered when users stop typing
• clarifies the Remove button title attribute
• removes a couple unnecessary preventDefault()

Props davetgreen, afercia.
Fixes #28888.