Using JavaScript for error correction in forms

Submit your video and begin subtitling.

Welcome to dotSUB!

Any Video Any Language

On dotSUB you can view, upload, transcribe, and translate any video into and from any language.

To get started and create your own subtitles, click on the yellow "get started" button below!

Other videos from webusability

Refreshable Braille and the Web

Derek Featherstone interview at Webstock 2009

Derek Featherstone interview at webstock 2009

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: 269 (163 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

Show in new window

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 Language

Other videos from webusability

Using JavaScript for error correction in forms

Share

Video Transcription