Radio Buttons, Checkboxes and AccessibilityBy [email protected] on January 7th, 2022
Accessibility is one of those areas in web design and development where there’s lots of room for growth. As I’m working on a website that has undergone an accessibility audit, I’m realizing that the radio buttons behave in a way that some might find confusing.
Radio buttons allow a user to make a single selection from a group of choices. Unlike a checkbox, radio buttons force the user to make only one selection. It’s this functionality that presents the unusual behaviour to the accessibility user. Checkboxes allow a user to move through the options using the keyboards “tab” button. Radio buttons prevent the “tab” button from moving through the options.
Have a look at the radio button example below:
At first thought, this is confusing behaviour. All the other elements on the site can be brought into focus by using the “tab” button. I can easily go from a navigation link to a search field by using the “tab” button. I can tab through links. I can tab through lists. Tab is the primary way accessibility users move through a site. So why then stop that behaviour when it comes to radio buttons?
The answer comes to the purpose of the radio button. It’s designed so it gives a single response to the server. As such, it acts as though it’s a single item. There’s a great explanation on stack overflow.
Use the “arrow” keys as an alternative to the “tab” button to move through and select radio buttons.
The shift in behaviour from “tab” to “arrow” challenges the consistency rule for good UX design. However, there are exceptions to every rule and this might be one.