WebAIM - Web Accessibility In Mind

E-mail List Archives

Error Messaging with Forms: Associated Controls, One with Title Attribute, One with Label

for

From: Elle
Date: Sep 11, 2011 9:57AM

Good morning!

Our dev team is in the middle of creating a really complex online enrollment
form, and I have a headache inducing question that I'm hoping this group can
answer. For the purposes of the discussion, I'll give shorthand versions of
the HTML for the section in question. Also, please keep in mind that many
of these design choices are handed to us without much room for restructuring
the layout.

*Before triggering an error...*

<fieldset>
<legend>Effective Dates</legend>

<label for="hospital-month-part-a">* Hospital Insurance (Part A)</label>
<select id="hospital-month-part-a" aria-required="true"
aria-invalid="false">
<option value="0">Month</option>
<option value="1">January</option>
<option value="0">February</option>
<option value="0">March</option>
*... etc*

<select id="hospital-year-part-a" title="* Hospital Insurance (Part A)
Year" aria-required="true"
aria-invalid="false">
<option value="0">Year</option>
<option value="0">2012</option>
<option value="0">2011</option>
*...etc*

<label for="hospital-month-part-b">* Hospital Insurance (Part B)</label>
<select id="hospital-month-part-b" aria-required="true" aria-invalid="false"
>
<option value="0">Month</option>
<option value="1">January</option>
<option value="0">February</option>
<option value="0">March</option>
*... etc*

<select id="hospital-year-part-b" title="* Hospital Insurance (Part B)
Year" aria-required="true"
aria-invalid="false">
<option value="0">Year</option>
<option value="0">2012</option>
<option value="0">2011</option>
*...etc*
*
*
*
<label for="medical-month-part-a">* Medical Insurance (Part A)</label>
<select id="
medical-
month-part-a" aria-required="true" aria-invalid="false">
**
<option value="0">Month</option>
<option value="1">January</option>
<option value="0">February</option>
<option value="0">March</option>
... etc

<select id="
medical-
year-part-a" title="* Medical Insurance (Part A) Year" aria-required="true"
aria-invalid="false">
**
<option value="0">Year</option>
<option value="0">2012</option>
<option value="0">2011</option>
...etc

<label for="
medical-
month-part-b">* Medical Insurance (Part B)</label>
<select id="
medical-
month-part-b" aria-required="true" aria-invalid="false">
<option value="0">Month</option>
<option value="1">January</option>
<option value="0">February</option>
<option value="0">March</option>
... etc

<select id="
medical-
year-part-b" title="* Medical Insurance (Part B) Year" aria-required="true"
aria-invalid="false">
<option value="0">Year</option>
<option value="0">2012</option>
<option value="0">2011</option>
...etc

*
</fieldset>


Okay, whew! This is a (giant) form that I've gotten assistance from you guys
on before, and we've incorporated that feedback. So, when an error is
triggered on one of these elements, we currently do this:

<label for="hospital-month-part-a">* Hospital Insurance (Part A)
<span position="below-label"><img src="error.gif" alt="Error" /> Please
enter a valid month and year for Part A</label>


And, we set the focus to the control that triggered the error:

<select id="hospital-month-part-a" aria-required="true" aria-invalid="true">
*or..*
<select id="hospital-year-part-a" title="* Hospital Insurance (Part A)
Year" aria-required="true"
aria-invalid="true">

Here is a screenshot of the page when an error is triggered, for those of us
who have a hard time imagining the layout: http://i.imgur.com/GbJBD.png

I'm aware that a summary of errors at the top of the page (with handy links
to each field needing correction) would be a better user experience,
especially on a complex form. Unfortunately, that's a design change that
requires an approval process that will take awhile. The issues that I've
noticed with the above method is that the "Year" control isn't associated
with that label that populates with error messaging. It just has a title
attribute. The aria-invalid attribute does change to "true" but that
doesn't seem like enough guidance for a user. I considered the idea of
aria-describedby, to associate the control with the other control's label,
but that seems redundant (if a user had aria enabled, the aria-invalid tag
should suffice, no?).

So, without aria support, what would be your recommendations? If I need to
create off-screen explicit labels instead of title attributes in order to
solve this, I can do that. If I need to set the focus on the label instead
of the control, I could do that.


Much appreciated,
Elle