Introduction to Keyboard Focus

Summary

Mouse users rely on changes in the mouse cursor to tell them when they’re hovering over an interactive element like a link, button, or form field. Sighted individuals who can’t use a mouse rely on the keyboard focus to provide this information. These individuals need a visible focus indicator to see where they are. Even better, they need a focus indicator that is easy to see. To avoid confusion, they also need the focus to move in a logical order. Sighted keyboard navigators can quickly become lost if these conditions are not met. They may not know where they are on the page, what link they have navigated to, or what will happen if they click it.

Overview

People with motor and visual disabilities often cannot use a mouse. Instead, they use various other devices, such as mouthsticks, switch devices, laser pointers, and keyboards. Although many types of input devices are available, they all rely on keyboard focus. Unlike blind keyboard navigators, these individuals must be able to see the keyboard focus as they navigate through a document or web page.

Take a few minutes to try navigating with a keyboard. There is a similar exercise in Introduction to Keyboard Navigation, but pay close attention to the keyboard focus for this exercise.

1. Open a new tab or window in your web browser and go to the home page for accessiblecommunity.org.
2. Use your mouse to place the focus in the browser address bar at the top by clicking on it. You’ll see either a highlight or a blinking cursor. If you see a highlight, hit the right arrow key on your keyboard to move to the blinking cursor.
3. Use the Tab key on your keyboard to move forward. Keep pressing this key to go through the browser controls until you enter the web page.
   • Hint: Hold the Shift key down while pressing Tab to move backward.
4. You should be able to “tab” to every link, button, and form field on the page.
5. As you tab through the page, an outline appears, and sometimes, the color changes. These indicators mark the current location of the keyboard focus.
   • The focus indicator should always be easy to see.
   • The indicator’s color should stand out from the content next to it.
   • The indicator’s appearance should be distinctly different from other content.
   • None of the elements on the page should cover up the focus indicator.
6. As you “tab” through the page, you should see the keyboard focus move from one interactive element to another in a logical order.

These factors work together to ensure an accessible keyboard focus. Imagine navigating content with a keyboard without clear visual indicators. It would be impossible to use links, buttons, or forms confidently.

The Web Content Accessibility Guidelines (WCAG) for keyboard focus reflect the principles demonstrated in our exercise.

• Focus Order: When people tab through a web page, moving from one focusable (interactive) element to another, the focus order must be logical and reflect the page’s visual appearance.

• Visible Focus: It’s essential that people always know where they are on a page as they move from one focusable element to the next. For sighted keyboard navigators, there must always be a visible keyboard focus indicator so they can see where they are as they move from one element to another.

• Focus Indicator Contrast: Sighted keyboard navigators include people who are colorblind or have low vision. These individuals need a focus indicator with good contrast to adjacent elements to see it.

• Focus Appearance: Focus indicators need to stand out from other visual elements to be easily recognized and understood. In addition to good color contrast, focus indicators should be large enough to be seen easily and visually distinct from other design elements so they are quickly recognized.

• Focus Not Obscured: Sighted keyboard navigators will have difficulty understanding where they are on a page if another element obscures the visible focus. For example, a sticky footer (a footer that stays visible at the bottom of the page while scrolling) that obscures the current focus will prevent sighted keyboard navigators from knowing where they are. The focus indicator must remain visible as people navigate a page’s content.

After completing the keyboard focus exercise, you should have a good idea of how these different guidelines interact. To navigate with a keyboard successfully, people must be able to see a focus indicator that remains visible and moves logically. For ease of navigation, these viewers also need indicators with good color contrast, which are visually distinct and large enough to be seen easily.

Keyboard navigation is the other important factor in an accessible keyboard experience. It’s essential that both blind and sighted keyboard navigators can access all interactive controls via the keyboard with the same ease as people who use a mouse. For more information, see the Introduction to Keyboard Navigation article.

Who is Helped

While blind and sighted keyboard users rely on keyboard navigation, only sighted keyboard navigators benefit from an accessible keyboard focus indicator. A distinct, visible keyboard focus is essential to ensure these users can navigate digital information with the same degree of success as someone using a mouse. These individuals include:

• People with motor disabilities who cannot use a mouse rely on a keyboard or a device that uses keyboard focus to navigate digital content.
• People with low vision who use an alternative input device to navigate digital content instead of a mouse.
• People who are colorblind or have low vision benefit when the focus indicator has enough contrast with its background to be easy to see. It’s also helpful when an element’s focused state contrasts clearly with its unfocused state. This difference makes it easier for colorblind people to notice that something has changed.
• People with temporary or situational disabilities who need to use an alternative input device like a keyboard.
• People who simply prefer using a keyboard. Keyboard users are generally much faster than mouse users, as switching from the mouse to the keyboard and back again takes time and effort.