Errors and field information are not associated with their control

[karlgroves]

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.

[]{.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

• 1.3.1 Info and Relationships
  (Level A)
• 1.3.3 Sensory Characteristics
  (Level A)
• 3.3.1 Error Identification
  (Level A)
• 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 and funded by WP Campus. This issue is GUT-60 in Tenon's report

[afercia]

Worth noting the media modals aren't part of Gutenberg. This issue should be moved to the core Trac under the Media component.

[afercia]

Moved to Trac: https://core.trac.wordpress.org/ticket/47120