WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: ARIA and Label tags both for Error Messages

for

Number of posts in this thread: 30 (In chronological order)

From: Susan Grossman
Date: Tue, Feb 11 2014 2:48PM
Subject: ARIA and Label tags both for Error Messages
No previous message | Next message →

We have been associating error messages to form fields using
aria-describedby, and the screen reader users who tested it thought it
worked well for them.

We have gotten some push back from a federal agency saying that no ARIA is
supported well enough to rely on and that we must you both aria and label
tags to associate the error messages.

My questions:

1) Do others agree that even aria-describedby (no Live Regions, etc.)
isn't supported enough to stand on it's own

2) Would the redundancy caused by both label tags and aria become too much
to hear for those who can utilize ARIA?

3) If yes to 1 and 2, does that leave us with just implementing the
association with label tags, or is there something else we should be
considering?

Understand that we can still keep things like aria-required (or similar)
because they're a progressive enhancement - asterisk or (optional) is
still there in the form element label.

Any help is appreciated - couldn't quite find this discussion in archives


--
*Susan R. Grossman*
= EMAIL ADDRESS REMOVED =

From: Paul J. Adam
Date: Tue, Feb 11 2014 3:05PM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Not true, WAI-ARIA is well supported in JAWS, NVDA, and VoiceOver... the big 3 screen readers, and only JAWS costs extra money.

I would ask them for more specific supporting evidence for their claims that ARIA is not supported well enough, e.g. who what where when and why it fails.

Yes the redundancy may make it pointless to use ARIA if you're already shoving everything into the label tag? You could try doing ARIA with fallback, i.e. aria-hidden on the extra label text and retain use of aria-describedby but this seem like double work and not worth it.

You could also use the title attribute to communicate info both visually as at tooltip and non-visually to the screen reader. Keyboard-only users without a screen reader will never see/hear the title attributes though.

Good luck! Myself, I've been using WAI-ARIA for years! It's past time for everyone to get on board :)


Paul J. Adam
Accessibility Evangelist
www.deque.com

On Feb 11, 2014, at 3:48 PM, Susan Grossman < = EMAIL ADDRESS REMOVED = > wrote:

> We have been associating error messages to form fields using
> aria-describedby, and the screen reader users who tested it thought it
> worked well for them.
>
> We have gotten some push back from a federal agency saying that no ARIA is
> supported well enough to rely on and that we must you both aria and label
> tags to associate the error messages.
>
> My questions:
>
> 1) Do others agree that even aria-describedby (no Live Regions, etc.)
> isn't supported enough to stand on it's own
>
> 2) Would the redundancy caused by both label tags and aria become too much
> to hear for those who can utilize ARIA?
>
> 3) If yes to 1 and 2, does that leave us with just implementing the
> association with label tags, or is there something else we should be
> considering?
>
> Understand that we can still keep things like aria-required (or similar)
> because they're a progressive enhancement - asterisk or (optional) is
> still there in the form element label.
>
> Any help is appreciated - couldn't quite find this discussion in archives
>
>
> --
> *Susan R. Grossman*
> = EMAIL ADDRESS REMOVED =
> > >

From: Jukka K. Korpela
Date: Tue, Feb 11 2014 3:05PM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

2014-02-11 23:48, Susan Grossman wrote:

> We have been associating error messages to form fields using
> aria-describedby, and the screen reader users who tested it thought it
> worked well for them.

What kind of error messages are we talking about, and how do they work?
Is it a message from a client-side check, or from a server-side check?

The aria-describedby attribute is supposed to provide information about
a field, not about an error condition.

> We have gotten some push back from a federal agency saying that no ARIA is
> supported well enough to rely on and that we must you both aria and label
> tags to associate the error messages.

The label element is supposed to associate a label with a control. It
would seem to be entirely inappropriate to use it to associate an error
message with anything.

Yucca

From: ron
Date: Tue, Feb 11 2014 3:31PM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Paul it would be very interesting if you could further qualify you by which versions of these softwares. From
my research and personal experience it highly variable and not true for versions as recent as 12 for JAWS
and totally untrue for VoiceOver.

Ron Stewart

> --

From: Hewitt,Susan (DSHS)
Date: Tue, Feb 11 2014 3:34PM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Do you mean you would include the error information within the label tag? (Obviously you wouldn't to drop them completely.)

I agree with Yucca that this doesn't seem very semantic although I think the case could be made that it's not forbidden. W3C spec says: "The LABEL element may be used to attach information to controls." I think that gives license to include error information within <label> (after all, it's commonly used to provide formatting info and required status after all.) I also don't think it's inappropriate to use aria-describedby in this situation. But I would not use both methods.

From: ron
Date: Tue, Feb 11 2014 3:35PM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

You will see similar pushback from the AIM space, the HE space and the Public Sector. The compatibility
needs are much different than in the Corporate or personal space.

Ron Stewart

> --

From: Paul J. Adam
Date: Tue, Feb 11 2014 3:37PM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Sure I can qualify what versions... the latest versions and quite some versions back. What ARIA attribute fails in that version of JAWS? Do you have a test case demo of the failure?

Are you saying that VoiceOver has NO ARIA support or great ARIA support? It's not as good as NVDA but it's pretty damn good with most but not all attributes being supported. OS X has better ARIA support with VO than iOS.

Paul J. Adam
Accessibility Evangelist
www.deque.com

On Feb 11, 2014, at 4:31 PM, < = EMAIL ADDRESS REMOVED = > < = EMAIL ADDRESS REMOVED = > wrote:

> Paul it would be very interesting if you could further qualify you by which versions of these softwares. From
> my research and personal experience it highly variable and not true for versions as recent as 12 for JAWS
> and totally untrue for VoiceOver.
>
> Ron Stewart
>
>> --

From: Susan Grossman
Date: Tue, Feb 11 2014 3:47PM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

On Tue, Feb 11, 2014 at 2:05 PM, Jukka K. Korpela < = EMAIL ADDRESS REMOVED = >wrote:

> 2014-02-11 23:48, Susan Grossman wrote:
>


Really appreciate the response. My remarks are inline prefaced with an
asterisk.


>
> We have been associating error messages to form fields using
>> aria-describedby, and the screen reader users who tested it thought it
>> worked well for them.
>>
>
> What kind of error messages are we talking about, and how do they work? Is
> it a message from a client-side check, or from a server-side check?
>



*We have put the describedby attribute in the form element, with it's value
being the ID of the direct container holding the form error message. This
is not an error that validates as user moves on or a simple pattern that
can be caught in the UI.




> The aria-describedby attribute is supposed to provide information about a
> field, not about an error condition.




*Describedby appends to the label and the messages are carefully written to
describe the condition of the form element error in conjunction with the
label. Isn't the error state information about the field?



>
>
> We have gotten some push back from a federal agency saying that no ARIA is
>> supported well enough to rely on and that we must you both aria and label
>> tags to associate the error messages.
>>
>
> The label element is supposed to associate a label with a control. It
> would seem to be entirely inappropriate to use it to associate an error
> message with anything.
>



*This is not an uncommon practice for sites dealing with the government to
use labels like this - to associate a form error message. I'm questioning
whether this practice has validity still, and that if it does, doesn't
including aria (for the modern users they state) a poor idea.




*We don't use the title attribute because less users had it set to read out
in our survey about 18 months ago. Has this changed?



>
> Yucca
>
>
> > > >



--
*Susan R. Grossman*
= EMAIL ADDRESS REMOVED =

From: ron
Date: Tue, Feb 11 2014 4:01PM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Thanks refer to my other reply to this thread. I will leave the test case to the other experienced members
on this list. I have proved them out at this point and would not have made my statements if they were not
true. Actually we dealt with this today for a client institution and once again replicated the issues with both
highly qualified coders and a couple of very experienced Access Experts. Unfortunately I am unable to since
it would result in conflict of interest because I do not have their permission to a commercial vendor nor to a
list as this one sorry.

We have the same issues within ATHEN in trying to validate product compliance and then develop a
transparent repository that is publicly available for these very sticky problems.

Ron Stewart

> --

From: Don Mauck
Date: Tue, Feb 11 2014 4:09PM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

I agree with Paul, I do a lot of testing with JAWS, NvDA, Window-eyes and Voice over and find that while even Voice over has its limits, they all do pretty well. If you are considering JAWS12 as your JAWS testing platform for ARIA, you need to go back a look at the support JAWS stated for ARIA back at its release.

From: Susan Grossman
Date: Tue, Feb 11 2014 4:15PM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

On Tue, Feb 11, 2014 at 2:34 PM, Hewitt,Susan (DSHS) <
= EMAIL ADDRESS REMOVED = > wrote:

> Do you mean you would include the error information within the label tag?
> (Obviously you wouldn't to drop them completely.)
>


It's returning with an error state and we would:
1) append the error message to the label text in the existing label
tag since the specification states one label to one form element
2) prepend an on-screen icon with alt text as error conditioner
identifier
3) probably make the text red
4) They also want ARIA, though it looks like a consensus that we
should push back on having both


>
> I agree with Yucca that this doesn't seem very semantic although I think
> the case could be made that it's not forbidden. W3C spec says: "The LABEL
> element may be used to attach information to controls." I think that gives
> license to include error information within <label> (after all, it's
> commonly used to provide formatting info and required status after all.) I
> also don't think it's inappropriate to use aria-describedby in this
> situation. But I would not use both methods.
>
>

From: Hewitt,Susan (DSHS)
Date: Wed, Feb 12 2014 6:33AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

From an earlier message:
>We don't use the title attribute because less users had it set to read out in our survey about 18 months ago. Has this changed?

I used to be pretty strict in discouraging the use of title attributes as earlier versions of JAWS needed a user to change the default settings to read title. But we're on version 15 now (right?) and at some point you have to move on (see IE6.) I believe VO will always read title. Shamefully, I'm not sure about other screen readers.

When it comes to form fields where a visible field doesn't make sense, I now ask developers to use title before ARIA. I say this because ARIA is there to fill in when existing HTML elements aren't enough and I believe using title is acceptable and preferred in that situation. BUT I would not use it for error messages as it wouldn't be available to keyboard-only (not screen reader) users. There's no way for them to access that "tooltip" pop-up a mouse gets with a title attribute. Steve Faulkner has a lot of good information and thoughts on title here: http://blog.paciellogroup.com/2013/01/using-the-html-title-attribute-updated/

As far as " 4) They also want ARIA, though it looks like a consensus that we should push back on having both," at the end of the day too much information is better than none.


Susan Hewitt
EIR Accessibility Coordinator
Texas Department of State Health Services
= EMAIL ADDRESS REMOVED = | 512-776-2913



From: Greg Gamble
Date: Wed, Feb 12 2014 8:47AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

FYI, the bootstrap-accessibility-plugin has a keyboard accessible tool-tip that works in NVDA.


Greg

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Wed, Feb 12 2014 4:11PM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Hi Listers,

I am coding Java Server pages to make them Section 508 compliant. I would like the application to behave in the following manner:

The page is a form and after the user fills in the form the submit button is pushed. When I tested this application I found the errors were placed at the top of the page and to cause JAWS to tell them to me I have to go to the top of the page and hit "h" to go to the first heading. The sighted person likes this just fine because it is easy to look at the top of the page.

Susie Stanzel

What I would prefer is for the page to simply tell me the error. For those of you who might not know, a Java Server Page (JSP) is converted into actual html.

From: Lucy Greco
Date: Wed, Feb 12 2014 4:28PM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Can you add at least the first one or a count of how many there is to the
page title so the screen reader reads that as the page loads

Lucia Greco
Web Access Analyst
IST-Campus Technology Services
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu


From: Don Mauck
Date: Wed, Feb 12 2014 7:00PM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

I think it should do both. That is, you should be informed of the error, then be able to find the error by looking for the H1 at the top of the page. After all, you need to hear that there is an error before you can go look for it if you didn't clearly hear it originally.

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Thu, Feb 13 2014 5:30AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Good morning Listers,

Okay, I understand placing the error at the top of the page. I thought JAWS should automatically speak the error. Is there something I can do to force that to happen?

Susie Stanzel

From: Susan Grossman
Date: Thu, Feb 13 2014 6:03AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

On Thu, Feb 13, 2014 at 4:30 AM, Stanzel, Susan - FSA, Kansas City, MO <
= EMAIL ADDRESS REMOVED = > wrote:

> Good morning Listers,
>
> Okay, I understand placing the error at the top of the page. I thought
> JAWS should automatically speak the error. Is there something I can do to
> force that to happen?
>
> Susie Stanzel
>


Believe the ARIA alert role (role="alert") would do what you want. Think
that automatically triggers the "assertive" mode. For those with modern
versions.

Susan Grossman



>
>

From: Corbett, James
Date: Thu, Feb 13 2014 6:03AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Suzy:

One technique is to set an anchor to the error message location and on error reload with your url.htm#anchor_name

Jim

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Thu, Feb 13 2014 6:17AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Jim,

I know Java much better than JSP. Could you please code an example?

Susie

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Thu, Feb 13 2014 6:21AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Is there some equivalent in JSP language for setting ARIA?

Susie

From: Corbett, James
Date: Thu, Feb 13 2014 7:23AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

I don't do the screen work, we have folk around here that specialize in that sort of thing. I write the action classes, business layer and ejb's for our STRUTS work.

Give me until after lunch and I'll dig up a code sample.

Jim

From: Alastair Campbell
Date: Mon, Feb 17 2014 5:23AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Sorry to jump in the middle a old thread, but I did some testing on this
recently.

Susan Grossman wrote:
"We have gotten some push back from a federal agency saying that no ARIA is
supported well enough to rely on and that we must you both aria and label
tags to associate the error messages."

I was working with a team that struggled with implementing my suggestion:
putting error messages in the label. Unfortunately they couldn't match the
visual design, at least in a responsive layout.

They tried multiple labels (which I thought odd, but couldn't find anything
that forbade it), but that didn't work very well in NVDA.

Then we tried aria-describedby, but found that VoiceOver on OSX doesn't
support describedby, test-case:
www.alastairc.ac/testing/aria-describedby.html

As a temporary fix I think they used aria-labelled by, which consistently
appends the error message to the primary label. However, describedby would
seem the better fit in general.

Jukka wrote:
> "The aria-describedby attribute is supposed to provide information about
a field, not about an error condition."

So what should associate an error message? The issue is that a screen
reader user tabbing through the form fields cannot tell which have an error
unless the message is associated with the input. E.g. in the label, or
using an ARIA association.

-Alastair

From: Jukka K. Korpela
Date: Mon, Feb 17 2014 5:34AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

2014-02-17 14:23, Alastair Campbell wrote:

> Susan Grossman wrote:
> "We have gotten some push back from a federal agency saying that no ARIA is
> supported well enough to rely on and that we must you both aria and label
> tags to associate the error messages."

I'm still wondering what the question is about. Is it about error
messages issued client-side with JavaScript, on the basis of checks
prior to submitting a form (and possibly not related to form submission
at all), or is it about error messages in the page sent by a server in
response to form submission? Or maybe about HTML5 constraint validation?

I suppose it is about client-side checks, but even there, we have
several rather different cases. The data can be checked as it is being
entered (e.g. with onkeypress), or as one item has been entered (e.g.
with onchange), or when the form is about to be submitted (e.g. with
obsubmit). There are then many different ways to communicate the
error(s) to the user.

I think we need an idea of what is going on as a whole, possibly with a
demo page, before we can discuss the best approach.

Yucca

From: Paul J. Adam
Date: Mon, Feb 17 2014 9:42AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

VoiceOver OS X does support aria-describedby it's just treated as a help tag or "hint" and only read after a user adjustable delay, about 7 seconds I think for OS X. I tried your demo page and it worked.

This was a new "feature" Apple released without any documentation or release notes as usual.

So by default it will appear that an aria-describedby or title attribute is not working with VO/OS X but you have to either wait 7 seconds, or adjust the delay under the VoiceOver utility, or press VO+SHIFT+H. However, there is not an audio earcon or other indication when you're focused on an element if it actually has a title or aria-describedby attribute so the user either has to wait to hear it, press VO+SHIFT+H to see if one is there, or just ignore them as Apple seems to be suggesting they do?

Help tag, Hints screenshots can be seen here: http://pauljadam.com/moderna11y/#title

Paul J. Adam
Accessibility Evangelist
www.deque.com

On Feb 17, 2014, at 6:23 AM, Alastair Campbell < = EMAIL ADDRESS REMOVED = > wrote:

> Sorry to jump in the middle a old thread, but I did some testing on this
> recently.
>
> Susan Grossman wrote:
> "We have gotten some push back from a federal agency saying that no ARIA is
> supported well enough to rely on and that we must you both aria and label
> tags to associate the error messages."
>
> I was working with a team that struggled with implementing my suggestion:
> putting error messages in the label. Unfortunately they couldn't match the
> visual design, at least in a responsive layout.
>
> They tried multiple labels (which I thought odd, but couldn't find anything
> that forbade it), but that didn't work very well in NVDA.
>
> Then we tried aria-describedby, but found that VoiceOver on OSX doesn't
> support describedby, test-case:
> www.alastairc.ac/testing/aria-describedby.html
>
> As a temporary fix I think they used aria-labelled by, which consistently
> appends the error message to the primary label. However, describedby would
> seem the better fit in general.
>
> Jukka wrote:
>> "The aria-describedby attribute is supposed to provide information about
> a field, not about an error condition."
>
> So what should associate an error message? The issue is that a screen
> reader user tabbing through the form fields cannot tell which have an error
> unless the message is associated with the input. E.g. in the label, or
> using an ARIA association.
>
> -Alastair
> > >

From: Alastair Campbell
Date: Mon, Feb 17 2014 10:32AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Ah, ok.

However, that doesn't make it very useful for error messages as you tab
through a form.

Perhaps a combination of dual labels and describedby would be most robust
(assuming you can't include the error message in the label).

Thanks,

Alastair
On 17 Feb 2014 16:43, "Paul J. Adam" < = EMAIL ADDRESS REMOVED = > wrote:

> VoiceOver OS X does support aria-describedby it's just treated as a help
> tag or "hint" and only read after a user adjustable delay, about 7 seconds
> I think for OS X. I tried your demo page and it worked.
>
> This was a new "feature" Apple released without any documentation or
> release notes as usual.
>
> So by default it will appear that an aria-describedby or title attribute
> is not working with VO/OS X but you have to either wait 7 seconds, or
> adjust the delay under the VoiceOver utility, or press VO+SHIFT+H. However,
> there is not an audio earcon or other indication when you're focused on an
> element if it actually has a title or aria-describedby attribute so the
> user either has to wait to hear it, press VO+SHIFT+H to see if one is
> there, or just ignore them as Apple seems to be suggesting they do?
>
> Help tag, Hints screenshots can be seen here:
> http://pauljadam.com/moderna11y/#title
>
> Paul J. Adam
> Accessibility Evangelist
> www.deque.com
>
> On Feb 17, 2014, at 6:23 AM, Alastair Campbell < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Sorry to jump in the middle a old thread, but I did some testing on this
> > recently.
> >
> > Susan Grossman wrote:
> > "We have gotten some push back from a federal agency saying that no ARIA
> is
> > supported well enough to rely on and that we must you both aria and label
> > tags to associate the error messages."
> >
> > I was working with a team that struggled with implementing my suggestion:
> > putting error messages in the label. Unfortunately they couldn't match
> the
> > visual design, at least in a responsive layout.
> >
> > They tried multiple labels (which I thought odd, but couldn't find
> anything
> > that forbade it), but that didn't work very well in NVDA.
> >
> > Then we tried aria-describedby, but found that VoiceOver on OSX doesn't
> > support describedby, test-case:
> > www.alastairc.ac/testing/aria-describedby.html
> >
> > As a temporary fix I think they used aria-labelled by, which consistently
> > appends the error message to the primary label. However, describedby
> would
> > seem the better fit in general.
> >
> > Jukka wrote:
> >> "The aria-describedby attribute is supposed to provide information about
> > a field, not about an error condition."
> >
> > So what should associate an error message? The issue is that a screen
> > reader user tabbing through the form fields cannot tell which have an
> error
> > unless the message is associated with the input. E.g. in the label, or
> > using an ARIA association.
> >
> > -Alastair
> > > > > > >
> > > >

From: Sailesh Panchang
Date: Mon, Feb 17 2014 1:44PM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Perhaps some might find the two examples linked from the article useful. See
http://www.deque.com/blog/aria-invalid-error-indication/
Thanks,
Sailesh

From: Rogers, Jeremiah Z.
Date: Tue, Feb 18 2014 9:09AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Might the solution be to precede labels with some symbol or word, like an exclamation mark or "Error", then use instruction at the beginning of the form to alert screen reader users that the form has errors and, to find out what those errors are, they need do whatever is necessary to access the ARIA-describedBy information? Word it much differently than this, of course, but seems like a possibility.

From: Stanzel, Susan - FSA, Kansas City, MO
Date: Tue, Feb 18 2014 9:34AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | Next message →

Good morning Jim,

Have you had a chance to dig up a code sample?

Susie

From: Corbett, James
Date: Tue, Feb 18 2014 9:49AM
Subject: Re: ARIA and Label tags both for Error Messages
← Previous message | No next message

Suzy:

Just back from a bout with the flu.... thanks for reminding me and I will have something for you by the end of today. Sorry.

Jim