Content not operable by keyboard

keyboard/interactive-not-focusable

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: keyboard

Why we flag this

Keyboard users are excluded from functionality.

Click handler without keyboard alternative.

What the rule checks

Scope. Rendered, non-inert elements with an interactive widget role (button, link, checkbox, radio, switch, menuitem*, tab, option, treeitem).

Expectation. needs_review once per element that exposes an interactive role but cannot take keyboard focus (no tabindex, not natively focusable): operating it from the keyboard depends on script that the markup does not show. Not reported: native controls, natively disabled fields, native <option>, options or items whose ancestor manages focus with aria-activedescendant, elements not rendered. An <a> without href has no link role (HTML-AAM: generic) and is the business of keyboard/click-handler-not-focusable, not of this rule. A tabindex removed by script after load counts.

Source. WCAG 2.2 SC 2.1.1 Keyboard; WAI-ARIA 1.2 §5.3 widget roles and aria-activedescendant; HTML-AAM (a without href is generic)

Detection: shared; needs dom, ax_tree, computed_style.

Passing example

The check reports nothing here. Corpus case interaction_click_anchor, element a#ch-anchor. The page may contain further findings for other rules.

interaction_click_anchor.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Placeholder link with a click handler</title>
    <style>
        body { font-family: sans-serif; margin: 0; padding: 16px; color: #111; background: #fff; }
        a, button { display: inline-block; min-width: 44px; min-height: 44px; padding: 12px; box-sizing: border-box; margin: 4px; }
        .skip { position: absolute; left: -9999px; }
        .skip:focus { left: 16px; }
    </style>
</head>
<body>
    <a class="skip" href="#main">Skip to main content</a>
    <header><p>Example Travel</p></header>
    <nav aria-label="Main">
        <a href="/" aria-current="page">Home</a>
        <a href="/trips">Trips</a>
    </nav>
    <main id="main">
        <h1>Your saved trips</h1>
        <!-- violation (2.1.1): an a element without href is a placeholder, not a link
             (HTML §4.5.1, HTML-AAM: role generic), and not focusable -->
        <a id="ch-anchor" onclick="this.textContent = 'Saved'">Save trip</a>
    </main>
    <footer><p>Example Travel footer</p></footer>
</body>
</html>

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