WordPress 6.0 Accessibility Improvements
Improving accessibility requires ongoing effort and this post seeks to highlight some of the ways in which the project has taken action in this area of work for WordPress 6.0, set to release May 24th, 2022. If you’re interested in helping with this work, please join the #accessibility channel in Make Slack and check out how you can get involved. There’s plenty of important work to be done including testing, giving accessibility feedback, and creating PRs to address feedback.
General improvements
Some improvements didn’t fit nicely into a specific area and instead impacted the general experience of using WordPress. This includes everything from adding button text labels to the site editor to displaying the block title when removing a block:
- Use the Post Title as the Featured Image’s alt text when linked to the post.
- Allow tabbing into block placeholder, allowing for actions like tabbing into a block that only contains a block inserter, such as an empty Group block.
- Announce search results in the Block Manager.
- RichText: Reverse disableLineBreaks to determine aria-multiline state.
- Ensure that blocks with a placeholder setup have their description read by VoiceOver, giving context for the block itself and the resulting controls.
- Remove role attributes on SVGs meant for “decoration”.
- Implement a better method for Block Inserter Search focus.
- Improve successful draft save notification for screen readers by making it more descriptive.
- Add button text labels to the site editor.
- Make sure when on the last block, focus cannot enter the block.
- Check link color contrast for the new color panel.
- Conditionally set secondary sidebar landmark region labels.
- Use the block display title in the remove label for the block settings menu to make it clearer what is being removed.
- Avoid duplicate labels for “Save Draft” and “Save as pending” buttons to reduce confusion.
- Plugins: Add focus style to plugin icon link in plugin cards.
- Taxonomy: Show error message for terms without a name. This improves the accessibility of the screen by avoiding the use of color alone to indicate an error.
- Comments: Disable “close on escape” for inline replies when using an IME.
- Toolbar: Don’t hide admin bar text labels from screen readers on small screens.
- React 18: Fix focus loss happening when installing blocks from the directory.
- React 18: Fix focus loss when navigating the guide component.
- React 18: Fix focus loss when creating pages from link control search results.
Navigation block
While the first version of the navigation block that landed in 5.9 ensured many key accessibility features from the start, more work has been done to refine the experience and to ensure changes to the UI continue to include accessibility features:
- The Navigation block is identifiable with aria-label using the menu name field.
- Aria-modal attribution was fixed for when there are multiple navigation blocks on a page.
- The new UI for the navigation block includes accessible auditory feedback on the changes of state as they happen via speak() and/or the
component.
Block improvements
Beyond the navigation block, various additional blocks received updates to improve their respective accessibility, wherever they are used:
- Fix focus problems for blocks that don’t allow content to be edited (ex: Columns, Table, Image).
- Accessibility improvements to the query pagination block, including adding an aria label and putting block attributes within a
element. - Adds an aria label to the search button.
- Remove the aria-label from the site title block to resolve a problem with screen reader announcements.
List View
List View continues to be an important tool, especially in a full site editing world, allowing folks to quickly navigate between complex content. In this release, tons of work was done to allow it to be more high impact for more people:
- Add multi-select support for shift + Home and End keys to make it easier to select a particular set of blocks.
- Prevent focus loss after removing a block from List View.
- Indicate locked status in block label including with aria labels.
- Add block name to Options button, unified labels, and improve focus when using Escape and the Close button.
- Improved keyboard controls and announcements when navigating in List View.
- TreeGrid accessibility: Add Home/End keys to jump to start/end of grid.
- TreeGrid accessibility: Improve browser support for Left Arrow focus to parent row in child row.
- Tree Grid: Fix keyboard navigation for expand/collapse table rows in Firefox.
Media
Expect various aspects of managing media to have updates from adding a “Copy URL to clipboard” option to make it simpler to get the URL you need to ensuring the full permalink for an image is visible when on mobile devices.
- 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.
Quick/Bulk Edit
Quick/Bulk editing has a few improvements that significantly improve keyboard and screen reader operability:
- Fix initial focus and keyboard operability.
- Position action buttons in close proximity, improving accessibility for low vision and cognitive impairments for quick editing.
Login and Registration
The login and registration fields now properly set valid autocomplete attributes with a fix to the generate password button that was misleading:
- Set valid autocomplete attributes for registration and login fields for username, email, and current password.
- Assign appropriate autocomplete values for new and edited user, user email, and password fields.
- Remove aria-expanded from “Generate Password” button since the button itself does not expand or collapse anything.
Themes
A few fixes are in place for various default themes and the overall process of hovering over theme details now has more consistency:
- 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.
Thank you to @joedolson and @alexstine for collaborating on this post.
