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.

Keyboard focus

Keyboard focus, or just ‘focus’, refers to the state of an interactive element that is ready to be interacted with via the keyboard and currently awaiting keyboard input from the user.

For example:

• when a link has keyboard focus, the user can activate it by pressing the Enter key
• when a form text field has keyboard focus, the user can input a response.

A user interface component receives focus when a user:

• presses Tab or Shift + Tab to move to it
• clicks on it with a mouse or finger tap
• the JavaScript focus() method is used to programmatically set focus to it.

For a good overall introduction to keyboard focus, see the YouTube video, What is Focus? — A11ycasts #03 — Google Chrome Developers.

Focus order

The sequence in which controls receive keyboard focus is called the ‘keyboard focus order’. It’s also called the ‘tab order’ because of how the Tab key is used to move focus through the controls on a page.

By default, the focus order is determined by the order in which the controls are found in the DOM (Document Object Model) order.

For more on focus and the DOM order, see DOM Order Matters — Web Fundamentals — Google Developers.