Managing Focus

Keyboard focus identifies the part of a page currently ready to receive keyboard input. Managing focus helps users move through controls in an order that makes sense and lets them see which control is active. Try pressing Tab through a short form and checking where focus moves and whether you can see it.

Keyboard focus identifies the element currently ready to receive keyboard input. A focus indicator is a visible change, such as a border around a button, that shows which element has focus. Managing focus involves both the sequence users move through and their ability to locate the active element. [1][2]

In HTML, the markup describing a web page, sequential keyboard navigation commonly uses the Tab key. Without scripts, which are code that changes page behavior, or tabindex attributes, which can modify focusability and navigation order, the sequence follows the order of components in the content. This makes the order of controls in the page's code an important starting point. [1]

In a hypothetical sign-up form, suppose Email is followed by Password, with no intervening controls or other dependencies. Moving from Email to Password preserves that form's sequence. However, matching visual position is not always required: two independent columns could be visited in either order if meaning and operation are preserved. Reinforcing the reading order suggested by the layout is a best practice. [1]

A modal dialog is a window within a page that makes the surrounding page unavailable for interaction while it is open. In the Focus Order guidance's example, opening one sets focus inside it, and content outside it cannot receive focus. The example does not prescribe the first interactive control as the initial destination, and browser controls may still be included in the focus cycle. When the dialog closes, focus returns to its opening button or the element following that button. [1]

The Web Content Accessibility Guidelines (WCAG) include separate success criteria, or requirements, for order and visibility. Focus Order, criterion 2.4.3, applies when a page supports sequential navigation and the sequence affects meaning or operation; it requires an order that preserves both. Focus Visible, criterion 2.4.7, requires a mode of keyboard operation with a visible focus indicator. The indicator must not disappear because a time limit expires, but this criterion does not require it to appear after every pointer interaction or prescribe a particular shape. [1][2]

These Understanding pages explain the criteria and offer examples and techniques. They are guidance, not experiments measuring universal improvements. Checking a form's sequence and visible indicator is a useful practical review, but it does not establish that the whole site meets every accessibility requirement or legal obligation. [1][2]

• Guidance on scope: Focus Order applies when sequential navigation is available and its sequence affects meaning or operation. More than one order may satisfy the criterion; exact agreement with visual layout is not always required. The criterion assesses the order of focused elements rather than specifying everything that should receive focus. [1]
• Guidance through an example: The modal-dialog example places focus inside the dialog and makes surrounding page content unavailable for focus. Browser controls may remain in the cycle. Closing the dialog returns focus to its opening button or the element following it; the example does not require the first interactive control as the initial destination. [1]
• Guidance on visibility: Focus Visible requires a keyboard operation mode with a visible focus indicator. The indicator must not be time limited. Showing an indicator for pointer interactions is described as a best practice, and this criterion does not prescribe the indicator's form. [2]

The supplied documents are official explanatory guidance, not empirical studies, so they do not establish measured effects on task completion, cognition or behavior. The sign-up form is a hypothetical teaching example, not an observed result. These two criteria address particular aspects of accessibility; checking them alone cannot establish complete WCAG conformance or legal compliance. Citation correction: the original lesson's Focus Visible reference [5] is replaced here by the supplied WCAG 2.2 guidance [2]. The earlier bibliography and its dates are not treated as verified; only the two supplied sources are retained, with unknown publication years recorded as null.