WordPress.org

Make WordPress Core

Opened 6 weeks ago

Last modified 6 days ago

#47144 new defect (bug)

Text inadvertently rendered by assistive technologies

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

Description

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

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

Issue description
Users of assistive technologies such as screen readers who navigate to
the bottom of the Settings panels will find a button which they cannot
activate (nor see if sighted) called "Select files".

Additionally, if users change the color modes in the popup custom color
picker, the current mode is announced in a live region. However, long
after users are done with choosing a color, even after choosing to edit
another block on the page, when they reach the bottom of the Block panel
they'll still hear "hex color mode active". At this point, users may
not remember what this was for and have no idea what this is
referencing, as it no longer has any context.

Issue Code

    <!-- color announcement -->


    <div id="wp-a11y-speak-polite" aria-live="polite" aria-relevant="additions text" aria-atomic="true" class="screen-reader-text wp-a11y-speak-region">Hex color mode active</div>





    <!-- select files -->


    <div class="wp-uploader-browser" id="wp-uploader-browser-o_1d2saqvj4l3skgruvl1ejo1ejp3" style="position: fixed; top: -1000px; left: -1000px; height: 0px; width: 0px;">


        <button type="button" class="browser button button-hero" id="__wp-uploader-id-1" style="display: inline-block; position: relative; z-index: 1;">Select Files</button>


    </div>

Remediation Guidance
When users have performed an action, such as clicking another block (or
whatever action causes "No block selected" to appear in the Block
panel), clear the live region so that users who encounter it while
manually reading do not hear it. Refill the live region when users
change color modes.

The hidden file selection button should be hidden from all users with
display: none whenever it is not visible nor meant to be used.

Recommended Code

    <!-- color announcement -->


    <div id="wp-a11y-speak-polite" aria-live="polite" aria-relevant="additions text" aria-atomic="true" class="screen-reader-text wp-a11y-speak-region"> </div>





    <!-- select files -->


    <div class="wp-uploader-browser" id="wp-uploader-browser-o_1d2saqvj4l3skgruvl1ejo1ejp3" style="display:none;">


        <button type="button" class="browser button button-hero" id="__wp-uploader-id-1" style="display: inline-block; position: relative; z-index: 1;">Select Files</button>


    </div>

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-41 in Tenon's report

Note: The a11y-speak live regions are used in core as well. In several places. Thus, clearing the live regions shouldn't depend on a specific user action or scenario. It would require a more generic solution, preferably avoiding setTimeout() which seems to me a very fragile solution by its own nature.

Change History (5)

#1 @afercia
6 weeks ago

  • Milestone changed from Awaiting Review to 5.3

#2 @afercia
9 days ago

Related: #47156.

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


6 days ago

#4 @anevins
6 days ago

2 issues being discussed;

1) The "Select files" button isn't hidden to all users, only to some;
2) There is a stray aria-live region that has information no longer relevant to the user

With 2 solutions:
1) As stated in the ticket, this should be an easy fix with 'display none' css
2) We can remove the region's text contents when focusing onto another field

#5 @afercia
6 days ago

Note: I split the live region issue to https://core.trac.wordpress.org/ticket/47156

Note: See TracTickets for help on using tickets.