WordPress 5.5 introduced several improvements in the 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) of the Media component.
Improvements in the accessibility of the status and error messages in the Image Editor
On previous WordPress versions on the Edit Media page, when activating the “Restore Image” button, a message was shown above the image while the Restore button itself disappears.
Since the button would have been focused at the time when activated by keyboard, this causes the keyboard focus position to be lost and reset to the top of the page.
The message itself is also not announced by screen readers, and may not be visible to screen magnification users if it appears outside their current view.
WordPress 5.5 improved the behavior of notices inside the Edit Media page with the followings:
- Improves the focus management by moving focus to the notices, if any, or to the first “tabbable” element: this avoids a focus loss and helps Braille-only and screen magnification users to be aware of the messages.
- Adds an ARIA role
alert to all the notices. - Uses
wp.a11y.speak() to announce messages to assistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks.
https://en.wikipedia.org/wiki/Assistive_technology: this leads to all visual users seeing the messages while assistive technology users will get an audible message. - Uses
wp.i18n for translatable strings in wp-admin/js/image-edit.js
Related 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.: #47147.
Fix the Image Editor mismatching keyboard focus order and visual reading order
On the Edit Media page, the keyboard focus order and the visual reading
order were presented in a zig-zag pattern.
This was causing some accessibility issues for users who have a cognitive disability as they may be confused by an unexpected or illogical focus order.
WordPress 5.5 fixed that by swaping the DOM order of the two main columns within the admin (and super admin) Image Editor.
See more details in the Trac ticket #47136 and the attached changeset.
Improve the appearance of image editor on small and medium screens
WordPress 5.5 added new CSS rules to improve the appearance of image editor on small and medium screens. The new rules prevent the main area of Edit Media screen from being pushed down too far.
See the related ticket on Trac: #47136.
Props to @afercia for proofreading.
#5-5, #accessibility, #dev-notes, #media
