WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible conditional form fields

for

From: D A
Date: Oct 26, 2010 11:39AM

I have the following form structure for a set of fields. It consists
of a radio button list where certain radio buttons may require
additional content:

radio button 1
radio button 2
conditional field for radio button 2
radio button 3
conditional field for radio button 3

The interaction for the above is that we do not show the conditional
fields unless the related radio button is selected. If radio button 2
is selected, then the conditional field appears below.

This works visually as an interaction. I'm not trying to decide what's
the preferred way to make this accessible.

My impression is that one would want to read all 3 radio buttons
without the conditional fields. Upon selected one of the radio
buttons, THEN read the conditional fields.

At the moment, we're using jQuery to hide the conditional fields until
the radio button is selected. To hide it, jQuery sets them to
'display:none'.

My understanding is that should prevent the field fun being read
within a screen reader. Is that correct? Should we also set the
conditional fields to disabled?

Once the conditional fields are exposed (display: block) would they
automatically be then read via the screen reader (given they are next
in the tab order)?

Any thoughts/gotchas?

-DA