Focusable Is Not Keyboard-Operable: WCAG 2.1.1 on Custom Controls

A11Y Practice — Thu, 24 Sep 2026 05:20:33 +0000

You Tab to a custom checkbox. The focus ring shows up. You press Space - nothing. Click with the mouse and it toggles.

So is it accessible?

WCAG 2.1.1 Keyboard says the functionality must be available from a keyboard. Landing focus on the control is not enough.

Why tools miss it

In the broken lab case, the accessibility tree still exposes a checkbox with the right name and checked state. VoiceOver can announce it like a normal checkbox. The gap is the missing key handler (onClick only).

Same story for a custom radiogroup where every option has tabIndex={0} and arrow keys do nothing: the tree looks mostly fine; keyboard testing does not.

What to verify manually

Checkbox / switch: Space toggles
Radiogroup: arrows move selection; preferably one tab stop (roving tabindex)
Do not trust "focusable + role" alone

Practice it

I published a walkthrough on A11Y in Practice with broken vs fixed paths on the same free lab:

Part of WAS Exam Prep / WAS Lab study notes (independent; not affiliated with IAAP or W3C).

If this helped, the takeaway I keep repeating: roles name the widget. Keys make it usable.

DEV Community: A11Y Practice

Focusable Is Not Keyboard-Operable: WCAG 2.1.1 on Custom Controls

Why tools miss it

What to verify manually

Practice it