Before building Switch/Toggle Generator, we opened a popular existing toggle-switch generator, generated a switch, and read the code it actually output.
What we found: a bare, unlabeled checkbox
The generated markup was <input type="checkbox" class="switch" id="..."> — no role="switch", no <label>, no aria-label. Visually it's a sliding pill that unmistakably reads as an on/off switch. To a screen reader, it's an unnamed checkbox with no way to know what it controls. The visual metaphor and the accessible one point in completely different directions.
Why role="switch" changes the announcement
Without it, assistive tech announces a checked toggle as "checked" or "unchecked" — checkbox language. With role="switch", the same element is announced as "on" or "off" — switch language, matching what the sliding-pill design already promises. This tool's generated markup includes it on every style, every time, not as an optional add-on.
A real label is not optional either
A switch with no associated text has no name at all for a screen reader user to hear. This tool wraps every generated switch in a real <label> with visible text by default, so there's nothing left to forget before shipping it.
opacity:0, not display:none — same lesson as our checkbox generator
The native input is hidden with opacity:0 rather than display:none, for the exact reason we verified directly while building Checkbox Style Generator: display:none removes an element from the keyboard tab order entirely, while opacity:0 keeps it fully focusable.
