WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Tim Harshbarger
Date: Sep 12, 2011 6:45AM

Elle,

If I am understanding the situation correctly, I am uncertain that the aria-invalid attribute by itself is enough. I would suggest using something like aria-describedby or aria-labeledby to associate the error message with the field. Also, if you want to ensure someone using a screen reader knows how many errors are on the form, you could place a hidden message above the form and also associate it with the fields that have errors--or make it a live region so when the message is added to the DOM, it is read by a screen reader. If you don't wish to use ARIA for solving this problem, you are pretty much stuck with using either the label element or the title attribute to get the information across.

I wish you luck. Good accessible error handling on complex forms often does seem to present interesting challenges.


-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Elle
Sent: Sunday, September 11, 2011 10:58 AM
To: WebAIM Discussion List
Subject: [WebAIM] Error Messaging with Forms: Associated Controls, One with Title Attribute, One with Label

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