Accessible Radio Buttons/Checkboxes

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

Gender:

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:

Gender?



<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

Tags: , ,

10 Responses to “Accessible Radio Buttons/Checkboxes”

  1. Kelvin says:

    If you are not skilled with HTML enough, you can do this forms using exisitng tools in Macromedia DreamWeaver. Select from top menu, Insert/Forms/Radio Buttons. Hope this make a sense

  2. Emma says:

    From what I can see, there is no option to put radio buttons or checkboxes within a fieldset in Dreamweaver – it will give you the option of either a <table> or a <br /> layout.

    Dreamweaver have it right by adding a label element for each item by default. However, the labels are wrapped around the input and text and do not have a “for” attribute. This is syntactically correct, but IE does not support clickable labels without the “for” attribute.

  3. How says:

    Oddly, clicking the labels in your example doesn’t work with Firefox or IE.

    But I am using Linux (FF 1.5.0.7) and IE on Wine.

    I wonder if it’s because the fieldset is in a paragraph tag…

    Bloomin anoying when you can’t click the labels. Darn small targets. There’s even a law against them! Well, Fitz law, http://en.wikipedia.org/wiki/Fitts'_law, anyway.

  4. Emma says:

    Somehow I’d got some “curly quotes” around the “for” attribute in the label element. The clickable labels work now on Windows – IE and Firefox.

  5. Hi there, fieldset is a good fix for this as that is exactly what it’s meant for from W3C.

    “Use FIELDSET to group form controls into semantic units and describe the group with the LEGEND element.” – http://www.w3.org/TR/WCAG10-HTML-TECHS/

    PS: If you’re the Emma Sax who signed the W3C petition can you “Digg it” too, so we can get more attention/signatures too – http://digg.com/political_opinion/All_Government_Websites_should_be_Accessible

  6. Emma says:

    ScrambledHeads: I’d digg it if I thought it would make the slightest bit of difference and mainly if I had a digg account.

    However, those kinds of bookmarking sites are now over-run with “professional” diggers, similar to how people try to figure out what Google looks for when compiling it’s search rankings. Basically ruining it for the rest of us.

    Great petition though – readers sign up!

  7. James says:

    I think your solution’s spot on, here’s some more interesting reading from the RNIB on fieldset and legend tags:

    RNIB: Too much accessibiilty – Fieldset Legends

    Hope it’s useful

  8. Emma says:

    Thanks for the extra resource, James.

  9. mike says:

    Is there any standard for the order of radio buttons and their labels? I noticed in your example that first is the button, second is the label. Is this the convention? I have seen it both ways in may places. Thanks
    -Mike

  10. Emma says:

    @mike – the convention is to have the button first and then the label when you are using radio buttons.

    This aids users with motor-impairments ensuring all inputs are aligned vertically and to keep consistency for those with cognitive difficulties.

Leave a Reply