Skip to content

Focus Order Checker

Paste your HTML and see a visual representation of the keyboard focus order. The tool detects elements that are focusable, shows their tab sequence, and flags any illogical ordering that would confuse keyboard-only users per WCAG 2.4.3 (Focus Order).

Why This Matters

Keyboard users navigate pages using the Tab key. If the focus order jumps around the page unpredictably, it creates confusion and makes interaction impossible. WCAG 2.4.3 requires that focusable elements receive focus in an order that preserves meaning and operability.

How to Use This Tool

  1. 1

    Paste HTML

    Paste your HTML containing interactive elements (links, buttons, inputs, etc.).

  2. 2

    View focus order

    The tool visualizes the tab sequence with numbered badges on each focusable element.

  3. 3

    Review issues

    Positive tabindex values, focusable non-interactive elements, and illogical order are flagged.

  4. 4

    Fix and re-check

    Adjust tabindex and DOM order, then paste again to verify.

Frequently Asked Questions

What is a logical focus order?

A logical focus order means elements receive focus in a sequence that matches the visual layout and reading order. Typically this is top-to-bottom, left-to-right. The DOM order should naturally produce this without needing tabindex adjustments.

Should I use tabindex?

Avoid positive tabindex values (e.g., tabindex="1") as they override natural DOM order and create maintenance problems. Use tabindex="0" to make non-interactive elements focusable, and tabindex="-1" to remove elements from the tab order.

Why are my divs focusable?

A <div> with a tabindex attribute is focusable. This is sometimes intentional (e.g., for custom widgets) but often accidental. Remove tabindex from non-interactive elements unless you're building a custom component.

Related Tools

Contrast Checker

Check WCAG 2.1/2.2 contrast ratios for text and UI components. Supports AA and AAA levels with live preview.

WCAG Checklist

Interactive checklist with all 86 WCAG 2.2 success criteria. Track progress, filter by level, and export your audit results.

Heading Analyzer

Paste your HTML and visualize the heading hierarchy. Detect skipped levels, missing H1s, and structural issues.

Form Checker

Check HTML forms for missing labels, improper associations, and other WCAG form accessibility violations.