An accessible website should have working keyboard navigation. In this tutorial, I’ll demonstrate how to test for functioning keyboard navigation.
- Test that keyboard navigation is working for all menus and interactive elements.
- Verify you can access and navigate through all menu items using the Tab, Shift+Tab, and arrow keys.
- Check that buttons and links are functioning properly when accessed via the keyboard.
- Test keyboard accessibility of other interactive components like accordions and carousels.
- Evaluate keyboard navigation and focus when the page is zoomed to 400% for mobile testing.
- Ensure consistent keyboard accessibility across all pages of the website, not just the homepage.
Transcript
Welcome back to the Easy A11y Guide channel and the Quick Audit video series. In this video, we’ll be talking about navigable menu and website for keyboard users. In a previous video, we talked about keyboard focus states.
In this video, we will be focusing on keyboard functionality. We’ll be doing menu and keyboard functional testing. We’re going to test our menus, make sure that they work with a keyboard, that we can get through all of the different levels of the menu, navigate the menu. We will be zooming the website to 400%, and then we will keyboard test the mobile menus, again, making sure that we can get to everything in the menu. Then we’ll be testing a sampling of the buttons on the site as well as some of the links to ensure they function properly with the keyboard.
Make sure you can navigate menus with keyboard
Here we are on Equalize Digital’s website, and we can see that the Services menu is highlighted, and it is specifically a highlight on the Services link. Then separately, we have a highlight for the dropdown menu button. This is a button, so I will expect it to activate with either the Return key or the Spacebar.
I’ve just used the Return key to activate the menu, and I’ll use the Spacebar and make sure it closes. So that functionally worked. Now, I’m gonna open it back up, and I’m going to use the arrow keys. We may also find out the Tab keys work. I’m testing both. I’m using Tab and Shift + Tab, and the Up and Down keys to go through the menu. It has nicely gone through, and I’m able to close it. Moving on, I’m going to test to make sure that this is, in fact, a link ’cause it looks like it’s a link. I’ve pressed the Return key, and I’ve gone to the page.
Back into my menu, I’m going to test and make sure that I can access each of the different items. Again, Spacebar to close, activating the Spacebar and just going through all of the different menu items and ensuring that I can access them. In this case, I’m also testing Left and Right keys are working very nicely on this menu. That is not a requirement. Just the Tab key is the requirement, but it certainly is nice when the arrow keys also work, kind of saves our Tab key a lot of effort.
Check other links on page
Next, I will go through and check the other links on the page. For example, I just hopped on what might be a button or a link, and it has taken us to a pricing page, allowing us to go through and check various buttons. It’s also important to check our Skip to Content link on other pages besides just the main page. I see some different options. That was kind of a jump link and made sure that the jump link did, in fact, work, take us to where we expect to be.
Here I have different option keys that allow me to see the different slides of this carousel, and those are functioning well. I’m going to check to make sure that this accordion works. There we go. Now, I’ve got the accordion open, and it’s closing and opening. I can access the content within the accordion. That’s important to test as well. I’ve opened the next accordion. Make sure I can actually visit a different page. So now, I’ve gone through and done the testing for that one.
Zoom and check mobile menu
Now, I have zoomed this website to 400%, and I’m going to test mobile menu. So, I’m using my Tab key, and I have now selected the mobile menu. I am going to open the menu, and I’m going to go into the different options. I’m gonna make sure that I can go into the dropdowns. And I can. I can open up more dropdowns and get through the site.
Here we are on WordPress.com. And we’re going to go through and see about the main menu. I’m using the Down arrow key to go through and access the menu. They’ve set up a cyclical menu, so I stay within it. I will use the Esc key to get out of it. I’ve entered the next menu, and I’m just going to pick something off of that menu and make sure that I can access it.
Now, I’m on new page, and again, I want to make sure I can access all of the menu items. Here they are using a thin dotted border on their navigation, which is a bit different than what they had before. Here they are using a dotted blue line to indicate the focus. It is a dark blue against a white, so it will pass contrast, but it’s not quite ideal.
Anyway, we check menu and make sure we can get out of it. I am now going to zoom the page to 400%, and we have found that there’s a couple of issues on the page when it zoomed to 400%, but I’m testing the menu right now. Here we are. We have opened the menu. The arrow keys navigate through this menu. They’re going in the correct orders and letting me get through the menu.
I am here on a different page, the Plugins page within WordPress.com, and I can’t see a focus on either the logo or on the menu. So that’s why it’s important to test the whole site and not just part of it because we have to test all the pages, especially when different pages are producing different style sheets.
Finally, we’ll take a look at the E-ZPass site again. We have quite a few issues here, but we’ll go ahead and zoom up. In this case, we have no mobile functionality at all, so I would fail them quite a bit on this site.
Recap
So, to recap, this menu and keyboard functional test asks us to test all of our menus, visiting a few different pages and making sure that the menu works, zooming to 400% and making sure that we can keyboard test the mobile menus, and testing buttons as well as a sample of links to make sure that they function properly with a keyboard.
Thanks for watching. I’m Gen Herres from the Easy A11y Guide, where we try to make accessibility easier to implement through done-for-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.