WordPress 5.5 Core Editor Accessibility Improvements

In an effort to better communicate the specifics of what’s coming to the editor in WordPress 5.5, this post is meant to list the various accessibilityAccessibility 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) improvements shipping with this upcoming release on August 11th. Going forward, the “What’s Next in Gutenberg” posts will have clearer accessibility-related callouts to make it easier to follow relevant issues more regularly. The work to improve WordPress is never finished, and with more releases will come more improvements, but it’s encouraging to see progress in so many areas. 

Thanks to everyone who worked hard to get these improvements in place in time for 5.5! 

In most sections, explorations are shared of specific high impact improvements. Please view individual issues for more details. 

New Editor Design

WordPress 5.5 brings numerous changes to the look and feel of the editor, informed by the goal of reducing complexity by simplifying iconography, color palette, focus, and general interface. As more features are added to the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. editor, a simpler and clearer design allows the interface to scale more gracefully. Examples include: the effort to create a single toolbar to have fewer tab stops, work done to make the single primary toolbar bigger (more tappable with a larger touch area), and higher contrast. Some changes, such as removing borders around selected blocks, have inspired spirited debates, and it’s been great to see so many people involved. As always, discussion, iteration, and collaboration are our best tools for moving forward together.

Keyboard Navigation Improvements

• Enable block movement between levels using a keyboard.
• Add keyboard shortcuts for moving blocks.
• Improve keyboard navigation on Gallery blocks.
• Add keyboard Shortcut to toggle Fullscreen.
• Improve copy/paste block experience.
• Improve keyboard operation of the LinkControl component
• Add option to keep the caret inside block in edit mode.
• Add arrow navigation between nesting levels in Navigation Mode.  

Below is a screenshot highlighting the new keyboard option mentioned above that can be found in “More tools & options > Options” modal. Checking it will stop arrow keys from navigating between blocks in edit mode. You can also programmatically auto-enable it with this code snippet: 

if ( 
  ! wp.data
      .select(‘core/edit-post’)
      .isFeatureActive(‘keepCaretInsideBlock’) 
) {
  wp.data
    .dispatch( ‘core/edit-post’ )
    .toggleFeature( ‘keepCaretInsideBlock’ );
}

The following video shows a walk-through of arrow navigation between nesting levels while in Navigation Mode mentioned in the above section: 

Screen Reader Improvements

• Announce all notices from the notice store properly.
• Add heading to block inserter tips to make it more visible.
• Remove titles from Button blocks.
• Fix snackbar labels.
• Fix missing label in Heading Toolbar.
• Add explanatory text before the a11y.speak aria-live regions. 
• Fix overly verbose aria-label on the Social Link block 
• Improve announcement of CustomSelectControl on some screen readers.  
• Add copy action for touchscreen users or users who don’t use keyboard shortcuts.

Focus Improvements

• Create consistent focus styles in the UIUI User interface.
• Fix focus loss on the welcome guide.
• Fix focus styles and improve Windows High Contrast mode styles for the Post Calendar component.
• Implement roving tabindex on the HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. Toolbar. 
• Fix extra tab stop on the Modal component.
• Fix focus loss issue in LinkControl component with edit mode toggle. 
• Fix focus loss in between row/column insertions in Table Block. 
• Implement roving tabindex on Block Toolbars. 

The following video demonstrates the roving tabindex across block toolbars. Of note, the APIs to achieve this improvement in wordpress/components are listed as experimental for now and should ship in 5.6 so third-party developers can use them as well.

If you’re interested in improving accessibility in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor, check out the accessibility team, review the current open issues related to accessibility, provide accessibility feedback on issues, and help test GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/.

#5-5, #accessibility, #core-editor