Analyze the lack of indication of keyboard focus in a sidebar menu
In the accessibility-testing demo page, the sidebar navigation menu with blue links doesn't visually indicate which link has focus, when using a keyboard. To find out why the sidebar menu is confusing to keyboard users, we'll look for CSS pseudo-class rules for the
focus states, along with the CSS property for link outlines.
This analysis finds that the lack of indication of keyboard focus in the links of the sidebar navigation menu is because:
alinks have a CSS property setting of
alinks lack a CSS pseudo-class rule for the
To navigate to the CSS, we'll use the Inspect tool to highlight a blue link on the sidebar navigation menu, and then view the DOM tree and CSS for the
a element that defines that link.
Open the accessibility-testing demo webpage in a new tab of the browser, and then select F12 to open DevTools.
Select the Inspect () button in the top-left corner of DevTools so that the button is highlighted (blue).
Hover over the blue Cats link in the sidebar navigation menu. The Inspect overlay appears, showing that the
aelement is keyboard-focusable. But the overlay doesn't show that there's no visual indication when the link has focus.
Next, we'll inspect the CSS styling of this link.
Select the Cats link in the sidebar navigation menu. The Inspect tool turns off, and the Elements tool opens, highlighting the
anode in the DOM tree.
Select the Styles tab. The CSS rule
#sidebar nav li aappears, along with a link to a line number in
Select the link to the CSS file. The CSS file opens within the Sources tool.
The styles of the page have a CSS pseudo-class rule for the
hover state that indicates which menu item you are on when you use a mouse:
#sidebar nav li a:hover. However, there is no CSS pseudo-class rule for the
focus state to visually indicate which menu item you are on when you use a keyboard, such as
#sidebar nav li a:focus.
Also, notice that the links have a CSS property setting of
outline: none. This is a common practice, to remove the outline which browsers automatically add to elements when you focus on them using a keyboard. Not using
focus styling causes confusion for your users.
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.