02-Gutenberg and Screen readers–Let the uh, fun? Begin
So, if, after all this time using the classic editor, you’ve decided it’s time to move on, cool! Let’s dive into using Gutenberg. Come on in. The water’s uh, well–survivable.
Having said that, as of Apr. 2024, if I said I found the experience of using Gutenberg with a screen reader pleasurable, I’d be lying so bad I could use my nose as a mobility cane. Just add marshmallow tip or similar. The polite version is that it bites. The less polite version is that it sucks. And we won’t get any more impolite than that for fear of getting kicked out of the conference call service.
The 2 major problems are:
- It’s too chatty; and
- It loses focus.
In terms of focus, just be warned that, especially when editing, you’re not always in the block where you think you are. Silence the screen editor via your favorite method (Paul and I both like control) Then read the current line to precisely determine your location.
I urge liberal amounts of whatever it is you do, or use, to facilitate relaxation, when using the block editor. You’ll need it. You’ll thank me later.
Your Screen Reader
There are two things to absolutely be aware of when using the block editor. The first concerns your screenreader. You need to be cognisant, at all times, whether you’re in browse mode, or whether you’re in data entry/forms/editing mode, because different things occur in response to various keystrokes, depending on which mode you’re in. If you’ve used a screen reader for any length of time, that’s not news. I’ll be using the term “data entry mode” from now on to refer to the screen reader mode which allows you to enter data into a form field.
The second thing concerns the block editor itself. You need to be aware whether you’re in ‘edit’ or ‘navigation’ mode. In ‘edit’ mode, as the name implies, you can edit content. In ‘navigation’ mode, you can select blocks to edit, etc. The escape key toggles between the two. Having said that, though, realize that you may actually need to press the escape key twice to do so, especially if you’re in data entry mode, because the first press will exit data entry mode, while the second will toggle between ‘navigation’ and ‘edit’ modes. There are times when you’re informed by the block editor what mode you’re in, especially if you change from one to the other. Having said thus, there is a notification panel at the bottom of the page, but it definitively doesn’t always get your status right, and, IMO, you’d be better off ignoring it. The most reliable way, should you be in doubt, is use of your cursor movement keys. Up and down arrows or tab/shift-tab in navigation mode, will read you your content. If you’re in data entry mode, it’s usually preceded by the word “button” every time you encounter a new line when using up/down arrows, to let you know you can interact with it by going into edit mode. I personally find the tab and shift+tab keys to be the most reliable way of navigating the document’s structure. As always, YMMV.
When in edit mode, the lines of your content will be read instead.
The screen reader modes + Gutenberg modes combinations are as follows:
- Screen reader data entry mode + Gutenberg edit mode;
- Screen reader data entry mode + Gutenberg navigation mode;
- Screen reader browse mode + Gutenberg edit mode; and
- Screen reader browse mode + Gutenberg navigation mode.
Audio samples of what each mode combination sounds like follow:
Please take particular note that if you’re editing, you need to be in data entry mode, or your cursor definitively won’t be where you think it is.