WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Form Errors w/ ARIA Alert Help

for

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

From: Vincent Young
Date: Mon, Oct 17 2011 10:30PM
Subject: Form Errors w/ ARIA Alert Help
No previous message | Next message →

I'm hoping I can get some help here. I'm trying to trigger an ARIA alert on
form errors w/ the business requirement that the first errored input needs
to get focus. Problem is, errors come back after form submission (i.e. no
JS error handling). The only way I was able to get this to work cross
browser is the ugly implementation below:

http://www.webhipster.com/testing/accessibility/alert/

Does anyone know of a better way to do this? I really hate showing then
hiding the errors then sticking a random element inside all after a
settimeout.

Thanks all!

--
WebHipster Interactive, ltd.
Vincent Young - Principal
33 E. Lincoln St.
Columbus, OH 43215
p: 614.607.3400
f: 339-674-3400
e: = EMAIL ADDRESS REMOVED =
w: http://www.webhipster.com

From: Jeevan Reddy
Date: Tue, Oct 18 2011 5:39AM
Subject: Re: Form Errors w/ ARIA Alert Help
← Previous message | Next message →

Hi vincent,
I think, you are just hiding some error definitions and showing the
hidden information once the user submit the form..This is not feasible
solution!
you can use Tooltip to describe the error fields, or associate the error
descriptions with the corresponding fields using ARIA-described by property.
this will meet your business requirement..


On Tue, Oct 18, 2011 at 10:01 AM, Vincent Young < = EMAIL ADDRESS REMOVED = >wrote:

> I'm hoping I can get some help here. I'm trying to trigger an ARIA alert
> on
> form errors w/ the business requirement that the first errored input needs
> to get focus. Problem is, errors come back after form submission (i.e. no
> JS error handling). The only way I was able to get this to work cross
> browser is the ugly implementation below:
>
> http://www.webhipster.com/testing/accessibility/alert/
>
> Does anyone know of a better way to do this? I really hate showing then
> hiding the errors then sticking a random element inside all after a
> settimeout.
>
> Thanks all!
>
> --
> WebHipster Interactive, ltd.
> Vincent Young - Principal
> 33 E. Lincoln St.
> Columbus, OH 43215
> p: 614.607.3400
> f: 339-674-3400
> e: = EMAIL ADDRESS REMOVED =
> w: http://www.webhipster.com
>

From: Vincent Young
Date: Tue, Oct 18 2011 8:00AM
Subject: Re: Form Errors w/ ARIA Alert Help
← Previous message | Next message →

This is just a simple example. That will be covered thanks. What I'm
looking for is a good way for all the errors to be read first on page load
when the first form field should be focused.
On Oct 18, 2011 4:40 AM, "Jeevan Reddy" < = EMAIL ADDRESS REMOVED = > wrote:

> Hi vincent,
> I think, you are just hiding some error definitions and showing the
> hidden information once the user submit the form..This is not feasible
> solution!
> you can use Tooltip to describe the error fields, or associate the error
> descriptions with the corresponding fields using ARIA-described by
> property.
> this will meet your business requirement..
>
>
> On Tue, Oct 18, 2011 at 10:01 AM, Vincent Young < = EMAIL ADDRESS REMOVED =
> >wrote:
>
> > I'm hoping I can get some help here. I'm trying to trigger an ARIA alert
> > on
> > form errors w/ the business requirement that the first errored input
> needs
> > to get focus. Problem is, errors come back after form submission (i.e.
> no
> > JS error handling). The only way I was able to get this to work cross
> > browser is the ugly implementation below:
> >
> > http://www.webhipster.com/testing/accessibility/alert/
> >
> > Does anyone know of a better way to do this? I really hate showing then
> > hiding the errors then sticking a random element inside all after a
> > settimeout.
> >
> > Thanks all!
> >
> > --
> > WebHipster Interactive, ltd.
> > Vincent Young - Principal
> > 33 E. Lincoln St.
> > Columbus, OH 43215
> > p: 614.607.3400
> > f: 339-674-3400
> > e: = EMAIL ADDRESS REMOVED =
> > w: http://www.webhipster.com
> >

From: Paul Adam
Date: Tue, Oct 18 2011 8:06AM
Subject: Re: Form Errors w/ ARIA Alert Help
← Previous message | Next message →

Are you opposed to putting the errors directly in the label?

On Tue, Oct 18, 2011 at 10:00 AM, Vincent Young < = EMAIL ADDRESS REMOVED = >wrote:

> This is just a simple example. That will be covered thanks. What I'm
> looking for is a good way for all the errors to be read first on page load
> when the first form field should be focused.
> On Oct 18, 2011 4:40 AM, "Jeevan Reddy" < = EMAIL ADDRESS REMOVED = >
> wrote:
>
> > Hi vincent,
> > I think, you are just hiding some error definitions and showing the
> > hidden information once the user submit the form..This is not feasible
> > solution!
> > you can use Tooltip to describe the error fields, or associate the error
> > descriptions with the corresponding fields using ARIA-described by
> > property.
> > this will meet your business requirement..
> >
> >
> > On Tue, Oct 18, 2011 at 10:01 AM, Vincent Young < = EMAIL ADDRESS REMOVED =
> > >wrote:
> >
> > > I'm hoping I can get some help here. I'm trying to trigger an ARIA
> alert
> > > on
> > > form errors w/ the business requirement that the first errored input
> > needs
> > > to get focus. Problem is, errors come back after form submission (i.e.
> > no
> > > JS error handling). The only way I was able to get this to work cross
> > > browser is the ugly implementation below:
> > >
> > > http://www.webhipster.com/testing/accessibility/alert/
> > >
> > > Does anyone know of a better way to do this? I really hate showing
> then
> > > hiding the errors then sticking a random element inside all after a
> > > settimeout.
> > >
> > > Thanks all!
> > >
> > > --
> > > WebHipster Interactive, ltd.
> > > Vincent Young - Principal
> > > 33 E. Lincoln St.
> > > Columbus, OH 43215
> > > p: 614.607.3400
> > > f: 339-674-3400
> > > e: = EMAIL ADDRESS REMOVED =
> > > w: http://www.webhipster.com
> > >

From: Vincent Young
Date: Tue, Oct 18 2011 8:15AM
Subject: Re: Form Errors w/ ARIA Alert Help
← Previous message | Next message →

Don't worry about that. It will be covered. Just wondering about getting
all the errors read first on page load with the requirement that the first
form field should be focused. I'm getting things read but I feel the
implementation is sloppy...
On Oct 18, 2011 7:05 AM, "Paul Adam" < = EMAIL ADDRESS REMOVED = > wrote:

> Are you opposed to putting the errors directly in the label?
>
> On Tue, Oct 18, 2011 at 10:00 AM, Vincent Young < = EMAIL ADDRESS REMOVED =
> >wrote:
>
> > This is just a simple example. That will be covered thanks. What I'm
> > looking for is a good way for all the errors to be read first on page
> load
> > when the first form field should be focused.
> > On Oct 18, 2011 4:40 AM, "Jeevan Reddy" < = EMAIL ADDRESS REMOVED = >
> > wrote:
> >
> > > Hi vincent,
> > > I think, you are just hiding some error definitions and showing the
> > > hidden information once the user submit the form..This is not feasible
> > > solution!
> > > you can use Tooltip to describe the error fields, or associate the
> error
> > > descriptions with the corresponding fields using ARIA-described by
> > > property.
> > > this will meet your business requirement..
> > >
> > >
> > > On Tue, Oct 18, 2011 at 10:01 AM, Vincent Young < = EMAIL ADDRESS REMOVED =
> > > >wrote:
> > >
> > > > I'm hoping I can get some help here. I'm trying to trigger an ARIA
> > alert
> > > > on
> > > > form errors w/ the business requirement that the first errored input
> > > needs
> > > > to get focus. Problem is, errors come back after form submission
> (i.e.
> > > no
> > > > JS error handling). The only way I was able to get this to work
> cross
> > > > browser is the ugly implementation below:
> > > >
> > > > http://www.webhipster.com/testing/accessibility/alert/
> > > >
> > > > Does anyone know of a better way to do this? I really hate showing
> > then
> > > > hiding the errors then sticking a random element inside all after a
> > > > settimeout.
> > > >
> > > > Thanks all!
> > > >
> > > > --
> > > > WebHipster Interactive, ltd.
> > > > Vincent Young - Principal
> > > > 33 E. Lincoln St.
> > > > Columbus, OH 43215
> > > > p: 614.607.3400
> > > > f: 339-674-3400
> > > > e: = EMAIL ADDRESS REMOVED =
> > > > w: http://www.webhipster.com
> > > >

From: Angela French
Date: Tue, Oct 18 2011 9:15AM
Subject: Re: Form Errors w/ ARIA Alert Help
← Previous message | Next message →

The only way I was able to get this to work cross browser is
>the ugly implementation below:
>
>http://www.webhipster.com/testing/accessibility/alert/
>
>

Vincent - when I hit the submit button (after entering a suspect email), I just get a blank page.
Angela French


>

From: Vincent Young
Date: Tue, Oct 18 2011 10:39AM
Subject: Re: Form Errors w/ ARIA Alert Help
← Previous message | No next message

> when I hit the submit button (after entering a suspect email), I just get
a blank page.

Things should be working now. Make sure you don't enter any info into the
fields.

http://www.webhipster.com/testing/accessibility/alert/

These are the results with the limited testing I've had time to do:

Jaws 11
IE 8 (repeats errors)
FF 3.6

Jaws 12
IE 8/9 (repeats errors)
FF 3.6/4

NVDA 2011.2
IE 8/9 (repeats errors and does not read focused input)
FF 3.6/4 (does not read anything)

VoiceOver
Lion (only reads input)

Not the worst results I've had... I think I'm just going to can this idea.
Too bad. It would be nice to have all the errors read once on a page
refresh and the first form field focused which would of course be read as
well.



On Tue, Oct 18, 2011 at 8:15 AM, Angela French < = EMAIL ADDRESS REMOVED = > wrote:

> The only way I was able to get this to work cross browser is
> >the ugly implementation below:
> >
> >http://www.webhipster.com/testing/accessibility/alert/
> >
> >
>
> Vincent - when I hit the submit button (after entering a suspect email), I
> just get a blank page.
> Angela French
>
>
> >