Using JavaScript for error correction in forms

Submit your video and begin subtitling.

Welcome to dotSUB!

Any Video Any Langauge

dotSUB is your gateway to finding 'Any Video in Any Language'

You can upload your video and help translate it into multiple languages

Other videos from webusability

Forms: Dynamic Select Menu

Show and Hide Form Sections

Forms: Fieldset and Legend

Using JavaScript for error correction in forms

Duration: 1 minute and 55 seconds

Country: Australia

Language: English

License: CC - Attribution Non-commercial No Derivatives

Genre: Instructional

Producer: Roger Hudson, Andrew Downie, Russ Weakley and Chris Bentley

Director: Roger Hudson

Views: 121 (70 embedded)

Posted by: webusability on Sep 3, 2008

Andrew Downie demonstrates a screen reader friendly use of JavaScript to help correct errors in HTML forms. For more information see the article "Accessible Forms Using WCAG 2.0" on the Web Usability site.

Report this video as offensive

Video Transcription

Roger - Many forms now use JavaScript for a variety of reasons
but it is really hard to use JavaScript and still fully comply with
Web Content Guidelines Version 1, but it is possible to make JavaScript very screen reader friendly
so we have got a few examples of forms that use JavaScript for some typical
purposes and in a screen reader friendly way
over to you Andrew, what is the first one?
[Display - Error Detection and Messages form]
[Reader: "top, heading 1, error detection and messages, begin form. Enter some numbers"]
[Reader: "First number, edit box first number"] Andrew - Right, so I enter some numbers.
[Display - two shot] [Reader: "Browse off, first number, edit box. Second number."]
[Display - form with numbers in first two edit boxes] [Reader: "Third number"]
[Display - letter F in third box] Andrew - Now, that time I typed F rather than a number
Roger - So you made a mistake? Andrew - Yes, made a mistake and I now hit sumbit
[Display - Form with error message] [Reader: "Link please correct the following errors"]
[Reader: "Link, Third number must be a number"] Andrew - I enter on that
[Display - cursor goes to third edit box] [Reader: "Third number F edit box"]
Andrew - So it drops me straight back into the edit box, so I delete F
[Reader: "F"] And, I put in a number. [Reader: "Submit, button"]
And then submit that and it will be happy.
[Display - two shot] Roger - That's fantastic. Andrew - It's lovely. It drops you right
on the right spot to tell you what the error was
Quite often with a lot of forms you'll make an error but you've then
got to scrounge around to find what it doesn't like
or even to work out that it doesn't like something where as
this is just very elegant indeed. Roger - I imagine in a simple little form like this,
three fields wouldn't be a problem for you but if it was a form with 25 fields
Andrew - That's right, it becomes quite tedious to find out sometimes
even to know that you have made a mistake and then to find out
which field they are referring to. This is very nice.
Roger - In your experience, this works basically with both Window Eyes and Jaws?
Andrew - Yes, its very screen reader friendly.

Welcome to dotSUB - Any Video Any Language

Welcome to dotSUB!

Any Video Any Langauge

Other videos from webusability

Using JavaScript for error correction in forms

Share

Video Transcription