#47122: Media views: fix unlabelled controls
-------------------------------------------+-----------------------------
Reporter: afercia | Owner: (none)
Type: defect (bug) | Status: new
Priority: normal | Milestone: Awaiting Review
Component: Media | Version:
Severity: normal | Keywords: has-screenshots
Focuses: ui, accessibility, javascript |
-------------------------------------------+-----------------------------
In the various media views, there are various form controls that are
unlabelled. That is, either they don't have any associated `<label>`
element, `aria-label` attribute, etc. or they have an empty label.
Properly labelling form controls is essential for a basic level of
accessibility, as labels give form controls their accessible name. The
name is then used by assistive technologies to inform users "what" the
form control is about.
Not to mention visible `<label>` elements are clickable and help users
with motor impairments to set focus on the associated form control.
A few examples:
The "Insert form URL" input field is wrapped in a `<label>` that doesn't
contain any text:
[[Image(http://cldup.com/XfLXwgb0O6.png)]]
Worth noting the [https://make.wordpress.org/core/handbook/best-practices
/coding-standards/accessibility-coding-standards/#labeling WordPress
accessibility coding standards] recommend explicitly associated labels
(with for/id) attributes instead of implicitly (wrapping) labels.
The "Link To" select and input field miss an associated label: the visible
text "Link To" is just text within a `<span>` element:
[[Image(http://cldup.com/CnUp1FSvcW.png)]]
Same when "custom url" is selected and the input field becomes editable:
[[Image(http://cldup.com/r9Rw0lFOjX.png)]]
I'd like to strongly recommend to make a complete audit of the form
controls in the media views and address all the occurrences of unlabelled
form controls.
--
Ticket URL: <https://core.trac.wordpress.org/ticket/47122>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform