Form controls are still unlabelled in WordPress media views. Some don’t have associated <label> element, <aria-label>attribute or some have an empty label.
Properly labeling form controls is essential for a basic level of accessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/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.
Also, the WordPress accessibility coding standards recommend explicitly associated labels (with for/id) attributes instead of implicitly (wrapping) labels.
WordPress 5.3 will now include some accessibility improvements of all the media views from controls:
- Changes the media views form controls to have explicitly associated labels with for/id attributes
- Adds a few missing labels / aria-labels
- Improves a few existing labels / aria-labels
- Improves semantics in a few places, by adding visually hidden headings, fieldset + legend elements, aria-describedby attributes
- Improves the image custom size input fields and their labeling
- Adds role=”status” to the “saved” indicator so that status messages are announced to assistive technologies
- Swaps the columns source order in the image details template, to make visual and DOM order match
- Swaps the “Replace” and “Back” buttons source order in the Replace Image view, to make visual and DOM order match
- Gallery settings: move checkbox label to the right: checkboxes are supposed to have labels on the right
- Merge similar strings, unified to “Drop files to upload” (removed “Drop files here”, and “Drop files anywhere to upload”)
- Makes the “upload-ui” consistent across the media views
- Hides the IE 11 “X” ::-ms-clear button in the Insert from URL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org field, as it conflicts with the uploading spinner
- Adds comments to all the media templates to clarify their usage
- Slightly increases the vertical spacing between form fields in the media sidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.
- Removes some CSS Cascading Style Sheets. selectors introduced as backwards compatibility for WordPress pre-4.4
- Removes some CSS still targeting Internet Explorer 7 and 8
- Fixes buttons group layout for Internet Explorer 11
The most important change to clarify is that the labeling changed from this (implicit labeling):
<label>
My input
<input type="text" />
</label>
to this (explicit labeling):
<label for="my-input">My input</label>
<input type="text" id="my-input" />
Simplified code sample
More details on these improvements can be found in Trac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticket Created for both bug reports and feature development on the bug tracker. #47122.
This note was drafted by @justinahinon and proofread by @afercia.
#5-3, #accessibility, #dev-notes, #media
