id summary reporter owner description type status priority milestone component version severity resolution keywords cc focuses 47120 Media modals: Upload errors and field information are not associated with their control afercia antpb "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 {{{ ...
    
        trump.gif         trump.gif exceeds the maximum upload size for this site.     
...
    

Maximum upload file size: 2 MB.

}}} #### 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 {{{ ... ...
    
        

trump.gif

        

trump.gif exceeds the maximum upload size for this site.

    
...
    

Maximum upload file size: 2 MB.

}}} #### 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" defect (bug) closed normal 5.7 Media normal fixed wpcampus-report has-patch commit ui, accessibility