Accessible Radio Buttons/Checkboxes

Take a straight forward question that is usually asked during any online sign-up form:

Gender: Male Female

It is marked up according to the WCAG Priority 2 checkpoint 12.4 that says you should associate labels explicitly with their controls (i.e. by using the label element).

<input type="radio" id="male" name="gender" />
<label for="male">Male</label>

However, I want to explicitly link the original question (gender) with the 2 possible answers and this isn’t possible using the label element because there can be only one label and one control per line. There are a couple of solutions.

Advice from the American Foundation for the Blind

The AFB has a page discussing just this problem and suggests the following:

Solution: include the question in the label of the first option. So, the markup for the “apples” and “Brown rice” choices would look like this:

<label for="q1a">
    1. Which of the following foods have more
    than 3 grams of fiber per serving?
    <br><br>
    Apples
</label>
<input type="checkbox" name="q1a" id="q1a" value="apples">
<br>
<label for="q1b">- Brown rice</label>
<input type="checkbox" name="q1b" id="q1b" value="brown rice">

AFB – Designing Accessible Web Forms

The AFB has suggested the initial question is wrapped into the label of the first answer. The first thing to note is that it does not use the now standard layout of checkbox before label to aid users with motor-impairments ensuring all inputs are aligned vertically and to keep consistency for those with cognitive difficulties (the right-alignment of checkboxes was originally a straight copy from paper-based forms).

Secondly, the label element can only contain other inline elements. This solution can not, therefore, be used if a more complex form mark-up is chosen – for example using ordered, unordered or definition list items for each question.

Use the available mark-up

The fieldset and legend elements are often used to group similar items within a form. For example, “Title”, “Forename” and “Surname” would be grouped in a fieldset with a legend of “Personal Details”.

We can use these elements to group our answers with the original question:

<fieldset>
    <legend>Gender?</legend>
    <input type="radio" id="male" name="gender" /> 
        <label for=”male”>Male</label>
    <input type="radio" id="female" name="gender" /> 
        <label for=”female”>Female</label>
</fieldset>

Not only does this visually group the items, but when screen reader software comes across a legend it will announce it before each item within the fieldset (Gender, male. Gender, female).

This seems, to me, to be the most logical way of marking up this content. However, if the legend is long and there a number of items withint the fieldset, hearing the legend each time could become very frustrating.

This method is supported by WebAIM in Creating Accessible Forms – Screen Reader Form Accessibility

Posted by Emma Sax

September 18, 2006

Uncategorized