Opened 3 years ago
Closed 2 years ago
#56753 closed defect (bug) (maybelater)
Media upload file input missing form label
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Priority: | normal | |
Severity: | normal | Version: | 6.0.2 |
Component: | Upload | Keywords: | |
Focuses: | ui, accessibility | Cc: |
Description (last modified by )
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:
Screenshots:
URL: your-site-path/wp-admin/upload.php
WordPress version: 6.0.2
Here, I have provided steps to reproduce this issue.
- Download "WAVE Evaluation Tool" Chrome extension.
- Go to admin dashboard and open media library form (wp-admin/upload.php) in Grid mode.
- Then click on "WAVE" extension and check its report.
- Turn off Styles to find the file input.
Thanks you so much,
Attachments (2)
Change History (9)
#1
@
3 years 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)
This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.
3 years ago
#3
@
3 years 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.
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
3 years ago
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
2 years ago
#7
@
2 years 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.
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 withdisplay: none
.