WebAIM - Web Accessibility In Mind

E-mail List Archives

Explicit Form Labels and Positioning Question

for

From: Elle
Date: Oct 26, 2011 3:15PM

Good afternoon!

I'm combing through and testing some recently developed pages, and I came
across an error that I'm unsure what recommendations to give on how to
correct it. I have pasted the source code snippet at the bottom of this
post, but here is the general issue I'm facing:

We have a complex ASP.NET 3.5 form page with validation. The error messaging
method that the team chose to use is to place all of the error messaging
content in an external file so that it doesn't populate on initial page load
(Section 508, ยง1194.22 (d)). To do this, we've created an empty <DIV>
element and a definition list that gets populated when an error is
triggered. This markup exists in between the label and the input field in
the source order. Visually, the label text and the text input field are
directly adjacent to one another. When a user clicks "Search" without
entering information, that area expands, the focus goes to the label with
the error <DIV> element in the tab order directly in between label and input
field.

The error I'm receiving when doing an automated scan is "Label is not
positioned properly." Referring to W3C Checkpoint Guidelines, I see the
following instructions: (http://www.w3.org/WAI/wcag-curric/chk11-0.htm)
*
*
*10.2 - Until user agents support explicit associations between labels and
form controls <http://www.w3.org/WAI/wcag-curric/sam78-0.htm>;, for all form
controls with implicitly associated labels, ensure that the label is
properly positioned. - Priority 2*

So, I'm not sure whether it's a nesting issue, a "no markup allowed in
between label and form element" issue, or something else. Additionally (and
please don't burn me in effigy, but I do need to be pragmatic and win the
war here - this is a huge site), I need to know how serious this error is.
Does it always fail with screen reader users, or does it depend on AT
settings, browser/AT combinations, versions, etc? Can screen reader users
weigh in on this so I know what the issue is in the wild?

We have many more issues to fix, but I appreciate your help on this part!
~Elle

.... code snippet follows ....


<div id="search">
<span class="label">
<div id="ctl00_PageContentPlaceholder_RXSearchControl_divSearchByName" class
="greybg">
<span>
*<label id="
ctl00_PageContentPlaceholder_RXSearchControl_RxDrugNameCustomLabel" class="
label" style="width:55px;" for="
ctl00_PageContentPlaceholder_RXSearchControl_RxDrugSearchByNameTextBox">* Rx
Drug:</label>*
<div id="
ctl00_PageContentPlaceholder_RXSearchControl_DrugNameErrorControl_ErrorContainer
" class="ShowError" style="left: 26.85px; top: 176.5px; z-index: 1001;">
<dl class="balloon" title="Error">
<dt>
<a id="
ctl00_PageContentPlaceholder_RXSearchControl_DrugNameErrorControl_ErrorMessageLabel
" class="ErrorMessageLabel" href="
javascript:__doPostBack('ctl00$PageContentPlaceholder$RXSearchControl$DrugNameErrorControl$ErrorMessageLabel',')
" title="Error Occured" onclick="return false;">Drug Name is a required
field.</a>
</dt>
<dd class="close" title="Close">
<input id="
ctl00_PageContentPlaceholder_RXSearchControl_DrugNameErrorControl_CloseImage
" type="image" style="border-width:0px;"
onclick="javascript:CloseErrorMessage('ctl00_PageContentPlaceholder_RXSearchControl_DrugNameErrorControl_ErrorContainer');ValidateErrorCount();return
false;" src="../Images/Buttons/button.png"
onkeydown="javascript:CloseKeyPressed(event,'ctl00_PageContentPlaceholder_RXSearchControl_DrugNameErrorControl_ErrorContainer');return
false;" alt="Close" name="
ctl00$PageContentPlaceholder$RXSearchControl$DrugNameErrorControl$CloseImage
">
</dd>
<dd> </dd>
</dl>
</div>
*<input id="
ctl00_PageContentPlaceholder_RXSearchControl_RxDrugSearchByNameTextBox"
class="RxSeachByDrugNameText MandatoryItem" type="text" onkeypress="
TypeAheadAndAutoHighlight();" aria-hidden="false" name="
ctl00$PageContentPlaceholder$RXSearchControl$RxDrugSearchByNameTextBox"
autocomplete="off">*
<span id="ctl00_PageContentPlaceholder_RXSearchControl_RxDrugNameValidator"
style="color:Red;display:none;"></span>
</span>
</div>