RE: Form Field Help
- From: "Stanzel, Susan - Kansas City, MO" <susan.stanzel@xxxxxxxxxxxx>
- To: "'programmingblind@xxxxxxxxxxxxx'" <programmingblind@xxxxxxxxxxxxx>
- Date: Tue, 2 Mar 2010 15:01:46 -0600
Hi Listers,
I need to know how to code the multi select list and how in JAWS to select
either contiguous or non-contiguouse selections which would then be placed on a
second list. I think this might be the only list I have not written to.
Susie Stanzel
From: programmingblind-bounce@xxxxxxxxxxxxx
[mailto:programmingblind-bounce@xxxxxxxxxxxxx] On Behalf Of E.J. Zufelt
Sent: Tuesday, March 02, 2010 2:51 PM
To: programmingblind@xxxxxxxxxxxxx
Subject: Re: Form Field Help
Good afternoon Peter,
I haven't taken a look at the document you sent, so these comments are general.
For questions where there are only two options and the user is limited to only
one selection I recommend a checkbox instead of a radio button, where there are
more than two responses I recommend radios. If there is a very large number of
responses I recommend a list. Alternatively, if a user may select one or many
of the possible choices your options are limited to checkbox and
multi-selectable list, although I stay away from the list as it is confusing
for screen-reader users (at least it always is for me).
For radios and checkboxes:
1. the set of radios and checkboxes should be wrapped in a fieldset element and
within that there should be a legend element wrapping the question:
<fieldset>
<legend>Is the sky blue</legend>
--- responses go here ---
</fieldset
Note: that most, perhaps all, browsers style fieldsets in an ugly way by
default, so you need to use some CSS to make it less ugly.
For any radio or checkbox form field you should use a label, or at least a
title attribute, to explain the response
<label for="skyBlue"><input type="radio" id="skyBlue" />The sky is blue</label>
or
<label for="skyBlue">The sky is blue</label><input type="radio" id="skyBlue" />
or
<input type="radio" title="The sky is blue" />
Note: that labels have some benefits that titles do not. Labels are displayed
on screen, titles are not. Also, if a user clicks on a label it is equivalent
to putting focus on the form field item, it may even select a checkbox or
radio, I'm not sure.
HTH,
Everett Zufelt
http://zufelt.ca
Follow me on Twitter
http://twitter.com/ezufelt
View my LinkedIn Profile
http://www.linkedin.com/in/ezufelt
On 2010-03-02, at 3:38 PM, Peter Donahue wrote:
Good afternoon everyone,
Attached is a page containing a portion of an online application for
employment. One of the wanted accessibility improvements is for all form
field labels to be voiced by screen readers. So far I have been able to get
all of the form field labels to be read except those that require the
applicant to use radio buttons for entering their data. If you test the form
on the attached page the problem will become clear.
Example: One question asks if the applicant is 18 years or older.
Currently one only hears "Radio Button Checked" or "Radio Button Not
Checked" when attempting to answer this question. What is wanted is for
these questions to be voiced as follows:
"Are you 18 years of age or older radio button checked" or "Are you 18 years
or older radio button not checked?" How should I modify the source code so
both the field label and the state of the radio buttons are voiced
correctly? Should list boxes or check boxes be used to remedy this problem?
If I can get a fix for this problem by Friday that will be very much
appreciated. Thanks in advance for everyone's help.
Peter Donahue
"Will you come and awake our lost land from its slumber
And her fetters we'll break, links that long are encumbered.
And the air will resound with hosannas to greet you
On the shore will be found gallant Irishmen to greet you."
Will You Come to the Bower
Traditional Irish Folk Song
<test_form_sample.html>
Other related posts:
