E-mail List Archives
Thread: Error Messaging with Forms: Associated Controls, One with Title Attribute, One with Label
Number of posts in this thread: 4 (In chronological order)
From: Elle
Date: Sun, Sep 11 2011 9:57AM
Subject: Error Messaging with Forms: Associated Controls, One with Title Attribute, One with Label
No previous message | Next message →
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
From: Vincent Young
Date: Sun, Sep 11 2011 1:12PM
Subject: Re: Error Messaging with Forms: Associated Controls, One with Title Attribute, One with Label
← Previous message | Next message →
> 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 ADDRESS 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
>
From: Elle
Date: Sun, Sep 11 2011 3:33PM
Subject: Re: Error Messaging with Forms: Associated Controls, One with Title Attribute, One with Label
← Previous message | Next message →
Vincent:
I hadn't thought about populating the error message within the title
attribute, the same as what we currently do for the label. That would
definitely work, thank you!
Best,
Elle
From: Tim Harshbarger
Date: Mon, Sep 12 2011 6:45AM
Subject: Re: Error Messaging with Forms: Associated Controls, One with Title Attribute, One with Label
← Previous message | No next message
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 ADDRESS REMOVED = [mailto: = EMAIL ADDRESS 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