WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Section 508 - Form Field Label

for

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
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


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



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


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