WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 44 hours ago

#47146 assigned defect (bug)

Live search does not announce results to assistive technologies

Reported by: anevins Owned by: afercia
Milestone: 5.3 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots wpcampus-report has-patch
Focuses: accessibility, javascript Cc:

Description

Moved from the WPCampus accessibility report issues on GitHub, see https://github.com/WordPress/gutenberg/issues/15294

  • Severity:
    • Medium
  • Affected Populations:
    • Blind
    • Low-Vision
    • Cognitively Impaired
  • Platform(s):
    • Windows - Screen Reader
    • Mac - VoiceOver
    • Android - TalkBack
    • iOS - VoiceOver
  • Components affected:
    • Media Dialog

Issue description
When users in the "Featured Image" modal's "Media Library" do a
search using the search/filter control, the results change dynamically,
however these changes are not announced to screen readers, so blind and
low-vision users cannot tell what, if anything, matches the search
without manually reading through the image list.

Assistive technologies rely on state information to understand the
behaviour of dynamic content, and if this information is incomplete or
inaccurate it may create a confusing experience for users.

Issue Code

    <div class="media-toolbar-primary search-form">


        <label for="media-search-input" class="screen-reader-text">Search Media</label>


        <input type="search" placeholder="Search media items..." id="media-search-input" class="search">


    </div>

Remediation Guidance
Use a live region to announce the number of matched results, updating as
users type and delete characters (ideally with a short timeout or
throttling so that the announcements don't interfere with user typing).

Relevant standards
N/A

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by Tenon and funded by WP Campus. This issue is GUT-63 in Tenon's report

Attachments (2)

57186783-46999500-6e9a-11e9-8473-8f8d18e486b2.png (365.2 KB) - added by anevins 6 weeks ago.
47146.diff (4.7 KB) - added by afercia 44 hours ago.

Download all attachments as: .zip

Change History (7)

#1 @afercia
6 weeks ago

  • Milestone changed from Awaiting Review to 5.3

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


2 weeks ago

#3 @antpb
2 weeks ago

This issue was discussed in the recent Media meeting and one approach shared by @joemcgill is utilizing wp.a11y.speak() to update users on the changes. We should get a a11y experts opinion on that, but this is one approach. Anyone have any suggestions?

Link to speak docs: https://make.wordpress.org/accessibility/handbook/markup/wp-a11y-speak/

#4 @afercia
2 weeks ago

@antpb thanks for looking into this.

Implementation would be pretty simple, you can have a look at the Themes search or the Plugins search. Worth noting:

  • the speak message needs to be debounced while users are typing (sams of themes/plugins search)
  • this needs to be implemented also in the Media Library grid (and wherever there's a search)

@afercia
44 hours ago

#5 @afercia
44 hours ago

  • Focuses javascript added
  • Keywords has-patch added; needs-patch removed
  • Owner set to afercia
  • Status changed from new to assigned

47146.diff is a proof of concept. It implements a spoken message to announce the search results via wp.a11y.speak() both in the Media modal and in the Media Library.

I'd greatly appreciate feedback from the media team and backbone.js models experts :) WordCamp Europe 2019 contributor day is in two days and it would be a great opportunity to work together on this.

Note: See TracTickets for help on using tickets.