Check for keyboard support by using the Tab and Enter keys
Not all users have a pointer or touch device, and not all users can see the web projects we create. This is why it is important that the user interface works at least with a keyboard. Ensure you can use the
Tab key to move the focus to each form control on a webpage, and ensure you can use the
Enter key to submit forms.
You can test the usability of a webpage for keyboard users in several ways:
- By using the keyboard, particularly the
Enterkeys. This approach is described in this article.
- Check for keyboard support for an individual element by using the Inspect tool. The Inspect tool's information overlay includes an Accessibility section that includes a Keyboard-focusable row.
- Check the Issues report's Accessibility section for keyboard support issues.
To check the demo page for accessibility issues by using a keyboard rather than a mouse, perform the following steps:
Open the accessibility-testing demo webpage in a new tab of the browser.
Use a keyboard to navigate the demo document, using the
Tabkeys to jump from element to element. On the demo webpage, the
Tabkey first moves focus to the search form in the
Tabto put focus on a button, and then select
Enterto click the focused button. For example, in the demo page, select
Tabto put focus on the Search field, and then select
Enterto submit the search. This approach produces the same result as selecting the go button. Selecting
Enterto send the Search form works correctly.
Tabagain. The next element you put focus on is the first More link in the
contentsection of the webpage, as indicated by an outline.
Tabseveral more times until you pass the last More link. The page scrolls up and you seem to be on an element of the page, but there's no way to tell which element it is.
Notice the URL in the bottom left. If you look to the bottom left of the screen (or if you use a screen reader), you realize that you are on the sidebar navigation menu with blue links, because the browser shows the URL that the Cats link points to (
Tabagain, to get to the entry field in the donation form. However, you can't reach the buttons above the textbox by selecting
Tab. You can't use the keyboard to put focus on the 50, 100, or 200 buttons and then select them. Also, selecting
Enterdoesn't submit the donation form.
Tabagain puts focus on the top navigation bar of the page, with menu buttons for Home, Adopt a Pet, Donate, Jobs, and About Us. Select
Tabto put focus on a menu button, as indicated by a focus outline. Then select
Enterto access that section of the webpage.
Based on the above walkthrough, we found the following issues that need to be fixed.
When using a keyboard, the blue links of the sidebar navigation menu don't visually indicate which link has focus. For more information, navigate to Analyze the lack of indication of keyboard focus in a sidebar menu.
In the donation form, the amount buttons and the Donate button don't work with a keyboard. For more information, navigate to Analyze the lack of keyboard support in a form.
The order of the keyboard access through sections of the page is not correct. You navigate through all the More links in the document before you reach the sidebar navigation menu. By the time the
Tabkey puts focus on the sidebar navigation menu, you have already traversed all the page content. The sidebar navigation menu was intended to provide easy access to the page content. For more information on how to solve this issue, navigate to Test keyboard support using the Source Order Viewer.
Getting in touch with the Microsoft Edge DevTools team
Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.
- Send your feedback using the Send Feedback icon or select
I(Windows, Linux) or
I(macOS) in DevTools.
- Tweet at @EdgeDevTools.
- Submit a suggestion to The Web We Want.
- To file bugs about this article, use the following Feedback section.