[wp-trac] [WordPress Trac] #47120: Media modals: Upload errors and field information are not associated with their control

[WordPress Trac]

#47120: Media modals: Upload errors and field information are not associated with
their control
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:  (none)
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Future Release
Component:  Media              |    Version:
 Severity:  normal             |   Keywords:  wpcampus-report
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 Moved from the
 [https://github.com/WordPress/gutenberg/issues/created_by/karlgroves
 WPCampus accessibility report issues on GitHub], see
 https://github.com/WordPress/gutenberg/issues/15302

 Errors and field information are not associated with their control

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


 #### Issue description


 When users attempt to upload an image in the "Featured Image" modal
 dialog, and the image is too large, an error message appears visibly.
 However blind and low-vision users are not alerted with the
 announcement, and focus remains on the upload button (except in Edge
 browser, where focus goes back to the top of the page after a failed
 upload).

 The 2MB limit is also not programmatically associated with the "Select
 Files" button, so blind and low-vision users may miss that limit unless
 they happen to navigate past the button in exploration of the whole
 modal.

 Users who are zoomed-in or using magnification software may not see the
 error as it may be outside their viewports. Screen reader users remain
 on the "Select Files" button and need to navigate around to see if
 there are any errors or if the upload was successful.

 [![Screenshot of the error message and the 2MB limit informative
 text](/images/17718_feature_image_bigly_yuge.png)]{.image-wrap}



 ##### Issue Code

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


     ...


     <div class="upload-errors">


         <div class="upload-error">


             <span class="upload-error-filename">trump.gif</span>


             <span class="upload-error-message">trump.gif exceeds the
 maximum upload size for this site.</span>


         </div>


     </div>


     ...


     <div class="post-upload-ui">


         <p class="max-upload-size">Maximum upload file size: 2 MB.</p>


     </div>

 }}}



 #### Remediation Guidance


 Put `role=alert` on the error, and on any additional error or success
 messages that are added as users upload media. This will allow screen
 reader users to know immediately that there is an error.

 Consider moving focus to either the error container or the error
 container close button when the error appears. This will ensure that
 Braille-only and screen magnification users are alerted that an error
 has occurred.

 Normally, moving focus to errors like this is not advised, however
 currently the error and the informative text are visually far away from
 the "Select Files" button, and neither Braille nor screen
 magnification software announce status messages. A better solution is to
 change the design to bring the error visually directly under the
 "Select Files" button (while still also using a live region on the
 error message).

 Programmatically associate the informative text ("max 2MB size") with
 the "Select Files" button using `aria-labelledby`. Do this by giving
 the informative text container an `id` value and set this in order in
 an `aria-labelledby` attribute on the "Select Files" button. Include
 the button's own `id` token in the `aria-labellebdy` so that the
 button's text isn't overridden.



 ##### Recommended Code

 {{{
     <button type="button" class="..." aria-labelledby="__wp-uploader-id-4
 post-upload-info" id="__wp-uploader-id-4" style="...">Select
 Files</button>


     ...


     <button type="button" class="...">


         <span class="screen-reader-text">Dismiss Errors</span>


     </button>


     ...


     <div class="upload-errors">


         <div class="upload-error" role="alert">


             <h3 class="...">trump.gif</h3>


             <p class="...">trump.gif exceeds the maximum upload size for
 this site.</p>


         </div>


     </div>


     ...


     <div class="post-upload-ui" id="post-upload-info">


         <p class="max-upload-size">Maximum upload file size: 2 MB.</p>


     </div>

 }}}


 #### Relevant standards

 -   [https://www.w3.org/TR/WCAG20/#content-structure-separation-
 programmatic 1.3.1 Info and Relationships (Level A)]
 -   [https://www.w3.org/TR/WCAG20/#content-structure-separation-
 understanding 1.3.3 Sensory Characteristics (Level A)]
 -   [https://www.w3.org/TR/WCAG20/#minimize-error-identified 3.3.1 Error
 Identification (Level A)]
 -   [https://www.w3.org/TR/WCAG20/#minimize-error-cues 3.3.2 Labels or
 Instructions (Level 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](https://www.tenon.io) and funded
 by [WP Campus](https://wpcampus.org/). This issue is GUT-60 in Tenon's
 report

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