Bulk actions status messages not announced by screen readers

[alh0319]

Bulk edit actions display status messages visually, but the screen reader does not announce these messages. Here are two example status messages:

Success message after posts are edited:

<div id="message" class="notice is-dismissible updated"><p>1 post updated.</p><button type="button" class="notice-dismiss"><span class="screen-reader-text">Dismiss this notice.</span></button></div>

Error message if no posts are selected and the apply button is triggered:

<div id="no-items-selected" class="notice notice-error is-dismissible"><p>Please select at least one item to perform this action on.</p><button type="button" class="notice-dismiss"><span class="screen-reader-text">Dismiss this notice.</span></button></div>

Without a screen reader announcement, it will be difficult for blind and visually impaired users to know there is an error or that their changes were successfully applied. This is a ​4.1.3: Status Messages (Level AA) failure.

Video of issue

​Video of bulk edit status messages with VoiceOver

Recommended Fix(es)

These messages are added to the page in two different ways, which will require two different approaches to fixes.

Bulk edit causes the page to reload, at which point the success messages are added to the page. In this case, the message is not being read out because the focus is not set on the message when the page reloads. To make screen reader users announce the success message, the focus needs to be set on the message container when the page reloads.

Alternatively, the submit action could change to JavaScript/ajax and the message could be inserted in an existing container with an alert role.

The error message was added in #58479 and is added to the page via JavaScript. This message is not announced by screen readers because it is not in a container with an ​alert role that screen readers will monitor for changes and read accordingly.

To fix the error message, there should be an empty div on the page for notices like this:

<div role="alert"></div>

Then, when an error is encountered, the message should be inserted into this container, which will trigger the screen reader to read the text of the error.

There may be other parts of the admin that have JavaScript error or status messages that screen readers are not announcing. I'd recommend adding this alert container on every page in the admin and providing a finction or filter that would allow plugin developers to make use of it as well.

[alh0319]

This issue also applies to messages when the trash function is used:

<div id="message" class="notice is-dismissible updated"><p>1 product moved to the Trash. <a href="edit.php?post_type=product&amp;doaction=undo&amp;action=untrash&amp;ids=99&amp;_wpnonce=dc068f65e1">Undo</a></p><button type="button" class="notice-dismiss"><span class="screen-reader-text">Dismiss this notice.</span></button></div>

and

<div id="message" class="notice is-dismissible updated"><p>1 product restored from the Trash.</p><button type="button" class="notice-dismiss"><span class="screen-reader-text">Dismiss this notice.</span></button></div>

[joedolson]

@alh0319 The error message you reference from #58479 already has a message announcement via wp.a11y.speak(); can you inspect the speak notification container and verify whether this is a case where the announcement isn't being spoken, or that it's not being sent in your test case?

[alh0319]

The Bulk actions error message is inserting text into the polite container:

<div id="a11y-speak-polite" class="a11y-speak-region" style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;" aria-live="polite" aria-relevant="additions text" aria-atomic="true">Please select at least one item to perform this action on.</div>

I retested that item and I can hear the error message in both NVDA and VoiceOver. It seems slower in VoiceOver (Chrome) so I may have just not paused long enough. I think that error message listed above can be considered a false positive.

The remaining issue would be the success messages and trash notifications that are shown on page reload.

[joedolson]

Thanks for checking! The messages shown on page reload aren't status messages, so that's not technically a WCAG failure; but they certainly are things that can be improved.

See #50486, which is the umbrella ticket for these types of issues.

[joedolson]

The main reason this hasn't been addressed yet is scope...just assessing the scope of what needs to be done is pretty enormous.