Building Custom Form Selection Boxes - Working on Accessibility

Whenever I find myself needing to update a previous blog post, I either correct it inline and add a small note on top, for small tweaks, or write a whole new piece for larger changes. My last blog post talked about how to use CSS to style a "block" such that it acted like a form radio button. When I worked on that demo, I was a bit worried about accessibility. I did one quick check with an online tool, and thought I was ok. I was not. When I shared my post on LinkedIn, Kevin Bonett shared this feedback with me: I would argue that, despite using correct semantic HTML, the "custom" radio buttons are inaccessible. If you're a sighted keyboard user, how will you know how to interact with the radios, because they look nothing like traditional controls? Radio selection is usually made with ARROW keys. There's nothing to visually suggest this. Users may become frustrated because they're trying to use TAB key instead to access the 2nd radio. This all made sense to me, so I turned to Cursor…