Lesson 10: Keyboard Focus

Background

Keyboard focus refers to the location in a web page a person has navigated to using a keyboard. Focus isn't limited to keyboards, however. It overlaps with multiple types of assistive technologies like screen readers, screen magnifiers, speech recognition software, head pointers, switches, and more.

The purpose of changing an element's style when it's focused is so users know where they are in a web page and which element they're about to interact with. Browsers have default focus styles for all interactive HTML elements (e.g. buttons, links, inputs).

Some operating systems like macOS enable users to set custom accent colors which are used for default focus indicators. If these defaults are overridden in a website's coding, it's important they're widely visible and usable. In this lesson we're going to start with the visibility aspect.

5-minute action steps

Go to the webpage you want to test and navigate through it with your keyboard. As you're testing, make note of whether or not interactive elements have their styles changed when they're focused.

Here is how you can navigate through a web page for this testing:

• Navigate forward in a page by pressing the TAB key
• Navigate backward in a page by pressing the SHIFT and TAB keys

Tip: Not sure if an element is "interactive"? A good rule of thumb is if an element is clickable with a mouse it should be focusable with a keyboard.

Analyzing the results

Most of the analysis for your results require some knowledge of HTML, CSS, and how to inspect them using a browser's devtools. If that's not your area of expertise, no worries! Go ahead to the next section and prepare to share your results.

If you find that interactive elements do not have focus indicators, it's likely they're being disabled without any replacement. This is often done by setting the CSS "outline" property to "0" or "none". This makes web pages unusable and should not be done.

It's also possible an HTML element has been made clickable in the code but isn't actually like that by default. For example, a "div" element can be made clickable by adding an "onClick" property, but doing this doesn't automatically make it usable with a keyboard.

Share your results

The end goal of this exercise is to resolve the issues you've found. Tracking them in your project management system is a huge step toward that goal. Sometimes we can't fix accessibility issues immediately, but we can always chip away at them over time.

Share the results you've noted today with the person or team responsible for fixing these kinds of issues. You might start the conversation with, "I'm learning to test keyboard focus, and these are some of my results."