For whatever reason some people don’t like the standard HTML checkbox and radio button, they seek to jazz ’em up and in the process the often jizz up the usability/accessibility of these controls.
There are some good efforts out there to win over developers/designers to using native controls, or minimally customized controls. Here I provide my simple variation:
Key coding items
-
- Use of CSS adjacent sibling selector to provide visible focus
- Use of CSS
::beforeto provide visual UI/state - Tucked
inputunderlabel::beforecontent using negativemarginand hidinputvisually viaopacity:0 - Added
aria-labeltoinputsandaria-hidden=truetolabelelements to ensure::beforecontent is not, but accessible name is announced by screen readers
See the Pen
poEmKXo by steve faulkner (@stevef)
on CodePen.
Transcript
Now smile. - I beg your pardon? - Smile. - Why? - Just do it. I'm afraid I can't smile without a reason. Smile. - What's there to smile about? - Just do it. Why? Don't ask why. What's there to smile about?
Lyrics
If you have a friend On whom you think you can rely You are a lucky man And if you found the reason To live on and not to die You are a lucky man The preachers, and the poets And the scholars don't know it The temples, and the statues And steeples don't show it If you've got the secret Just try not to blow it Stay a lucky man Stay a lucky man Because on and on And on and on we go And it's around the world In circles turning Earning what we can While others dance away The chance to light your way So you know that if you have a friend On whom you think you can rely You are a lucky man And if you've found the reason To live on and not to die You are a lucky man You know the preachers, and the poets And the scholars don't know it And the temples, and statues And steeples won't show it If you've got the secret Just try not to blow it Stay a lucky man Oh, stay a lucky man And it's around and round, and round And round, and round we go And it's around the world In circles turning Earning what we can While others dance away The chance to light your day So it's on, and on and on And it's on, and on and on Around the world in circles turning Earning what we can While others dance away The chance to light your day