Navigating the WordPress Admin Dashboard with a keyboard is challenging, especially when using a screen reader. A new plugin joins the list of WordPress tools to make navigating the dashboard faster. And this time, it actually works with screen readers.
- The built-in WordPress command palette only works in the block editor and not with a screen reader.
- The Turbo Admin extension can help keyboard users, but does not manage focus properly, causing blocking issues with screen readers.
- The Command UI is a more accessible alternative to the built-in command palette, allowing users to search and interact with options using a screen reader.
- The Command UI can be used to perform tasks such as editing pages, viewing the front-end, and installing plugins.
- The Command UI provides a more accessible way to interact with WordPress, especially for users with screen readers or with cognitive load issues.
Visit CommandUI for more information.
Transcript
[00:00:00.30] – Gen
Welcome back to the Easy A11y Guide channel. I’m Gen Herres, and today we’re going to talk about the WordPress Admin Dashboard and how it is to navigate when you don’t have a mouse.
[00:00:14.59] – Gen
I’m here on a demo site, and let’s say I want to edit my sample page. This is under Pages, and then I have to get to Sample. With the keyboard, I’m going to hit Tab for a while. Tab through the Post menu, tab through the Media menu, and finally, I get to the Pages menu. Here, I can press Return.
[00:00:38.22] – Gen
Now that we’ve entered Pages, now I have to get to the actual page that I want to visit, which is the sample page. I’ll hit the tab on my keyboard, and now I’ve got skip to main content. Well, that’s helpful. I get to skip the entire left sidebar. And that brings me into the very top of the pages. So I get to tab through a bunch of elements up here, and then I finally get to the actual pages, and I can tab through and finally get to edit the sample page, which is what I wanted to do.
[00:01:14.22] – Gen
Now that I’m in the sample page, I can press Command K and get the built-in WordPress command palette. But unfortunately, that only works when I’m in the block editor, which, quite frankly, not all of the time. So that doesn’t help me really navigate around the site. It’s even worse if I turn on my screen reader. Now that my screen reader is active, I can press Command K.
[00:01:43.35] – VoiceOver
Command Palette, search commands and settings.
[00:01:46.11] – Gen
The focus doesn’t really align with the actual box.
[00:01:50.25] – VoiceOver
P, highlight P. You are currently on a group. Highlighted P. O. Highlighted P. Highlighted P. O. Highlighted P. O. Form Element, Form element not found. Command suggestions. Form element not found. Command, Command, Command, Command, Command suggestions. List box.
[00:02:10.16] – Gen
As you can see, that went rather poorly. I can’t really interact with the List box. In fact, if I try it in the Safari browser, I can’t even type in this box with a screen reader. So this really doesn’t help people who need to use assistive technology. But what about some of the other options out there?
[00:02:32.54] – Gen
So there is an add-on called Turbo Admin, and I have installed that in my browser. So I’ll activate that, and we’ll see how it goes with the screen reader. Here I activate.
[00:02:46.26] – VoiceOver
Edit text, blank. You are currently on a text field inside of web content.
[00:02:52.31] – Gen
Here I can see that things are selected, but none of these are read out by the screen reader.
[00:02:58.21] – VoiceOver
List 107 Link, search, all post types.
[00:03:03.44] – Gen
Here I’ve used the screen reader to navigate to the next section, so now I can, in fact, select items. I am going to activate that link.
[00:03:14.11] – VoiceOver
Edit Page, Sample Page, Kaya Theme demo.
[00:03:17.11] – Gen
Unfortunately, the turbo admin extension does not manage the focus and keep it within the dialog. Because of this, the screen reader loses the focus for the command area, and I can no longer interact with it or use it. It’s just now blocking my screen.
[00:03:35.59] – Gen
So now I’m going to activate Command UI and see how that does for accessibility. I’m going to use Command K to get it started. Here we are in the command palette. I’m just going to turn on an accessibility feature. To do this, I’m going to type in A11Y, A11. I don’t even have to put the Y on the end because it’s already suggested internal accessibility. What I want to do is just Disable Preselection of the First Search Result. This can help for some people with screen readers, and this can also help for some people who have cognitive load issues, which can include just about anyone on a bad day with a bad headache. So that’s already been handled. Now, I can just hit delete on the keyboard, and it’s going to take me back. So here I want to visit the sample page and edit it again.
[00:04:33.19] – VoiceOver
Command Palette type a command or search.
[00:04:35.41] – Gen
Okay, so now I want to go to the sample page. So now I’m going to go use that down arrow.
[00:04:44.22] – VoiceOver
Go to shortcut. G, then T. Click Post types shortcut, P, then T, clickable.
[00:04:51.08] – Gen
I use the down arrow, and then I selected the post type search, and I pressed return on my keyboard. Now it wants to know what of content I want to do. If I’m not sure where I’m at, I can use the voiceover navigation.
[00:05:08.10] – VoiceOver
And/up, act post type search. And/of. Active scopes. Group.
[00:05:13.54] – Gen
So the group tells me that there’s a group of items, then tells me that I’m on post type search.
[00:05:20.18] – VoiceOver
Command, entry type to search across all post types or filter by type.
[00:05:23.40] – Gen
So now I’m told that I can search for stuff, so I’m going to start type sample. And then I want to see what results I got from that. So I’m going to just use the keyboard, and I’m just going to press the down arrow.
[00:05:38.41] – VoiceOver
Page greater than sample page. Clickable.
[00:05:41.37] – Gen
Yeah, that is definitely what I want is to go to the Pages section and edit the sample page.
[00:05:47.06] – VoiceOver
Sam.
[00:05:48.10] – Gen
So Sam was what I had written in there. Now I have a couple of options. I can use the down arrow to see my options. View.
[00:05:56.02] – VoiceOver
Clickable. Edit. Clickable.
[00:05:58.49] – Gen
And now that I’m at my sample page, I do want to edit it. So I’m going to go ahead and press return to edit the page. So now I’m on my page and let’s say I did some editing and I want to take a look at how those edits are on the front-end. I can again hit Command K to activate the command UI.
[00:06:18.44] – VoiceOver
Command Palette type of command or search.
[00:06:21.29] – Gen
Now that the Command Palette is open, I can use the down arrow to navigate through my available options.
[00:06:27.38] – VoiceOver
Sample page greater than view a new tab shortcut. V, clickable.
[00:06:32.22] – Gen
This is exactly what I was looking for, and it’s even going to open it in a new tab for me so I don’t lose my place in my current editor. Now that I’m on the front-end, I have pulled up the Command Palette again, and I’ve selected the plugins from the option list because I’d like to add a plugin to the website. Here, I’ve now added the plugins, so now I can use the down error to see what kinds of options are readily available to me.
[00:06:59.14] – VoiceOver
Search repository Repository shortcut. P then r. Clickable. Sounds great.
[00:07:03.10] – Gen
Let’s search the repository. Now that I’ve done that, I can use the down error to see what’s available to me.
[00:07:10.41] – VoiceOver
Elementor Website Builder. Contact Form Yoseo. Classic Editor. Woocommerce. Wookismet. Anti-spam. Stamford. Woocommerce. Classic Editor. Classic Editor. Clickable.
[00:07:22.11] – Gen
Let’s say I want to add the Classic Editor, or I can always type and look for some other plugins, but let’s just Classic Editor and see how the plugin does in terms of notifying me about what is happening when I install a plugin. So I’ve selected the Classic Editor.
[00:07:41.32] – VoiceOver
Install. Clickable.
[00:07:43.21] – Gen
I’ve used my down arrow to, again, find out what my available instant options are.
[00:07:50.19] – VoiceOver
Install and activate, clickable.
[00:07:52.34] – Gen
Install and activate. That one sounds great. Let’s do that.
[00:07:55.29] – VoiceOver
Classic Editor. Classic Editor, clickable. Installing Classic Editor. This may take a few seconds. Installed and activated Classic Editor.
[00:08:04.49] – Gen
So that was really great from an accessibility point of view since it waited until the screen reader read out the previous content before it read out the recent notification. Let’s say I want to go and find out now what kinds of plugins I have installed. I’m going to use voiceover and go back and find out what I have.
[00:08:26.36] – VoiceOver
And up. Repository. Plugins. Active scopes. Group.
[00:08:31.20] – Gen
Here I know that my Active Scopes.
[00:08:33.59] – VoiceOver
Plugins. You are currently- You are currently Repository. Repository.
[00:08:36.54] – Gen
I used the delete key to clear out my previous scopes.
[00:08:42.19] – Gen
Now I don’t have any. Now I can go to my plugins, and I want to find out what is active. I can do this with some short keys by just typing P. And then go ahead and take a look at what options I have available.
[00:08:59.43] – VoiceOver
Sample Page, Greater Post types plugins, clickable, P.
[00:09:04.11] – Gen
So my plugin was available. Now, let’s see what options I have from that.
[00:09:08.49] – VoiceOver
Search Repository, activate shortcut, deactivate shortcut, P then D, clickable.
[00:09:14.14] – Gen
So if I want to deactivate plugins, well, they must already be active. So I can basically see a list of my active plugins right here on the front end of the site. So I’ve selected that. So let’s go ahead and toggle things down and see what’s going on.
[00:09:28.52] – VoiceOver
Command, UI, clickable. Elementor. Clickable. Fluent SMTP. Manage WP. Max mega menu. nginx helper. Click Redis object cache. Wordpress Importer, WsForm Lite, Classic Editor. Clickable.
[00:09:42.12] – Gen
So let’s say I want to get rid of the WordPress importer. Maybe I did a quick import, now I’m done with it. That’s a one-time use plugin. So I will just use the up error to go back to where I was.
[00:09:54.23] – VoiceOver
Ws Form lite, WordPress importer, clickable. Perfect. Deactivated WordPress importer.
[00:10:01.36] – Gen
It told me that it’s been deactivated, which is exactly what I want to do. If I’m done with the command palette for now, all I have to do is hit escape, or if I ever just trigger it by accident, all I have to do is hit escape.
[00:10:15.25] – Gen
Thanks for watching. I’m Gen Herres from the Easy A11y Guide, where we try to make accessibility easier to implement through done 4 you services, tools, and processes. If you enjoyed this video, please give it a thumbs up. It really helps our channel. You can subscribe to our channel for more accessibility tips and to be notified when new videos are released. For more information on web accessibility, including services, tutorials, and more, please visit easya11yguide.com. Thank you so much again for watching, and I look forward to seeing you in the next video.