Français | Contact Us | Help | Search | Canada Site | |||||
What's New | About Us | Policies | Documents | TBS Site |
Calendar | Links | FAQs | Presentations | Home |
|
Replacing Radio Buttons with Selects
OverviewOver 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 buttonsUnfortunately in the online world, radio buttons have accessibility issues, which can prevent certain users from completing online forms. Some of the accessibility issues are:
Using the select element as an accessible alternative to radio buttonsFortunately 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.
When replacing radio buttons with select elements, there are two possible scenarios: Options with a small or medium amount of textOptions 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. Old solution <div><label for="q1">What is you favourite colour?</label><br /><input type="radio" name="q" id="q1" value="blue" /><label for="q1">Blue</label><br /> <input type="radio" name="q" id="q2" value="red" /><label for="q2">Red</label><br /> <input type="radio" name="q" id="q3" value="green" /><label for="q3">Green</label><br /> <input type="radio" name="q" id="q4" value="orange" /><label for="q4">Orange</label><br /> </div> New solution <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 textOptions 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?
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?
|
||||||||||||||||||||||||||||||
|
|
Top of Page |
Important Notices |