IT and communication: Web authoring and surfing: Forms:

Accessibility issues of checkboxes and radio buttons

This document discusses how to change a checkbox or radio button setting by using keyboard only, on Internet Explorer (primarily version 5) and Netscape (primarily version 4.5). I have studied the issues on Windows platform only.

These issues are important to a person with a motoric disability, to a person using e.g. a portable computer with a mouse system he is not familiar with, and to a user whose mouse is broken or works poorly with no immediate cure. Besides, some people just prefer to use the keyboard, especially when filling out a form with text input fields, so that a lot needs to be done via the keyboard anyway.

In particular, we discuss authoring decisions which can may such usage easier. Such decisions can help the user working with a mouse (or other pointing device), too, since they can make the clickable area bigger and more natural.

For related documents, see Tabbing thru fields - tabbing order in HTML forms, and related issues and Improving accessibility with accesskey in HTML forms and links. The functionality of radio buttons and checkboxes is discussed in Choices in HTML forms.


Consider a typical checkbox in a form:

Include sugar

When the user moves (by tabbing or otherwise) to such a checkbox on Internet Explorer, a small dotted rectangle appears around the box itself. This is an indication of focus; cf. to the "selection rectangle" around links on IE. Hitting the space bar toggles the setting, from unchecked to checked or from checked to unchecked.

On some versions of Netscape too, there might a dotted rectangle as a visual indication of focus, but it appears around the associated text, which might be empty, in which case there would be just a fairly small empty rectangle on the right of the checkbox. On Netscape, the selection of a checkbox can be toggled using space bar or Enter key.

Netscape 6 doesn't seem to use a "selection rectangle". On the other hand, Netscape 6 supports the :focus pseudo-class. This lets the author specify e.g. a background color that should appear when a field is focused on. Example of such a style sheet:
input:focus, textarea:focus, select:focus
  { background : #ffc none; color : #000; }

In our example, the HTML markup is
<input type="checkbox" name="sugar">Include sugar
and this implies that the associated text, in Netscape 4's opinion, is "Include sugar". This is fine, but if there were <br> between the input element and the text, the association is broken, and Netscape either shows that small empty rectangle or no rectangle. The setting can be toggled, but things get rather difficult since the user does not see where he is. This also happens when the input element is in one cell of a table and the text that is intended to explain it is in another cell. Example:

Include sugar
Include cream

There is nothing illogical in such a design; cf. to How to use tables to structurize forms in HTML. But it seems that unless special measures is taken, the design causes problems in keyboard accessibility on Netscape.

Conclusion: Put the text associated with a checkbox right after the checkbox itself. Do not separate them by any block-level markup or by a forced line break. If you use tables to structure your form, put the checkbox and its text into the same cell.

Using label markup for making associations explicit

You can improve usability on sufficiently advanced browsers (e.g., IE 4 and Netscape 6) by using the label markup to explicitly associate some text with a checkbox:
<div><label for="sgr"><input type="checkbox" name="sugar" id="sgr">Include sugar</label></div>
The following example uses this technique:

You can use the label markup for other purposes too, as e.g. the document Improving accessibility with accesskey in HTML forms and links explains.

The simple markup above is sufficient for making Internet Explorer show both the checkbox itself and the checkbox text (label) focused, i.e. with the dotted rectangle, often called "selection rectangle", around them.

Note that id attribute values must be unique in the document, i.e. you need to invent a separate id value for each checkbox. This could be avoided, since the for and id attributes are redundant here, in principle, since the nesting of elements specifies the association. However, browser support to the nice features discussed here is then substantially smaller. This will change, since Internet Explorer finally started supporting the "implicit" association in version IE 7.

On the other hand, in principle, you could you put the input element outside the label element, since the for and id attributes specify the correspondence between the elements. But then, on IE, the dotted rectangle will appear around the text only. This might be esthetically slightly better; and on the other hand it might confuse users who are accustomed to seeing the dotted rectangle around the checkbox.

As another effect, when this technique is used, on IE 4 and Netscape 6 and newer the checkbox setting can be toggled by clicking on the text, too. This can make things easier to mouse users, especially if they have difficulties in moving their hands well, since the checkboxes are fairly small by default. The problem is that the user does not know that he can click on the text. You might give a visual clue by using style sheets to indicate the association. As a simple example, you could specify a background color for label elements, using e.g.
label { background: #fcf none; color: #000; }
in a style sheet. This might give a sufficient hint. Example:

It has also been suggested that changing the shape of the pointer (or "cursor" in the CSS terminology) would be useful. This could be achieved by setting
cursor: pointer; cursor: hand
where the second rule is for IE 5, which does not support the value pointer.

How about making the checkboxes bigger? It is possible on IE by using style sheets to set their width and height. See section The size of radio buttons and checkboxes in Affecting the presentation of form fields on Web pages.

Radio buttons

Radio buttons are used in sets, identified by their sharing the same name attribute value. This implies some differences in their treatment by browsers. Consider the following example, where the three buttons all belong to the same group, i.e. have the same name attribute:

Type of radiation:

On IE, when a radio button group is reached via tabbing, the initially selected button is focused on, and the dotted rectangle indicates this. You can use arrow keys to move between the buttons inside the group; both "down" and "right" arrow move forward inside the group, and both "up" and "left" arrow move backward. And upon moving to a button, that button gets checked (and the button in the group that was checked gets unchecked).

On Netscape, things are different. When a set of radio buttons is reached via tabbing, the first button receives focus. You can move forward inside the group by tabbing. Moving to a button that way does not change the setting. Use the space bar or Enter key to check a button.

Otherwise, the discussion of checkboxes applies to radio buttons, too. You can use label to associate a text with a radio button, etc. Finally, let's see how the set of radio buttons above has been coded in HTML:

<legend>Type of radiation:</legend>
<div><label for="radio1"><input type="radio" name="rad"
  value="1" id="radio1">alpha</label></div>
<div><label for="radio2"><input type="radio" name="rad"
  value="2" id="radio2" checked>beta</label></div>
<div><label for="radio3"><input type="radio" name="rad"
  value="3" id="radio3">gamma</label></div>