Official Sync:2026-03-15

Focus Order Visualiser

Map the keyboard tab sequence, detect positive tabindex, missing names, and non-semantic interactive elements.

  1. 1
    Enter your page URL or paste HTML — Use 'Scan URL' for a live page or 'Paste HTML' for a component. The tool extracts all interactive elements (links, buttons, inputs, elements with tabindex).
  2. 2
    Read the focus order list — Elements are listed in the order a keyboard user would Tab through them. Each entry shows the element type, its accessible name, and its tabindex value.
  3. 3
    Spot the issues — Flags to look for: positive tabindex values (tabindex='1' or higher forces an unnatural order — use 0 or -1 only), elements with no accessible name (screen reader users won't know what they are), and <div> or <span> used as buttons.
  4. 4
    Fix and verify — Remove positive tabindex values and rely on DOM order instead. Add aria-label or visible text to nameless elements. Replace non-semantic interactive elements with proper <button> or <a> tags.

Need Batch Focus Analysis?

Pro: analyse up to 10 URLs simultaneously, export full findings as CSV.

Unlock Pro — Batch Mode

Relevant WCAG Criteria

SC 2.4.3 Focus Order (A) — Focusable components must receive focus in an order that preserves meaning and operability.

SC 2.4.7 Focus Visible (AA) — Any keyboard-operable UI must have a visible focus indicator.

SC 4.1.2 Name, Role, Value (A) — All UI components must have an accessible name and role.

Read SC 2.4.3 Guidance

WCAG 2.2 companion criteria — manual verification required

This tool detects programmatic focus order issues. Two additional WCAG 2.2 Level AA criteria cannot be detected automatically and must be verified by hand:

  • SC 2.4.11 Focus Not Obscured (Minimum, AA) — When a component receives keyboard focus, it must not be entirely hidden by author-created content (e.g. sticky headers, cookie banners).
  • SC 2.4.13 Focus Appearance (AA) — The focus indicator must have a minimum area (perimeter × 2 CSS px) and a contrast ratio of at least 3:1 between focused and unfocused states.

Important Legal Disclaimer

This tool is a self-assessment aid only and does not constitute legal advice or a formally certified compliance assessment. Outputs — including reports, scores, checklists, and accessibility statements — are for internal use and should be reviewed by a qualified legal representative or independent accessibility auditor before being relied upon for regulatory, procurement, or public-disclosure purposes. All assessment risk lies with the internal assessor. accessibilityref, its developers, and staff accept zero liability for losses arising from use of or reliance on these outputs. Always verify against official sources: the W3C WCAG 2.2 Recommendation, the European Accessibility Act (Directive 2019/882), and your national enforcement authority.