WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Tabindex and radio buttons

for

From: Jukka K. Korpela
Date: Jan 27, 2003 12:33PM

On Mon, 27 Jan 2003, Susan Bignell wrote:

> I'm having trouble getting tabindex to work with a set of radio
> buttons (simple yes/no). The tab passes over the radio button
> whose value is set at "1".

As David Hoffman suggested, in practical terms (regarding user
interface issues), using arrow keys would work; apparently user
agents don't support tabbing quite as postulated in WCAG guidelines.

> Does anybody have a best practices they can share?

Well, _my_ suggestion is simple: Put the form fields into a logical order,
so that when the document is processed sequentially, the fields appear in
a good order. No need for tabindex then. And we can't make radio buttons
accessible with tabbing only, no matter what attributes we use; but this
should be no problem, since users who need keyboard access (or just prefer
it) need to learn the browser idiosyncracies in this respect anyway.

> <legend>Use a signature?</legend>
> <label for "no">No</label><INPUT TYPE="radio"
> NAME="UseSig" id="no" VALUE="0" CHECKED TABINDEX="6">
> <label for "yes">Yes</label><INPUT TYPE="radio"
> NAME="UseSig" id="yes" VALUE="1" TABINDEX="7"></fieldset>

It should be for="no" and for="yes", with an equals sign. This however has
no impact on the problem at hand.

In a case like this, I would use a checkbox instead, since it's simpler,
and somewhat more accessible too (partly because the problem discussed
here does not arise then):

<div><input type="checkbox" name="UseSig" value="1">
<label for="sig">Use a signature</label></div>

For checkboxes and radio buttons, it is customary to put the input element
before the label. I think we should stick to this practice, no matter what
we think about it in theory. (If it's bad practice, it has already become
good practice by virtue of being something that people are very familiar
with.)

And if two or more radio buttons or checkboxes are used in a group,
I think each of them should appear on a line of its own, together with the
associated label only. Otherwise there's a risk of misinterpreting the
situation. For a row of radio buttons and texts, even "normal" people
could get confused and select the button before a label when it actually
associates to the left, or make the opposite error. We might then
conjecture that people with cognitive disorders could do the same with
even two buttons.

--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/


----
To subscribe, unsubscribe, or view list archives,
visit http://www.webaim.org/discussion/