Make WordPress Core

Opened 10 years ago

Closed 5 years ago

#28888 closed defect (bug) (fixed)

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

Reported by: grahamarmfield's profile GrahamArmfield Owned by: afercia's profile afercia
Milestone: 5.2 Priority: normal
Severity: normal Version: 3.9
Component: Customize Keywords: has-patch commit
Focuses: accessibility Cc:


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.

Attachments (2)

28888.patch (1.6 KB) - added by anonymized_13665966 7 years ago.
28888.diff (2.7 KB) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (26)

#1 @GrahamArmfield
10 years ago

  • Summary changed from Customizer - Widgets - Screen Reders Don't Announce Widget Names to Customizer - Widgets - Screen Readers Don't Announce Widget Names

Correct typo in Summary.

#2 @SergeyBiryukov
10 years ago

  • Keywords needs-patch added

#3 @celloexpressions
10 years ago

  • Milestone changed from Awaiting Review to Future Release
  • Version changed from trunk to 3.9

This ticket was mentioned in Slack in #core-customize by celloexpressions. View the logs.

9 years ago

#5 @valendesigns
9 years ago

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

#6 @afercia
9 years ago

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

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.

9 years ago

#8 @afercia
9 years ago

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 "save as you type" saves 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!

Version 0, edited 9 years ago by afercia (next)

#9 @anonymized_13665966
8 years ago

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

#10 @westonruter
8 years ago

  • Owner set to davetgreen
  • Status changed from new to assigned

@davetgreen Go for it.

#11 @anonymized_13665966
8 years ago

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

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

8 years ago

#13 @afercia
8 years ago

Related: #27592

#14 @anonymized_13665966
8 years ago

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

This ticket was mentioned in Slack in #core-customize by westonruter. View the logs.

7 years ago

#16 @westonruter
7 years ago

@davetgreen any update on this ticket?

#17 @anonymized_13665966
7 years ago

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

#18 @afercia
7 years ago

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

Last edited 7 years ago by afercia (previous) (diff)

#19 @anonymized_13665966
7 years ago

  • Keywords has-patch added; needs-patch removed

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.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

5 years ago

#21 @SergeyBiryukov
5 years ago

  • Milestone changed from Future Release to 5.2
  • Owner changed from davetgreen to SergeyBiryukov
  • Status changed from assigned to reviewing

#22 @afercia
5 years ago

  • Owner changed from SergeyBiryukov to 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

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.

5 years ago

#23 @afercia
5 years ago

  • Keywords commit added

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

#24 @afercia
5 years ago

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

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.

Note: See TracTickets for help on using tickets.