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
If you are already using a component similar to this in existing work that is not accessible, go to the developer walkthrough in this section to see how we made our implementation accessible.
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
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.
While this may seem unusual at first, the term radio button actually comes from the physical buttons once used on radios to select preset stations. When one of these buttons was pressed, the others would pop out while the selected one remained pushed in. (source: The history of a radio-button by Alex Yumashev) Many radios (particularly car radios built before the 1980s) used this type of control:
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, it is advisable to 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.
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.