Enable

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

Send an alert when balance exceeds $ 3,000
Send an alert when a charge exceeds $ 250

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

HTML5 radio butons 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

Send an alert when balance exceeds $ 3,000
Send an alert when a charge exceeds $ 250

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

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

Yes
No

Send an alert when a charge exceeds $ 250

Yes
No

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞

                    
                

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 irreplacable 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

Example code explanation

Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.

☜ Scroll to read full source ☞