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

[GrahamArmfield]

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.

[adamsilverstein]

Add screen reader action for widget move up and down

[adamsilverstein]

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]

use dashed not underscores in div id

[adamsilverstein]

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

[adamsilverstein]

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.

[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 :)

[adamsilverstein]

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!

[azaozz]

In 30760:

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

[afercia]

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.

[azaozz]

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