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:
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:
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.
label markup for
making associations explicitYou 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 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:
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:
<fieldset>
<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>
</fieldset>