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.giftrump.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