Automattic contributes to a number of non-profit and open source projects, including WordPress, which powers more than 40% of websites, including WordPress.com. As part of WordPress’ Five for the Future program, Automattic has a number of sponsored contributors who work alongside community members to further the project. In this post, Channing shares her perspective as one of many contributors in the community.
Notice something different?
This page has been designed with large type, Dark Mode detection, and other accessibility-friendly styling such as visible underlines and focus states on links.
Add Dark Mode to your site
Dark Mode is easier than ever with Twenty-Twenty One, a new core WordPress theme with WCAG 2.1 level AAA compliance. The pastels used in this post come from the Twenty-Twenty One color palette.
A beginner’s guide
As a new addition to the design team at Automattic and a first-time contributor to the WordPress project, I’ve been spending a lot of time learning about accessibility features in Gutenberg, the WordPress block editor. I wanted to create this blog post to introduce myself (and you) to the many useful accessibility features available and provide some context about how recent improvements are helping take accessibility and usability to the next level. As with all aspects of WordPress — the work is never finished!
Keyboard navigation
Keyboard shortcuts
Usability updates
Get involved
Note: If using a Windows/Linux system, please substitute ALT in place of ⌥ and CTRL in place of ⌘ for any shortcuts given below.
. . . . .
Keyboard navigation
How to navigate between nested blocks
One of the block editor’s most elegant accessibility features is the Navigation mode feature that was introduced in 2019. When screen reader users navigate the web, certain shortcuts can help with navigating through a lot of content. For example, a user might navigate a page by skipping from heading to heading, rather than interacting with all the body copy between. I think about the block editor’s Navigation mode the same way — it’s a quick way to navigate from block to block using a single TAB press when there would otherwise be lots of other content to navigate through as well. As a designer, this feature is really exciting to me — it’s a creative solution that makes usability for screen reader users a primary focus in the block editor.
A quick way to switch to Navigation mode is to use the ESC key while you have a block selected. With the latest improvement to Navigation mode, you can now move between inner (child) blocks as well:
UP or DOWN arrow: Navigate within the same level
LEFT arrow: Go into a nested level
RIGHT arrow: Go out of a nested level
To confirm the move, press ENTER or SPACE to move the block to that position.
How to move blocks between different levels
One of the easiest and most intuitive ways to move existing blocks on the page is by using the keyboard shortcuts for Cut and Paste: ⌘X and ⌘V. Another new feature in the block editor is the ability to move blocks in and out of a parent block with a keyboard. Since even more blocks (like the Quote block) will support nesting in the future, this is a powerful accessibility feature that should get a lot of use.
To utilize this new functionality, just navigate to the Options item at the end of the block toolbar, and select Move to from the menu.
Use the following keys to change the intended position of the selected block:
UP or DOWN arrow: Navigate within the same level
LEFT arrow: Navigate up one level
RIGHT arrow: Navigate down one level
To confirm the move, press ENTER or SPACE to move the block to that position.
. . . . .
Keyboard
shortcuts
Moving blocks
This new feature is a really useful keyboard shortcut for moving blocks up or down on the page. The shortcut is similar to the existing one used to insert a new block before or after the selected block(s):
⌥⌘T : Inserts a new block above
⌥⌘Y : Inserts a new block below
The shortcut for moving an existing block is the same, just with the addition of the ⇧ key added to the sequence:
⇧⌥⌘T : Moves the selected block(s) up
⇧⌥⌘Y : Moves the selected block(s) down
Toggle fullscreen
This new shortcut has quickly become one of my favorite in the block editor. I love using it in combination with the keyboard shortcut for showing and hiding the Settings sidebar. This is a great way to clear up space on the screen in order to focus on a clean, open page — which can be especially helpful for writing.
For screen reader users, this is a helpful way to reduce the number of sidebars and other discrete areas of the editor, which can add complexity to navigating and making edits.
⇧⌥⌘F : Toggles fullscreen
⇧⌘, : Hides the Settings sidebar
. . . . .
Usability updates
Usability is a key factor for strong accessibility — the block editor needs to be easy to use regardless of how one interacts with it. Often the best approach to usability is to provide multiple ways of doing the same thing. Here are a few recent improvements that should help improve the block editor experience for everyone.
Breadcrumbs
Breadcrumbs are a handy new feature that’s part of an ongoing effort to make it easier to navigate and select blocks nested at different levels. Think of them as an additional way to keep track of your position and move easily between levels, which can be especially helpful when working with blocks that can quickly result in a deeply nested structure, such as Group or Column blocks.
A good keyboard shortcut to know is ^⌥N, which is the shortcut for jumping to the next part of the editor. You can use this shortcut to cycle through different sections of the editor until you land in the Breadcrumb bar at the bottom of the browser window.
List View
List View is an existing usability feature that continues to be refined and improved. Like Breadcrumbs, List View is all about making it easier to navigate and select blocks. This feature lives in the Gutenberg editor’s top toolbar and shows an outline-like list of all the parent and children blocks on the page, making it easy to jump to any block — regardless of whether it’s nested within other blocks. To open the block list view, use the keyboard shortcut ^⌥O.
Recent improvements to the List View have been around the way blocks appear in the list, including making it so that nested blocks are always shown (rather than collapsed by default) and to show Reusable blocks by their custom names rather than a generic one. You can also expect to see more of this feature in the future — List View will become even more prominent within the FSE editor experience, which features the block navigation list view persistently in a sidebar.
Optional inline labels for toolbars
Are you someone who prefers text-based buttons rather than icons? A new feature in the block editor will now allow users to change all the icons in a toolbar to text labels.
Since the Toolbar is currently one of the main ways we all interact with the Core Editor this is a big change that should have big benefits. Text icons unlock the ability for you to tailor your experience of the Toolbar and helps more people have the flexibility to create with the Core Editor.
Developer Relations Wrangler, Anne McCarthy, on make.wordpress.org
This setting can be adjusted in the Options menu (to the far right of the top toolbar), under Preferences. The option can be found in the Appearance section as Display Button Labels.
Refining the behavior of the block inserter
Recently, contributors in the WordPress community came together to tackle some particularly tricky accessibility and usability issue relating to the block inserter, a panel where users can browse block options and insert multiple blocks on the page at once.
As a relatively new addition to the block editor, there has been a significant effort within the contributor community to make sure the inserter has seamless opening and closing behavior that doesn’t interrupt one’s workflow. After more than a month of iterations, tests, and many hours of collaboration, the newest version of the block inserter remains open after inserting a block or pattern to make it easier to insert multiple blocks at a time. If you do want to close the inserter and shift focus back to the first new item added to the page, there’s now a shortcut to do so.
The important keyboard commands to know are:
SPACE or ENTER : Insert block, leave the inserter open
⌘+ENTER : Insert block, close the inserter, and return focus to the first insertion point
As before, ESC closes the inserter without adding a block.
. . . . .
Get Involved
If you’re interested in working on these features within the core editor, check out the accessibility team, review the current open issues related to accessibility, provide accessibility feedback on issues, and help test Gutenberg. Any of these actions will go a long way to continue improving the experience of the core editor for everyone!
Automattic Design 