Need help adding padding to radio buttons

Thank you!

This is what I went with in the end:

forminator-module-372 input[type=”radio”] {
padding: 12px;
}

I never found a way to actually increase the padding. This just effectively increased the size of the bullet so it’s pretty large. Still, It is now accessible. Since accessibility is a legal requirement in many instances, I’m surprised more plugins don’t naturally account for it.

Thanks for the reminder about the labels. That certainly helps with some radio options. Unfortunately, I’m using a scale with “OK” as an option so it is still too small.
Increasing the padding on the selectors that you mentioned didn’t seem to effect the clickable area on the form, but thank you for trying to help!

Hi Patrick,

The code I ended up using, although specifying “padding” actually did change the size of the bullet. So that is what I ended up with. Visually, I think the bullets looks a little too large, but I’m fine with sacrificing a little aesthetics for accessibility.

I use a 125 point manual heuristic review developed by Maigan Thomas with Level 11 Technology to access website accessibility WCAG AA compliance. The criteria for 44px x 44px targetable area is technically a WCAG AAA criteria (https://www.w3.org/WAI/WCAG21/Understanding/target-size , but considered best practice and helps those whose fine motor is affected as well as those using touchscreens. Lighthouse and other accessibility checkers can be very helpful in identifying some issues, but I haven’t found one that is as comprehensive as a manual review. I use Chrome’s inspect tool to check the element. I can see visually that my 44x44px bullet point does not have clickable space outside of the bullet when I hover my mouse so I can confirm that no additional padding was added to the outside of the bullet. The original bullet was 20x20px which is pretty darn small for a clickable space.