Over the years, radio buttons have been used in countless online forms to provide multiple-choice questions to users. Radio buttons were very popular because they closely resembled what was used in the paper-based world.
Accessibility issues with radio buttons
Unfortunately in the online world, radio buttons have accessibility issues, which can prevent certain users from completing online forms. Some of the accessibility issues are:
Radio buttons do not scale with the text on the page causing the following issues for users with low vision and/or mobility impairments:
Users with low vision will have difficulty determining when a radio button is selected.
Users with mobility impairments will have difficulties selecting a radio button because of the small target.
The question must be programmatically associated to a form control in order to be read by a screen reader but there is no ideal way of doing this with radio buttons since there are multiple form controls involved. No matter what method is used, screen reader users will have issues such as the question being overly intrusive, not always being available or not being available at all.
Radio buttons introduce multiple form controls into the tab order resulting in extra effort for screen reader users to navigate a form.
Using the select element as an accessible alternative to radio buttons
Fortunately there is an accessible alternative to radio buttons. The select element can be used to replicate the behaviour of radio buttons yet don't share the same accessibility issues.
The select element and the included text will scale with the rest of the text on the page.
a. Users with low vision can easily determine what option is selected since the entire row of the selected option will be highlighted.
b. Users with mobility impairments can easily select an option because the target is scaleable and the options can easily be navigated/selected using a keyboard.
The question can be easily and accessibly associated to the select element since there is only one form control involved. As a result, screen reader users will not have any accessibility issues with the question as long as it is programmatically associated to the form control.
The select element introduces only one form control to the tab order resulting in less effort for screen reader users to navigate a form versus radio buttons being used.
When replacing radio buttons with select elements, there are two possible scenarios:
Options with a small or medium amount of text will easily fit in a single row of a select element.
This solution is implemented by replacing each radio button with an option element within the select element as shown below.
Make sure to specify the number of options in the size attribute of the select element. This will allow all options to be visible at the same time just like with radio buttons.
<div><label for="q">What is your favourite colour?</label><br />
<select size="4" name="q" id="q">
<option>Blue</option>
<option>Red</option>
<option>Green</option>
<option>Orange</option>
</select>
</div>
Options with a large amount of text
Options with a large amount of text won't easily fit in a single row of a select element. When the text is very long, it will not wrap and will instead stretch the select element horizontally possibly causing accessibility and display issues.
There is also the problem that users can be overwhelmed if they have to choose between several options with large amounts of text. It is especially problematic for screen reader users since it is difficult to remember the options to choose from if there is a lot of text involved.
It is recommended that questions be formulated so the options can be as short as possible. Once the options for the questions are short, then the Options with a small or medium amount of text solution can be used.
The following is an example of reformulating a question so the options can be as short as possible.
Old solution
Which statement regarding CLF and accessibility is the most accurate?
Usability, media-rich interfaces, and seamless transformations are all key factors in designing a Web site that is available to everyone, and can be interpreted by the technologies they use.
Media-rich interfaces, context and orientation, and usability are all key factors in designing a Web site that is available to everyone, and can be interpreted by the technologies they use.
Seamless transformations, context and orientation, and usability are all key factors in designing a Web site that is available to everyone, and can be interpreted by the technologies they use.
Context and orientation, seamless transformations, and media-rich interfaces are all key factors in designing a Web site that is available to everyone, and can be interpreted by the technologies they use.
New solution
Which of the following is not a key factor in designing a Web site that is available to everyone, and can be interpreted by the technologies they use?
