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: Vincent Young
Date: Sep 11, 2011 1:12PM

> So, without aria support, what would be your recommendations?

If I understand the question right, you are looking for a non-aria
implementation for backwards compatibility. One way I can think of to do
this is to rely on the title attribute for you label and error message. You
would dynamically insert the error message into the title. Example:

<div>
<strong>Label <span>Error Message</span></strong>
<input title="Label: Error Message" />
<input title="Label: Error Message" />
</div>

Interested parties might be concerned about the long visual title. You
could suppress this on mouseover. However, you might find it is helpful for
general usability and you could always style it up nice like the following:

http://hanshillen.github.com/jqtest/#goto_tooltip



On Sun, Sep 11, 2011 at 8:58 AM, Elle < <EMAIL REMOVED> > wrote:

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