Radio buttons not accessible
- Problem
- There is no accessible, standards-compliant way to code radio buttons in XHTML, because the
label
association mechanism conflicts withname
andid
attributes in radio buttons. - Solution
- Replace the radio buttons with a
select
element. - Explanation
-
Form elements create key-value pairs through the use of
name
andvalue
attributes. The form is serialized as an ampersand-delimited string of fields, where each field takes the form ofname
=value
. This is fine for text input fields and checkboxes, which have a single-source structure in the HTML. However, radio buttons present a special problem. Each radio button in a group has the samename
and a differentvalue
, indicating that they are the possible values a field can take.Recall that
label
depends on theid
of the form element with which it is associated, as well as the requirement that thename
andid
not differ on an element.<label for="address">Address</label> <input type="text" id="address" name="address" value="" />
How, then, does one code radio buttons with labels? Since all the radio buttons in a set will need the same
name
, each element with a label will need anid
, and theid
must match thename
, the radio buttons will have identicalid
s. This is not in compliance with the W3 specifications, however, leading some web designers to choose accessiblity over compliance by appending an index digit to theid
of each radio button.There are further accessiblity issues that I will not explore here, such as visibility of the radio button itself, association of a label with the entire radio set, and visual interference between multiple radio sets.
A better solution is to scrap the radio buttons altogether in favor of the
select
element. The dropdown list is far more accessible, supports internal grouping of options, and consumes less real estate, yet preserves the data structure of the radio buttons. - Resources
-
- Alternatives to radio buttons: How to decide on a solution and refactor the associated text.