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:
- Video: https://youtu.be/7B1GsZny4pc
- Lab: https://wasexamprep.com/labs/custom-controls/keyboard-operation
- Short: https://youtube.com/shorts/Fii5VUN9GhI
- Blog: https://wasexamprep.com/blog/focusable-is-not-keyboard-operable
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.
Top comments (0)