Focus Order & Focus Indicator – Keyboard Operability
Focus order and the focus indicator are two closely related cornerstones of keyboard accessibility. Focus order determines the sequence in which interactive elements are reached with the Tab key. The focus indicator makes visible which element is currently active.
For people who cannot use a mouse – for example due to motor impairments or as screen reader users – both are indispensable. Without a visible focus they are left in the dark; without a logical order they lose their bearings. Both are core requirements of the WCAG under the Operable principle.
Specifically, the success criteria 2.4.3 Focus Order (Level A) and 2.4.7 Focus Visible (Level AA) govern these requirements. Because Level AA is the standard required for conformance under the European Accessibility Act (EAA), both are mandatory for legally compliant websites.
Focus at a Glance
- Focus order: logical Tab sequence of interactive elements (WCAG 2.4.3, Level A)
- Focus indicator: visible marker of the active element (WCAG 2.4.7, Level AA)
- Audience: keyboard users, people with motor impairments, screen reader users
- Most common error: removing the focus outline with
outline: none - WCAG 2.2: adds 2.4.11 Focus Not Obscured (Level AA) against hidden focus
What Is Focus Order?
Focus order describes the path that keyboard focus takes through a page as users press the Tab key repeatedly. It must follow a meaningful, logical order that preserves meaning and operability – typically top to bottom and left to right, following the visual reading flow.
By default, focus order matches the order of elements in the HTML source (DOM). Problems arise when the visual layout is rearranged with CSS but the source order is not: focus then appears to jump around the page at random. Success criterion 2.4.3 Focus Order (Level A) requires exactly this alignment of logical and perceived order.
What Is the Focus Indicator?
The focus indicator is the visual feedback showing which element currently holds keyboard focus – usually an outline, ring or border. Browsers provide one by default. Success criterion 2.4.7 Focus Visible (Level AA) requires it to remain recognisable during keyboard operation.
By far the most common error is removing the outline wholesale with outline: none for aesthetic reasons – without a replacement. This makes the page practically unusable for keyboard users. If you want to replace the default outline, define a clearly visible, high-contrast alternative. WCAG 2.2 makes this concrete with the AAA criterion 2.4.13 Focus Appearance, which sets measurable minimums for the indicator's size and contrast.
Why the Two Belong Together
Focus order and focus indicator only work together. A perfectly visible indicator is useless if focus jumps chaotically – and the most logical order is worthless if no one can see where focus is. Only combined do they enable reliable keyboard operation.
They also serve different WCAG principles: the visible marker concerns Perceivable, the logical order concerns Operable. Good focus handling is thus a prime example of how accessibility runs through the whole of digital accessibility.
Implementing Focus in Practice
Correct focus handling can be achieved with a few basic rules:
- DOM order: arrange elements in a logical order in the source instead of creating the order with CSS alone.
- Use tabindex sparingly:
tabindex="0"andtabindex="-1"are almost always enough; avoid positive values. - Never hide focus: instead of
outline: none, define a visible, high-contrast replacement style. - Avoid obscuring: sticky headers or overlays must not completely cover the focused area (WCAG 2.4.11).
SiteCockpit Solution
easyMonitoring: Detect Focus Problems Automatically
Focus errors often go unnoticed with a mouse. easyMonitoring checks your website specifically for missing or suppressed focus indicators (outline: none), an illogical focus order and problematic positive tabindex values. You see exactly where keyboard users lose their bearings – and get the proof for WCAG criteria 2.4.3 and 2.4.7.
Frequently Asked Questions about Focus Order and Focus Indicator
How do I test focus order myself?
Put the mouse aside and navigate through the page using only the Tab key. Watch whether focus follows a sensible, comprehensible path and no element is skipped.
Can I change the browser's default focus outline?
Yes, changing it is allowed – removing it without a replacement is not. You can adapt the style to your design as long as the focus stays clearly visible and high-contrast.
What does a positive tabindex value mean?
Values like tabindex="3" force a custom focus order and override the natural DOM order. This almost always causes confusion and should be avoided.
Is a visible focus enough for WCAG conformance?
For Level AA, 2.4.7 (Focus Visible) is central but not sufficient on its own. Only together with a logical focus order (2.4.3) do you get truly operable keyboard navigation.
Secure Keyboard Operation with Confidence
Check your website's focus order and focus indicator automatically. With easyMonitoring you get started in minutes.
Try for free