Keyboard focus

Learn why it’s important to make interactive elements keyboard focusable and how to manage focus in ways that make sense to the user.

What are keyboard focus and focus order?

When an interactive element is focusable and set in a logical order on a web page, it means that people can use keyboard commands to access and activate it in a sequence that makes sense to them.

Make interactive elements focusable

All interactive content must be keyboard focusable so that keyboard users can tab to the content in order to interact with it — they must also be able to move focus from one interactive component to another and not get trapped.

Logical focus order

Interactive elements must receive focus in a meaningful sequential order that does not change what they mean or how they work.

Visible focus indicators

Sighted keyboard users must be able to see which user interface component has focus so that they know what — if anything — they are interacting with.

Focus management

Always set keyboard focus to an element that makes sense to the user in the user’s context — this is the practice of focus management.

Content displayed on focus

Sometimes new content displays when the user tabs to an element or hovers their mouse cursor over it, and it disappears when the user moves focus or the cursor away from it — if this happens, the content must be dismissible and persistent in specific ways.

Other keyboard focus considerations

Understand how to manage keyboard focus for in-page links, single-page applications (SPAs) and scrollable containers — and when it’s expected to trap keyboard focus within a widget.