WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#28892 closed defect (bug) (fixed)

Customizer - Widgets - Feedback for screen reader users when Moving widgets + other actions

Reported by: GrahamArmfield Owned by: azaozz
Milestone: 4.1 Priority: normal
Severity: normal Version: 3.9
Component: Customize Keywords: has-patch dev-feedback
Focuses: accessibility, javascript Cc:

Description

Tested with NVDA on FF30 and JAWS on IE10, on Windows 7 64 bit.

To recreate:

  • Start your screen reader
  • Tab into Customize > Widgets
  • Tab to sidebar that has widgets within it and press Enter to open.
  • Tab to the Reorder button and press Enter.
  • Reverse tab back up to one of the move controls and action it.

At this point there is no audible feedback for screen reader users that an action has been completed. This is true for a number of other actions within the customizer.

I suggest that an ARIA live region is added somewhere into the customizer modal. This could be used to notify screen reader users whenever widgets are moved, or other actions are completed which update the screen but do not by themselves trigger an update for screen readers.

The format for such a region would be:

<div id="messages" aria-live="polite" aria-relevant="all" aria-role="status" aria-atomic="true"></div>

Whenever an action occurs (eg Move) javascript should update the div with some appropriate text. For example: "Search Widget moved up".

As we're doing this primarily for screen readers, it would be acceptable for this message area to be hidden from sighted users with the screen-reader-text class.

This is also a more strategic fix - this message area could be used by other functionality throughout the Customizer.

Attachments (3)

28892.diff (1.8 KB) - added by adamsilverstein 5 years ago.
Add screen reader action for widget move up and down
28892.2.diff (1.8 KB) - added by adamsilverstein 5 years ago.
use dashed not underscores in div id
28892.3.diff (1.8 KB) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (18)

#1 @SergeyBiryukov
5 years ago

  • Keywords needs-patch added

#2 @celloexpressions
5 years ago

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

@adamsilverstein
5 years ago

Add screen reader action for widget move up and down

#3 @adamsilverstein
5 years ago

Tested this with a chrome extension screen reader and verified the action is read. Not certain about the placement of the screen reader div, if its location is important and finally if my targeting of the div could be more focused, eg find the div from the customizer itself.

@adamsilverstein
5 years ago

use dashed not underscores in div id

#4 @adamsilverstein
5 years ago

  • Focuses javascript added
  • Keywords dev-feedback added

28892.2.diff - clean up div name, use dashes not underscores

#5 @adamsilverstein
5 years ago

This seems super helpful, lets add action feedback for every action where missing, would be helpful if someone go make a list of appropriate actions to work against.

#6 @adamsilverstein
5 years ago

  • Keywords has-patch added; needs-patch removed

#7 follow-up: @afercia
5 years ago

jQuery selector still uses an ID with underscores instead of dashes, updated patch, also rebuilt to work from the SVN install root. Tested and works very nicely, bravo @adamsilverstein :)

@afercia
5 years ago

#8 in reply to: ↑ 7 @adamsilverstein
5 years ago

  • Keywords commit added; dev-feedback removed
  • Milestone changed from Future Release to 4.1

Replying to afercia:

jQuery selector still uses an ID with underscores instead of dashes, updated patch, also rebuilt to work from the SVN install root. Tested and works very nicely, bravo @adamsilverstein :)

Oops, thanks for fixing that :) Thanks for testing, verifying and fixing!

#9 @adamsilverstein
5 years ago

  • Keywords dev-feedback added; commit removed

#10 @azaozz
5 years ago

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

In 30760:

Customizer - Widgets: add feedback for screen readers when moving up or down. Props adamsilverstein, afercia. Fixes #28892.

#11 follow-up: @afercia
5 years ago

Even if it's closed, just wanted to say props should go to Mr. Armfield, his idea is a little gem :) and I totally second it should be also a more strategic fix.

#12 in reply to: ↑ 11 @azaozz
5 years ago

Agreed. Was thinking we should probably be using this method in several other places.

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


5 years ago

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


5 years ago

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


5 years ago

Note: See TracTickets for help on using tickets.