How to Create Accessible Radio Groups
Radio buttons are the easiest way to get users to choose 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 make 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 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 make the example accessible.
Custom radio buttons using ARIA
Use when some developer before you decided that 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 make 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 make the example accessible.
Radio Buttons That Look Like Buttons
It is better to have radio buttons look like the other examples on this page because it's what users are used to. We only would use the code below if you had to fix code already implemented.
For net new work, do your users a favour and make radio buttons look like traditional radio buttons.
On web pages, radio buttons have traditionally looked like the ones demonstrated earlier on this page: unfilled circles when unselected and filled circles when selected. However, some designers style radio buttons to look like regular buttons instead.
The challenge with styling radio button groups to look like regular buttons is that keyboard users may assume each button can be reached individually using the Tab key. In reality, radio buttons behave differently. Only one radio button in the group—typically the first one or the currently selected one—is included in the tab order. The remaining options are accessed using the arrow keys, which may not be obvious to all users.
To accommodate keyboard users, you could provide instructions above the radio button group explaining how to navigate the options. If desired, these instructions can be hidden visually and revealed only when a keyboard user focuses on one of the radio buttons.
An example of this solution is below. Please keep in mind that we do not suggest this solution for a new website. Designers should just make radio buttons look like radio buttons.
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 make the example accessible.