• Success Criterion 2.1.1
  • Conformance level A

Focusable Element That Enter and Space Don’t Actually Activate

2.1.1 — Keyboard

Scenario

Setting

A crowdfunding platform's campaign page

What’s wrong

Element focusable but Enter/Space do nothing (no keydown/keyup activation).

Example 

<div class="pledge-btn" tabindex="0" onclick="openPledgeModal()">
  Back this project
</div>

Why it matters

A backer can tab to the pledge button and see it highlighted, but pressing Enter does nothing, so they assume the campaign is broken.

How to test

Tab to the control and press Enter, then Space: if the click handler only fires on mouse click and neither key does anything, it fails.

How to fix

onclick alone never catches keydown on a div; add explicit handling for both Enter and Space, or use a real button instead.

<div class="pledge-btn" tabindex="0" role="button"
     onclick="openPledgeModal()"
     onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();openPledgeModal();}">
  Back this project
</div>

Outcome

A backer tabs to the button, presses Enter or Space, and lands in the pledge modal immediately.

Who is affected

Keyboard-only users reach the control but can never trigger it, a focusable-but-frozen trap that is especially confusing.

Learn more

Related scenarios