[wp-trac] [WordPress Trac] #47144: Text inadvertently rendered by assistive technologies

[WordPress Trac]

#47144: Text inadvertently rendered by assistive technologies
-------------------------+-------------------------------------------------
 Reporter:  anevins      |      Owner:  (none)
     Type:  defect       |     Status:  new
  (bug)                  |
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Media        |    Version:
 Severity:  normal       |   Keywords:  needs-patch wpcampus-report needs-
  Focuses:               |  screenshots
  accessibility          |
-------------------------+-------------------------------------------------
 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.''

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