Make WordPress Core

Opened 10 years ago

Closed 9 years ago

Last modified 9 years ago

#28892 closed defect (bug) (fixed)

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

Reported by: grahamarmfield's profile GrahamArmfield Owned by: azaozz's profile 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 10 years ago.
Add screen reader action for widget move up and down
28892.2.diff (1.8 KB) - added by adamsilverstein 10 years ago.
use dashed not underscores in div id
28892.3.diff (1.8 KB) - added by afercia 10 years ago.

Download all attachments as: .zip

Change History (18)

#1 @SergeyBiryukov
10 years ago

  • Keywords needs-patch added

#2 @celloexpressions
10 years ago

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

@adamsilverstein
10 years ago

Add screen reader action for widget move up and down

#3 @adamsilverstein
10 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
10 years ago

use dashed not underscores in div id

#4 @adamsilverstein
10 years ago

  • Focuses javascript added
  • Keywords dev-feedback added

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

#5 @adamsilverstein
10 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
10 years ago

  • Keywords has-patch added; needs-patch removed

#7 follow-up: @afercia
10 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
10 years ago

#8 in reply to: ↑ 7 @adamsilverstein
10 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
9 years ago

  • Keywords dev-feedback added; commit removed

#10 @azaozz
9 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
9 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
9 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.


9 years ago

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


9 years ago

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


9 years ago

Note: See TracTickets for help on using tickets.