The WordPress block editor changed how the world creates web content. Initially, the block editor lacked even basic accessibility, which had to be barnacled on in subsequent releases. Accessibility as an afterthought is always poor design. As a result, using the block editor with a screen reader has all the elegance of a bad haircut.

Most blind developers have clung to the Classic Editor plugin like Linus to his blanket. But WordPress could drop support for that plugin soon. Like it or not, it’s time to switch to the block editor.

But, how to use the block editor with VoiceOver, which has its own set of issues? This blog will introduce you to some of the challenges of using the block editor with VoiceOver, and how to work around them. Let’s take a closer look.

Interrupting VoiceOver

When navigating, VoiceOver attempts to read the entire contents of text blocks. However, you generally only need the first few words to know where you are. Pressing the Control key interrupts VoiceOver. The Control key works like a play/pause button, so if you press Control a second time, VoiceOver will continue reading where it left off.

VoiceOver Focus Lags

While moving between blocks in navigation mode, VoiceOver focus lags. It frequently continues to read the contents of a block that no longer has focus. Compounding the problem, navigating to another block doesn’t interrupt VoiceOver, it only causes VoiceOver’s focus to lag even further.

As a best practice, press arrow to move, then immediately interrupt with Control, and use VO+F3 to confirm the block with focus. You might need to interrupt VoiceOver and press VO+F3 multiple times before VoiceOver focus catches up.

In extreme cases, you might press Down Arrow a dozen times to navigate quickly to a block of interest, only to discover that VoiceOver is still reading the contents of the first block of your post. In such a case, you would need to press Control then VO+F3, possibly a dozen times, before VoiceOver correctly announces the focused block.

Please don’t throw tomatoes, folks. I just report how it works.

VoiceOver Reads from the First Block

VoiceOver frequently reads the entire post from the beginning. You’ll experience this when pressing Exit to leave edit mode, but there are other situations where this problem occurs.

By now, you’ve probably guessed the workaround. I want a t-shirt that says, “Press Control, then VO+F3.”

Losing Track of VoiceOver Focus

The block editor makes it quite easy to accidentally move focus out of the editor, as if VoiceOver has teleported to some element in the editor Top Bar or Editor Settings. When you feel lost, return focus to the Editor Content, then tab through the blocks to wherever you were last working. Here are some tips for returning focus to the editor content.

1. Press VO+U (web rotor), arrow to Landmarks, and select Editor Content. Then press Shift to move focus to a block at the start of your post.
2. Or select Editor Settings from the Landmarks menu, then press Shift+Tab to move backwards to a block near the end of your post.
3. In either case, use the block list view to quickly navigate to the block of your choice. Open block list view with VO+Tab, then Control+Option+O. While in block list view, navigate up and down with VO+Up and Down Arrow, or jump to first or last with VO+Home and VO+End.

And don’t forget. If VoiceOver is talking, press Control to interrupt it. Then press VO+F3 to verify the current block with focus.

Edit or Navigation Mode?

The block editor has no mechanism for determining whether you’re in edit or navigation mode, but VoiceOver has a solution. Press VO+F3 to announce the element with VoiceOver focus. If you’re in navigation mode, you’ll hear the block type and position (e.g., paragraph block, row three). When in edit mode, that information is absent, and VoiceOver announces the button with focus or text that you’re editing. Hearing the block type and position tells you you’re in navigation mode.

Conclusions

Using the block editor on a Mac with VoiceOver requires you to have a Swiss Army knife approach. If you try one way and it doesn’t work, flip open the next tool and try again. You’ll need lots of patience as you repeatedly lose track of focus and open the Landmarks menu to find your way back to the Editor Content. And remember, press Control, then VO+F3.

References

Unblocking the WordPress Block Editor. This AppleVis blog from May 2023 is a comprehensive overview of how I use the block editor to administer several websites. Though some details change with the release of new versions of WordPress and MacOS, the bulk of the content remains a reliable source of information.

Keyboard shortcut reference, for both MacOS and Windows. While using the block editor, you can open a dialog with keyboard shortcuts by pressing VO+Tab (the VoiceOver passthrough command), then Control+Option+H. The dialog works well with VoiceOver. Press Escape to return to the block editor.