New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
My dark mode toggle looks like every other one on the web. A screen reader announces nothing at all when it gets focus.
What you'll have at the end
A toggle switch built on a real checkbox with the switch role, so its on-off state reads correctly by ear
You need
A boolean setting already wired to real state in your app, such as dark mode or a notification preference, currently rendered as a div or span that changes color on a click handler, with no role, no announced state, and no way to reach it by keyboard.
Not covered
This does not cover a setting that can be partially on, which needs a checkbox with a mixed state instead, or a choice among three or more options, which is a radio group.
Leans on
An accordion panel keyboard users can open and close
for a control that reveals a whole section rather than flips its own state, a different shape from the plain on or off switch built here.
Restore the focus outline your reset deleted
if drawing the track and thumb over the real checkbox also hides its native focus ring, the fix for bringing a visible ring back.
Checked 24 Aug 2026
Part of the Web Accessibility cookbook