WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Form validation - on submit or on each required field

for

From: Bryan Garaventa
Date: Jun 26, 2014 2:03PM

If the page doesn't refresh, you can optionally dynamically add aria-describedby to the first form field in error before setting
focus to it via .focus(), and have aria-describedby point to the ID of the error container that relates to it.

This then allows the user to hear the error text, and gives them the ability to type directly into the field with the error without
having to hunt for it.

If more than one field is in error, as the user tabs through the form again, the error associated with the field via
aria-describedby will be announced.



-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Paul J. Adam
Sent: Thursday, June 26, 2014 11:22 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Form validation - on submit or on each required field

It's always best to send focus directly to the errors so the screen reader does not go silent on a bad submit and assume the form is
broken.

If you're doing a page reload you could still send focus to them with JavaScript .focus(), make sure the errors are programmatically
associated with the invalid inputs also so they hear them when TABing.

If the invalid input has an associated error message you could also use HTML5 autofocus to grab it on page reload.



Paul J. Adam
Accessibility Evangelist
www.deque.com

On Jun 26, 2014, at 12:18 PM, Stanzel, Susan - FSA, Kansas City, MO < <EMAIL REMOVED> > wrote:

> When the errors are returned at the top of the page are they supposed to be read automatically? I am coding JSP with the use of
struts. I work at the United States Department of Agriculture.
>
> Susie Stanzel
>
> -----Original Message-----
> From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of Rick Hill
> Sent: Thursday, June 26, 2014 12:14 PM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Form validation - on submit or on each required field
>
> You always need to validate on server side. Using only client-side validation opens you up to evil clients who can fiddle with
your input information. Client-side is basically an add-on with added benefits, but server-side is a must.
> -------------------------------------------------------------------
> Rick Hill, Web CMS Administrator
> Strategic Communications, UC Davis
>
>
> From: <Clark>, "<Michelle - NRCS>", <Washington>, DC < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >>
> Reply-To: WebAIM Discussion List < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >>
> Date: Thursday, June 26, 2014 at 7:36 AM
> To: WebAIM Discussion List < <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >>
> Subject: Re: [WebAIM] Form validation - on submit or on each required field
>
> My preference is to validate at the time of inputting the information. That way, once a user gets to the end, the form is correct
and can be submitted.
>
> Michelle
>
> -----Original Message-----
> From: <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
[mailto: <EMAIL REMOVED> ] On Behalf Of Liko, Todd
> Sent: Thursday, June 26, 2014 10:06 AM
> To: ' <EMAIL REMOVED> <mailto:' <EMAIL REMOVED> >'
> Subject: [WebAIM] Form validation - on submit or on each required field
>
> Hello all.
>
> I am seeking your thoughts on which type of form validation is preferred. A form with required fields (with proper notifications)
can be validated server side when submitting the form or each field can be validated while completing the form.
>
> With validation on submit, if there are errors, the form is refreshed with the focus returning to the top of the form where the
errors are listed. When validating each field while completing the form, the user is notified of the error right away and focus is
returned to the field.
>
> In my opinion, both methods meet WCAG 2.0. However, keeping usability in mind, is there a preference to which method is used.
>
> _______
> Todd Liko
> Communications Advisor | Conseiller en communications Web Services | Services Web Communications and Marketing | Communications et
Marketing
> 427 Laurier Avenue West (AEAD), Ottawa ON K1A 0N5
> 427 Avenue Laurier Ouest (AEAD), Ottawa (Ontario) K1A 0N5 e-mail / courriel:
<EMAIL REMOVED> <mailto: <EMAIL REMOVED> ><mailto: <EMAIL REMOVED> >
> telephone / téléphone: 613-949-9425 | fax / télécopieur: 613-949-2386
> blackberry: 613-796-6375
> Government of Canada | Gouvernement du Canada
>
> > <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
>
>
>
>
> This electronic message contains information generated by the USDA solely for the intended recipients. Any unauthorized
interception of this message or the use or disclosure of the information it contains may violate the law and subject the violator to
civil or criminal penalties. If you believe you have received this message in error, please notify the sender and delete the email
immediately.
> > <EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
>
> > > > >