Accessible Radio Groups
Radio buttons are the easiest way to get users to chose one of a small set of choices. Many developers forget that a radio button has two labels: one unique to each radio button, and one for the entire group.
The examples below are from Using Grouping Roles to Identify Related Form Controls from the W3C.
Radio Buttons grouped with fieldsets
This is the best solution to use, especially when building from scratch.
This is the recommended way of grouping radio buttons. If you need them to be styled a different way, please look at the next few examples.
Set Alerts for your Account
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.
HTML5 radio buttons that have custom styling
Read this to style native radio buttons like a Jedi Master
Radio buttons can be styled using a bit of careful CSS-fu. I styled these ones by refactoring the basic CSS from the Custom Radio Button CSS Only Codepen by Mana. I added focus states as well ensuring that these styled facades will be discoverable to users navigating by touch.
Set Alerts for your Account
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.
Custom radio buttons using ARIA
If you already are using a component similar to this in existing work that is not accessible, go to the developer walkthrough of this section to see we made our implementation accessible.
Use when some developer before you decided making <div> tags look like radio buttons was a good use of time.
Even though it wasn't. Bad, developer! Bad!
Set Alerts for your Account
Send an alert when balance exceeds $ 3,000
Send an alert when a charge exceeds $ 250
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.
HTML5 version that uses radiogroup roles.
Since fieldsets are a CSS nightmare to fix sometimes, this is nice alternative.
When it comes to styling fieldsets, they can sometimes be as stubborn as my Mom when I tell her it's time for a medical
checkup. Unlike my Mom, who is absolutely irreplaceable to me, I can replace fieldsets with an ARIA radiogroup role.
Set Alerts for your Account
Send an alert when balance exceeds $ 3,000
Send an alert when a charge exceeds $ 250
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.