WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Conditional fields in forms

for

From: Jukka K. Korpela
Date: May 15, 2008 1:10AM

Eoin Campbell wrote:

> When a respondent chooses "Other",
> they need to fill in a text box to specify the alternative.

Such a combination of a dropdown menu and a textbox, with the textbox
ideally appearing only when an "Other" choice has been made in the menu,
is often known as a "combo box", though this expression may mean just a
dropdown menu, too.

There's no HTML element for a combo box in the combination meaning, so
at the markup level, you really need separate elements. This means that
there are indeed several approaches.

> Survey Gizmo offers 3 different ways of implementing
> this, and I would like to know if one is more
> accessible than the others.
>
> 1. Textbox field always present
> 2. Textbox field dynamically made visible (using JavaScript)
> on current page if respondent checks 'Other'.
> 3. Textbox field appears as next displayed page,
> if respondent checks 'Other', otherwise the
> following question is displayed.

Alternative 2 as such breaks accessibility seriously (and violates
specific rules and guidelines, too), since the user cannot enter the
text when client-side scripting is disabled or not supported. Worse
still, he doesn't even know what's wrong when nothing happens after he
has selected "Other". Moreover, depending on the techniques used, the
textbox might actually participate in tabbing order, causing additional
confusion.

> My feeling is that 3, inserting a new page,
> is more accessible, but has the disadvantage
> of fragmenting the response from the main question.

For that reason, it isn't very accessible, especially as regards to
people with cognitive difficulties or people working under distracting
circumstances.

> 1 is visually very unappealing, especially where
> the textbox is a multi-row field, and makes the
> survey look cluttered, possibly reducing completion rates.

Authors generally overestimate the meaning of visual appearance of
forms. Forms are to be made for filling, and form should follow
function. :-) But it is useful to consider ways to make the structure
visually clearer e.g. by using <fieldset> markup to group the elements
together.

On the other hand, alternative 1 is cognitively somewhat problematic,
since the textbox appears even when the user is not expected to type in
it. In _this_ sense, alternative 2 is better even for accessibility.

There's a combined approach: use alternative 1, but add JavaScript code
that initially hides the textbox and makes it visible when "Other" has
been selected, as explained at
http://www.cs.tut.fi/~jkorpela/forms/combo.html
(It's an old page and doesn't mention the <fieldset> element, for
example, so use with caution.)

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/