E-mail List Archives
Thread: Section 508 - Form Field Label
Number of posts in this thread: 5 (In chronological order)
From: Barry Johnson
Date: Fri, Nov 12 2010 8:00AM
Subject: Section 508 - Form Field Label
No previous message | Next message →
Below is (simplified) code where TITLE is an attribute of a DIV that
contains a form field. Is this an acceptable way to label a form field for
Section 508 Compliance?
<div *title='CBP'>*
*<input type='checkbox' igchk='1' class='igt_align'>*<span igtxt='1' class="
">CBP</span></div>
From: Michael.Moore@dars.state.tx.us
Date: Fri, Nov 12 2010 8:09AM
Subject: Re: Section 508 - Form Field Label
← Previous message | Next message →
No,
"CBP" needs to be contained in a label element that is programmatically bound to the input.
<input type="checkbox" id="ch1a" name="whatever" class=...>
<label for="ch1a">CPB</label>
Nothing in the title of the div provides any semantic meaning to the AT. I am not even aware of any screen reader AT that will read the titles in divs.
Mike Moore
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Barry Johnson
Sent: Friday, November 12, 2010 8:59 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Section 508 - Form Field Label
Below is (simplified) code where TITLE is an attribute of a DIV that
contains a form field. Is this an acceptable way to label a form field for
Section 508 Compliance?
<div *title='CBP'>*
*<input type='checkbox' igchk='1' class='igt_align'>*<span igtxt='1' class="
">CBP</span></div>
From: Jason Megginson
Date: Fri, Nov 12 2010 8:15AM
Subject: Re: Section 508 - Form Field Label
← Previous message | Next message →
JAWS will not render the "title" attribute applied to DIVs. Direct voice
access to the checkbox with Dragon box will not be possible either.
The explicit markup provides a number of functional hooks to allow users
of screen readers and users with limited mobility optimal access to the
checkbox. Dragon users would be able to simply voice the checkbox label
to check and uncheck the control.
When an explicit label is applied to checkboxes and radio buttons,
browsers allow the label itself to be "clicked" which checks (selects) a
radio button and checkbox. This allows a larger clickable area for users
rather than having to merely click the radio button or checkbox.
This is also a good (quick) test to see if labels are structured
accurately.
Jason Megginson
SSB BART Group
(O):703-637-8964
(C):703-244-7755
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of
= EMAIL ADDRESS REMOVED =
Sent: Friday, November 12, 2010 10:06 AM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Section 508 - Form Field Label
No,
"CBP" needs to be contained in a label element that is programmatically
bound to the input.
<input type="checkbox" id="ch1a" name="whatever" class=...>
<label for="ch1a">CPB</label>
Nothing in the title of the div provides any semantic meaning to the AT. I
am not even aware of any screen reader AT that will read the titles in
divs.
Mike Moore
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Barry Johnson
Sent: Friday, November 12, 2010 8:59 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Section 508 - Form Field Label
Below is (simplified) code where TITLE is an attribute of a DIV that
contains a form field. Is this an acceptable way to label a form field
for
Section 508 Compliance?
<div *title='CBP'>*
*<input type='checkbox' igchk='1' class='igt_align'>*<span igtxt='1'
class="
">CBP</span></div>
From: Jason Megginson
Date: Fri, Nov 12 2010 8:21AM
Subject: Re: Section 508 - Form Field Label
← Previous message | Next message →
No, there is no explicit association between the label and the checkbox. I
assume the asterisk is a required field? If so, include that in explicit
label markup. An id attribute must be set in the checkbox. That "id"
attribute must match the "for" attribute of the corresponding LABEL tag.
For Example:
<div *title='CBP'>*
*<input type='checkbox' igchk='1' id="someID" class='igt_align'><label
for="someID">*<span igtxt='1' class="
">CBP</span></label></div>
Jason Megginson
SSB BART Group
(O):703-637-8964
(C):703-244-7755
-----Original Message-----
From: = EMAIL ADDRESS REMOVED =
[mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Barry Johnson
Sent: Friday, November 12, 2010 9:59 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Section 508 - Form Field Label
Below is (simplified) code where TITLE is an attribute of a DIV that
contains a form field. Is this an acceptable way to label a form field
for
Section 508 Compliance?
<div *title='CBP'>*
*<input type='checkbox' igchk='1' class='igt_align'>*<span igtxt='1'
class="
">CBP</span></div>
From: Gunderson, Jon R
Date: Fri, Nov 12 2010 8:27AM
Subject: Re: Section 508 - Form Field Label
← Previous message | No next message
Here is a list of best practices for checkboxes:
http://html.cita.illinois.edu/nav/form/checkbox/
Jon
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of = EMAIL ADDRESS REMOVED =
Sent: Friday, November 12, 2010 9:06 AM
To: = EMAIL ADDRESS REMOVED =
Subject: Re: [WebAIM] Section 508 - Form Field Label
No,
"CBP" needs to be contained in a label element that is programmatically bound to the input.
<input type="checkbox" id="ch1a" name="whatever" class=...> <label for="ch1a">CPB</label>
Nothing in the title of the div provides any semantic meaning to the AT. I am not even aware of any screen reader AT that will read the titles in divs.
Mike Moore
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Barry Johnson
Sent: Friday, November 12, 2010 8:59 AM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Section 508 - Form Field Label
Below is (simplified) code where TITLE is an attribute of a DIV that contains a form field. Is this an acceptable way to label a form field for Section 508 Compliance?
<div *title='CBP'>*
*<input type='checkbox' igchk='1' class='igt_align'>*<span igtxt='1' class="
">CBP</span></div>