Make WordPress Core

#56753 closed defect (bug) (maybelater)

Media upload file input missing form label

Reported by: viralsampat's profile viralsampat Owned by:
Milestone: Priority: normal
Severity: normal Version: 6.0.2
Component: Upload Keywords:
Focuses: ui, accessibility Cc:

Description (last modified by sabernhardt)

Hello Team,

I have started working on WordPress accessibility. I have checked WordPress media library admin form and checked its accessibility using "WAVE Evaluation Tool" and found two errors in media library admin form.

Here, I have attached its screenshots:


WAVE summary
WAVE details

URL: your-site-path/wp-admin/upload.php

WordPress version: 6.0.2

Here, I have provided steps to reproduce this issue.

  1. Download "WAVE Evaluation Tool" Chrome extension.
  2. Go to admin dashboard and open media library form (wp-admin/upload.php) in Grid mode.
  3. Then click on "WAVE" extension and check its report.
  4. Turn off Styles to find the file input.

Thanks you so much,

Attachments (2)

Change History (9)

#1 @sabernhardt
22 months ago

  • Description modified (diff)
  • Keywords needs-patch needs-design removed
  • Summary changed from Accessibility Missing form label to Media upload file input missing form label
  • Type changed from feature request to defect (bug)

Thanks for the report!

The file input missing a label is from mOxie, and it has aria-hidden:
<div id="html5_1geoo4skn1io81n4c1jn8q4a1k203_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; overflow: hidden; z-index: 0;"><input id="html5_1geoo4skn1io81n4c1jn8q4a1k203" type="file" style="font-size: 999px; opacity: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" multiple="" accept="" tabindex="-1" aria-hidden="true"></div>

The empty heading WAVE reports is an H1 within media-frame-title, which is hidden with display: none.

This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.

22 months ago

#3 @costdev
22 months ago

As @sabernhardt said, the input in question has aria-hidden="true" and the empty heading is inside an element hidden with display: none;. I tried browsing with NVDA and Narrator, but was unable to navigate to either of these elements.

#4 @sabernhardt
21 months ago

  • Keywords needs-testing removed

Related: #47611 and #47144

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.

21 months ago

This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.

20 months ago

#7 @ryokuhi
20 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from new to closed

We reviewed this ticket today during the Accessibility Team's weekly bug scrub.

At the moment, the two errors identified by Wave have a limited impact on people with disabilities, as these errors are related to elements that are hidden to both people using assistive technologies and people not using them.

Since solving such issues would probably involve a lot of effort without any real impact on users, we've decided to close this ticket as maybelater, as there are tickets that probably have a bigger impact on people with disabilities.

Note: See TracTickets for help on using tickets.