Opened 6 years ago
Last modified 10 months ago
#47137 accepted defect (bug)
Insufficient form semantics
Reported by: | anevins | Owned by: | joedolson |
---|---|---|---|
Milestone: | Future Release | Priority: | normal |
Severity: | minor | Version: | |
Component: | Media | Keywords: | needs-patch has-screenshots wpcampus-report form-controls |
Focuses: | ui, accessibility | Cc: |
Description
Moved from the WPCampus accessibility report issues on GitHub, see
https://github.com/WordPress/gutenberg/issues/15305
- Severity:
- Low
- Affected Populations:
- Blind
- Cognitively Impaired
- Platform(s):
- All / Universal
- Components affected:
- Media Dialog
Issue description
The "Media Library" panel of the "Featured Image" modal dialog lists
some filtering of options, a group of checkboxes, a sub-form of relevant
meta-data, and a "Select" button. However there are no semantics which
associate these controls together, nor give the orphan "Select" button
any meaning relative to the selected checkbox/image.
Additionally, a link taking users to a new window/tab with an editing
form does not inform users that it opens a new window or tab.
Semantic markup is vital for assistive technology users, to convey the
structure and relationships between information. When appropriate
semantic markup is not used, it may be more difficult for such users to
understand what the content means, and to comprehend the structure that
the visual presentation conveys.
Issue Code
<div class="attachments-browser">... <div class="media-toolbar"> <div class="media-toolbar-secondary"> <label for="media-attachment-date-filters" class="screen-reader-text">Filter by date</label> <select id="media-attachment-date-filters" class="attachment-filters">...</select> </div> <div class="media-toolbar-primary search-form"> <label for="media-search-input" class="screen-reader-text">Search Media</label> <input type="search" placeholder="Search media items..." id="media-search-input" class="search"> </div> </div> <ul tabindex="-1" class="..."><li ...>...</li></ul> ... <div tabindex="0" data-id="159" class="attachment-details save-ready"> <h2>Attachment Details <span>...</span></h2> <div class="attachment-info"> <div class="thumbnail thumbnail-image">...</div> ... <div class="dimensions">1820 × 1213</div> <a class="edit-attachment" href="...&action=edit..." target="_blank">Edit Image</a> <button type="button" class="...">Delete Permanently</button> </div> </div> <label class="..."> <span...>URL</span> <input type="text" value="...this-is-fine.jpg" readonly=""> </label> ... </div> <form class="compat-item"></form> </div> </div> <div class="media-toolbar-primary search-form"> <button type="button" class="...">Select</button> </div> </div>
Remediation Guidance
Turn the form into an actual <form>
element.
Wrap <fieldset>
tags (with accompanying <legend>
elements)
around groups of controls explaining what they are.
Use the id on the <form>
element with the form attribute
on the "Select" button to designate this as the form's submit
button.
Add text to the "Edit" link that opens in a new window or tab,
informing users that this will happen. When the form in the new
tab/window is submitted, users should be brought back to the original
form.
Recommended Code
<div class="attachments-browser">... <form id="media_form"> <fieldset class="media-toolbar"> <legend class="screen-reader">Filter media options</legend> <div class="media-toolbar-secondary"> <label for="media-attachment-date-filters" class="screen-reader-text">Filter by date</label> <select id="media-attachment-date-filters" class="attachment-filters">...</select> </div> <div class="media-toolbar-primary search-form"> <label for="media-search-input" class="screen-reader-text">Search Media</label> <input type="search" placeholder="Search media items..." id="media-search-input" class="search"> </div> </fieldset> <fieldset> <legend class="screen-reader">Media options result</legend> <ul tabindex="-1" class="..."><li ...>...</li></ul> </fieldset> ... <fieldset tabindex="0" data-id="159" class="attachment-details save-ready"> <legend>Attachment Details <span>...</span></legend> <div class="attachment-info"> <div class="thumbnail thumbnail-image">...</div> ... <div class="dimensions">1820 × 1213</div> <a class="edit-attachment" href="...&action=edit..." target="_blank">Edit Image <span class="screen-reader"> Opens in a new window</span></a> <button type="button" class="...">Delete Permanently</button> </div> </div> <label class="..."> <span...>URL</span> <inputtype="text" value="...this-is-fine.jpg" readonly=""> </label> ... </div> </fieldset> </form> <div class="media-toolbar-primary search-form"> <button form="media_form" type="button" class="...">Select</button> </div> </div>
Relevant standards
- 1.3.1 Info and Relationships (Level A) https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic
- 1.3.3 Sensory Characteristics (Level A) https://www.w3.org/TR/WCAG20/#content-structure-separation-understanding
- 3.3.2 Labels or Instructions (Level A) https://www.w3.org/TR/WCAG20/#minimize-error-cues
- 4.1.2 Name, Role, Value (Level A) https://www.w3.org/TR/WCAG20/#ensure-compat-rsv
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-50 in Tenon's report
Attachments (1)
Change History (42)
This ticket was mentioned in Slack in #design by karmatosed. View the logs.
5 years ago
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
5 years ago
This ticket was mentioned in Slack in #core-media by anevins. View the logs.
5 years ago
This ticket was mentioned in Slack in #core-media by anevins. View the logs.
5 years ago
This ticket was mentioned in Slack in #core-media by anevins. View the logs.
5 years ago
#11
@
5 years ago
As there are concerns with the amount of testing involved with making these three changes at once, we'll be splitting these tickets out into individual problems. Some of which can be tackled as part of contribution days.
This ticket was mentioned in Slack in #core-media by mike. View the logs.
5 years ago
This ticket was mentioned in Slack in #core-media by mike. View the logs.
5 years ago
#15
@
5 years ago
Brought up this ticket in media triage.
It could really use an owner -- the next step, though, is research into where changes would be necessary to wrap the fields in a form. Whether you have time to write a patch or not, research/comments here on findings would be really helpful.
This ticket was mentioned in Slack in #core-media by antpb. View the logs.
5 years ago
This ticket was mentioned in Slack in #core-media by mike. View the logs.
5 years ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
5 years ago
#19
@
5 years ago
- Milestone changed from 5.3 to Future Release
Discussed during today's accessibility bug-scrub: giving WordPress 5.3 Beta 2 is very close, sadly agreed to punt this ticket to Future Release.
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
5 years ago
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
5 years ago
This ticket was mentioned in Slack in #core-media by antpb. View the logs.
5 years ago
This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.
5 years ago
#25
@
5 years ago
- Milestone changed from 5.4 to Future Release
As per today’s bug scrub, let's move back this one to Future release
as we are at 14 days from 5.4 beta 1.
#26
@
2 years ago
- Milestone changed from Future Release to 6.2
- Owner set to joedolson
- Status changed from new to accepted
This ticket was mentioned in Slack in #accessibility by joesimpsonjr. View the logs.
2 years ago
This ticket was mentioned in Slack in #core-media by joedolson. View the logs.
22 months ago
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
22 months ago
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
22 months ago
This ticket was mentioned in Slack in #accessibility by ryokuhi. View the logs.
22 months ago
#32
@
22 months ago
- Milestone changed from 6.2 to 6.3
Due to the complexity of the ticket, after discussing about it during the Accessibilty Team's weekly bug scrub in the last few weeks, we're re-milestoning this ticket for 6.3, now that the branch is open.
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 joedolson. View the logs.
17 months ago
This ticket was mentioned in Slack in #core by oglekler. View the logs.
15 months ago
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
14 months ago
This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.
14 months ago
This ticket was mentioned in Slack in #core by rajinsharwar. View the logs.
10 months ago
#41
@
10 months ago
- Milestone changed from 6.5 to Future Release
This ticket was discussed in a recent bug scrub, and we decided to punt this to a future Release. There isn't a patch still for this, and just 12 days away from Beta 1. If in the meantime some activity happens and any committer feels good confidence in the fix, we can re-add it to the 6.5 milestone.
@afercia provided some insight into this issue with some suggestions in the recent Media Meeting. This info highlights a few challenges in solving the issue:
“Re: 47137 I’d recommend all the points from the audit. Two considerations though: