Lesson 11: Keyboard Focus Order

Quick note: If you're not sure what keyboard focus is, make sure you check out the previous lesson: Lesson 10: Keyboard Focus. You will also find it difficult to complete this lesson if the interactive elements on the page you're testing do not have visible focus indicators.

Background

Keyboard focus order refers to the order in which elements are focused when a person is navigating a web page using a keyboard. Like discussed in the previous lesson, focus order isn't limited to keyboards. It affects users of many types of assistive technologies like screen readers, screen magnifiers, speech recognition software, head pointers, switches, and more.

By default, interactive elements are focusable in the order they appear in the source HTML. Focus order can be modified, but should be done with thoughtful care and intention. When focus order does not match the visual or logical order of elements in a page, it can be confusing and make a page totally unusable.

5-minute action steps

Go to the web page you want to test and navigate through it with your keyboard. As you're testing, make note of whether or not interactive elements are focused in an order that matches how visually they're placed.

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 the focus order in a page doesn't match the visual or logical order of the elements, here are some things to look for:

• What order are the elements written in the source HTML?
• Do any of the elements have the "tabindex" attribute?
  • If yes, is the value for it 1 or greater?
• Is there CSS changing the visual order of elements? Some examples:
  • "order"
  • "flex-direction"
  • "grid-template-areas"

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 order, and these are some of my results."