Understanding Keyboard Focus

What is Focus?

Focus helps users who are unable to use a mouse "see" their position on the screen, such as the blue outline in the "Google Search" button example. These users navigate and interact with webpages exclusively with a keyboard or a switch device.

The blue outline around "Google SE

W3C Web Accessibility Perspectives: Keyboard Users

W3C Web Accessibility Perspectives



Using only your keyboard, plan a trip while observing how you can view the keyboard focus:

  • Radio Buttons: Change from one way to round trip, or for a challenge, multi-city.

    • Keystrokes: Up / Dn Arrow Keys, or L/R arrow keys to select.

  • Drop-Downs: Be sure to change the seat type.

    • Keystrokes: Up/Dn Arrow Keys to navigate between options. or spacebar to select.

  • Checkboxes: Interact with the receive promotional offers?

    • Keystrokes: Spacebar to select or deselect.

Udacity Lesson:

Developer Resources

Check Stylesheet

This one line of code prevents from focus accessibility. Check that the stylesheet does not contain this line:

:focus {
outline: 0;

Managing Focus

From a11ycasts (Rob Dodson)

Single page web apps are awesome but may present interesting accessibility challenges. In particular, when the site loads new content, it needs to be able to inform an assistive technology user that the new content is available, and ideally move focus into the new area.

A11yCasts - Rob Dodson

Controlling Focus with TabIndex (Rob Dodson, A11yCasts)

On the show we'll cover the various states of tabindex, when and how to use it, and point out one very important gotcha!

a11ycasts - Rob Dodson

Off-Screen Content

When off-screen content is hidden from the viewport, such as hamburger menus, modals, ensure that they are not picked up when it is not in the working area.

This can be made possible by hiding the elements when menu is closed with CSS display:none, or making sure that focus does not enter menu when collapsed by programmatically altering flow of focus with JS.


Off-screen element that may present accessibility challenges. When a user navigates a modal, ensure that the focus remains within the modal and not move through points behind the modal.

Programmatically Forcing Focus

In the case of modals, it is acceptable to force the focus to the modal window's title.

Designer Considerations

Color Contrast of Focus

In addition to ensuring that focus is visible around an interactive element, check that the contrast is clearly distinguishable.

Source: UX Design, "Designing Accessible Products"

Click Targets


  • Assign Specific Focus state for cards when navigated to;

  • Hover action is accomplished on focus;

  • Actionable items are focusable, not necessarily every element within the card.

  • Ensure target area is generous enough for users with motor impairments.

Source, UX Design, "Designing Accessible Products"

Source: UXDesign

Clients: Why Use Focus when I can just use Hover?

  • It's not always clear when the element has focus. Sometimes hover is too subtle, such as a color change.

  • You don't want a user to have to concentrate to find out when the hover state is activated.

  • When users use a mouse, they watch the hover state appear. When a keyboard users tabs to it, their visual focus is not watching and waiting for the state to change. By the time their visual focus arrives, the hover state has already been implemented without their awareness.