Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Using JavaScript for error correction in forms

0 (0 Likes / 0 Dislikes)
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.

Video Details

Duration: 1 minute and 55 seconds
Country: Australia
Language: English
Producer: Roger Hudson, Andrew Downie, Russ Weakley and Chris Bentley
Director: Roger Hudson
Views: 1,449
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.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.