[wp-trac] [WordPress Trac] #63972: Bulk actions status messages not announced by screen readers

[WordPress Trac]

#63972: Bulk actions status messages not announced by screen readers
-------------------------------------------+-----------------------------
 Reporter:  alh0319                        |      Owner:  (none)
     Type:  defect (bug)                   |     Status:  new
 Priority:  normal                         |  Milestone:  Awaiting Review
Component:  Quick/Bulk Edit                |    Version:
 Severity:  major                          |   Keywords:
  Focuses:  accessibility, administration  |
-------------------------------------------+-----------------------------
 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
 [https://www.w3.org/WAI/WCAG21/Understanding/status-messages.html 4.1.3:
 Status Messages (Level AA)] failure.

 ==== Video of issue
 [https://drive.google.com/file/d/1haBzd895vDScJvifhjV1BPLTZ2OMxlB0/view?usp=sharing
 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
 [https://core.trac.wordpress.org/ticket/58479 #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 [https://developer.mozilla.org
 /en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63972>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform