E-mail List Archives

RE: radio buttons


From: Jukka Korpela
Date: Apr 21, 2002 11:01PM

Cheryl Kirkpatrick wrote:

> I am making a form and would like to have larger than normal radio
> buttons. Does anyone know how to do this?

It is true that the default presentation of a radio button on a typical
graphic browser is rather small and may thus cause accessibility problems
e.g. to people with motoric disabilities. But are you sure the solution is
to try to make them bigger on a per-page or per-site basis, i.e. by
something that an author does?

Technically, you could use
input[type="radio"] { width: 1em; height: 1em; }
in a style sheet. Or you could use a class attribute and achieve somewhat
wider browser coverage for such suggestions.

But there are various reasons why it might not help, even if technically
successful, or could even do harm:
1. The button is now different from a "normal" radio button, i.e. from what
the user's browser uses by default. So, in particular, a person with
cognitive difficulties might not _recognize_ it as a radio button. A
"normal" person probably would, if just the size is different and the
context makes it "obvious" that it is a radio button; but accessibility
means considerations beyond what's "normal".
2. If the size of buttons really matters, the user may have set up a user
style sheet that sets the size to something that suits _his_ need. Like 3em.
Now the author's attempt to help users makes things worse (unless the user
knew to use !important).

I think the most important accessibility issue with radio buttons is to make
the association between the button and the descriptive text (label) as clear
as possible. There are some technical methods for helping this, and they may
even make the descriptive text "active" as well, so that clicking on it
toggles the button setting, just as clicking on the button itself.

More on the accessibility of radio buttons and checkboxes, especially from
the "keyboard-only accessibility" perspective:

Jukka Korpela
TIEKE Tietoyhteiskunnan kehitt