WordPress recently announced that version 6.0, due out in May 24, 2022, will feature a significant amount of accessibility improvements that will make using WordPress easier for users and bring it closer to WCAG 2.0 AA compliance.
WordPress Accessibility
WordPress maintains inclusiveness and accessibility as a core goal “as much as possible” for all WordPress releases.
In order to achieve this goal WordPress has an internal team that is focused on accessibility.
The WordPress statement of accessibility notes:
“The WordPress community and the open source WordPress project is committed to being as inclusive and accessible as possible.
We want users, regardless of device or ability, to be able to publish content and maintain a website or application built with WordPress.”
Accessibility Improvements in WordPress 6.0
WordPress offered a sneak preview of the numerous improvements coming to WordPress 6.0, currently scheduled for May 24, 2022.
Alt Text
An improvement to the alt text used on the featured image is to use the post title as the alt text for it when the featured image is linked to the post.
Improvements to Tabbing
WordPress noted an addition that allows tabbing into a block placeholder.
The GitHub pull request describes this fix:
“When focus is on a block with a placeholder (e.g. Image or Columns block) and we are in Edit mode, we should be able to Tab into the placeholder controls.
This makes the placeholder controls keyboard accessible when the “Contain text cursor inside block” preference is enabled (arrow key navigation in or out of a block doesn’t work with that preference).
It also makes it possible to tab into a block that only contains a block inserter, such as an empty Group block.”
Screen Reader Related Improvements
A number of the improvements are related to making it easier for publishers who use screen readers to navigate through the blocks and get things done.
- Announce search results in the Block Manager.
- Ensure that blocks with a placeholder setup have their description read by VoiceOver, giving context for the block itself and the resulting controls.
- Improve successful draft save notification for screen readers by making it more descriptive.
“…screen readers now announce Draft saved instead of just Saved.” - Add button text labels to site editor.
“…this adds an option to the site editor to show text labels instead of icons on interface buttons.” - Avoid duplicate labels for “Save Draft” and “Save as pending” buttons to reduce confusion
A particularly interesting fix is this one: No error message provided upon incomplete input in Tags Administration Screen. It was discovered during an accessibility audit that when a user leaves a required name field blank in the “tags” editing section that there is a visual color notice of an error but that no actual error message was generated. This is fixed in version 6.0 of WordPress.
Another useful fix involves a flaw in how the toolbar functions in iOS and a lack of text labels.
According to the GitHub pull request:
“When you use VoiceOver on iOS, the link to open the “New” dropdown menu in the toolbar is read out as “post new.php”.
Aria-Related Accessibility Fixes to WordPress 6.0
RichText: Reverse disableLineBreaks to determine aria-multiline state.
Remove role attributes on SVGs meant for “decoration.”
This is an improvement that one of the WordPress contributors called a small change that resulted in an important improvement. This is about adding a role=”img” tag but without adding an aria-label to SVGs. So what they did was to remove the role attribute, which fixed the issue.
Improvements to the Navigation Block
The improvements to the navigation block are going to be welcomed by many.
For example, several of the fixes make it easier for those using screen readers to understand situations where there are multiple navigation menu blocks, like a high level site navigation menu and a second level menu for categories, as well as improving the user interface feedback for screen readers when creating a new menu.
There are additional improvements to various other blocks, including the addition of an aria label to the search button.
Improvements to WordPress List View
The List View is a user interface for navigating through sections of content.
The list view interface is available through an icon at the top of the page in the WordPress toolbar.
Screenshot of List View Toggle Button
Activating the icon through the toggle button reveals the drop down menu that stays open while in use.
WordPress announced eight improvements to the list view user interface that among other things improves the ability to select specific blocks, improve aria labels, improves keyboard controls and announcements while navigating through the list view and other improvements.
Improvements to Handling Media
WordPress is also introducing improvements to how media is handled.
According to WordPress:
- “Preserve attachment properties on cropping custom logo. This means that the alternative text, title, description, and caption of an image will migrate over to the cropped copy of the image after cropping.
- Stop arrow keys switching media if URL focused.
- Add a “Copy URL to clipboard” function to the list table view.
- Set break-word on sample permalink so the full permalink will be visible on mobile devices in posts, media, and comments.
- Remove target blank attribute from media uploader edit links.
- Remove target=”_blank” from the link to change permalink structures and change link text to clarify link purpose.”
Additional Accessibility Improvements
WordPress 6.0 also improves screen reader and keyboard functionality in the Quick/Bulk editing, fixes issues with the login and registration buttons to add autocomplete values but in a way that doesn’t represent a security issue since the values are stored in the browser (more here).
Lastly there were miscellaneous accessibility improvements to official WordPress themes:
- “Twenty Nineteen: Override flex order in comment form.
- Twenty Twenty: Transform search into a dialog role and fix the handling of aria-expanded to synchronize mobile and desktop buttons.
- Twenty Twenty-One: Reverse logic for prefers-reduced-motion media query.
- Use the pointer cursor when hovering over the theme details button for consistency with the theme card.”
WordPress 6.0 Accessibility
The WordPress accessibility team put a lot of effort into making WordPress 6.0 accessible and inclusive, in accordance with their stated goal of making WordPress WCAG 2.0 AA compliant as possible.
