Focusable element without an interactive role

keyboard/focusable-no-role

WCAG success criterion: 2.1.1 (level A)
Outcome class: Hint only. An automated check that by design reports review hints only: its findings are marked for manual review, never as confirmed violations.
Area: Accessibility, Navigation & Operation
Default severity: critical
axe-core rule: focusable-no-role

Why we flag this

Focusable element without an interactive role.

What the rule checks

Scope. Rendered, non-inert elements in the sequential tab order (tabindex >= 0) that are not natively focusable.

Expectation. needs_review once per element that the Tab key reaches but that has no interactive role (generic, group, paragraph, none and similar): a keyboard user lands on it, but nothing tells whether or how it can be operated. Not reported: tabindex="-1" (a script focus target, not a tab stop; the boundary is 0), a named region with tabindex="0" (the recommended scrollable-region pattern), elements that are not rendered. A tabindex added by script after load counts.

Source. WCAG 2.2 SC 2.1.1 Keyboard and SC 4.1.2 Name, Role, Value; WAI-ARIA 1.2 §5.3 (roles of focusable widgets); HTML §6.6.3 tabindex

Detection: shared; needs dom, ax_tree, computed_style.

Failing example

The check flags this for review. Corpus case keyboard_and_targets. The page may contain further findings for other rules.

keyboard_and_targets.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Keyboard and target size corpus case</title>
</head>
<body>
    <main>
        <h1>Keyboard access and target size issues</h1>
        <div tabindex="0">Focusable div without an interactive role</div>
        <div onclick="console.log('clicked')">Clickable div with no keyboard handler</div>
        <!-- target-size-minimum violation: two 16 px targets side by side — their 24 px circles overlap -->
        <p><button id="tight-a" style="width:16px;height:16px;padding:0;min-width:0;min-height:0;border:none;margin:0;">X</button><button id="tight-b" style="width:16px;height:16px;padding:0;min-width:0;min-height:0;border:none;margin:0;">Y</button></p>
        <!-- target-size-minimum pass: a lone 16 px target, spaced (2.5.8 spacing exception) -->
        <p style="margin:48px 0;"><button id="lone" style="width:16px;height:16px;padding:0;min-width:0;min-height:0;border:none;">Z</button></p>
        <!-- pass for both target-size rules: a link in running text (inline exception) -->
        <p>Read the <a id="inline" href="/terms">terms of use</a> before you continue.</p>
        <form>
            <label for="q">Search</label>
            <input type="text" id="q" name="q">
        </form>
    </main>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.