Varying Sizes of Radio Buttons

When I was looking at what looks like the “official” online personality test for Meyers-Briggs when I was spouting off about personality tests, I noticed that their radio button choices were actually kinda cool:

I like how, visually, the larger radio buttons imply “more”.

I can’t 100% vouch for the accessibility of their solution, but at a glance, it seems OK. Visually, those circles are <span>s, but they are using proper <input type="radio"> elements where the arrow keys work and tabbing moves between groups of them and such. They even appear to have proper labels, like “I moderately agree“.

But — there was a smidge of extra engineering that had to happen here, like absolutely positioning the radio buttons and hiding them via opacity and such.

This wasn’t always true, but nowadays:

1. You can size a radio button simply with width and height
2. You can colorize the radios with accent-color.

So here’s basically the same thing with a bit less fancy-dancing:

Live demo:

That works in Chrome and Firefox and…

Aw dammit. No dice on Safari.

lol ok whatever — forget everything I said — they should just keep doing what they are doing.