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

Forms: Label and Title

0 (0 Likes / 0 Dislikes)
RH: Good day I am with Andrew a master of the screen readers. And, he is going to take us through a few forms. But first Andrew, how long have you been using a screen reader? AD: Probably about, or getting on for 30 years. RH: And what do you mainly use these days? AD: My preferred screen reader is Window Eyes, but I also use Jaws for checking consistency of web pages and that sort of thing. RH: And so are those the two we are going to use today? What Versions? AD: Yes version 9 of Jaws and version 6.1 of Windows Eyes. RH: Now, on the web we have increasingly got forms how would you generally approach a form on a website? AD: Well the first thing I would do, but perhaps before I say that, the screen reader, well most screen readers, buffer the entire web page so the first thing I do would be to read through the form to get a sense of what it was about before I start doing any filling out. That's the way I would usually approach it. And then, once I had done that, I'd go into what Jaws calls "forms" mode or edit mode, or whatever term you want to use, which allows me to interact with the form and I'd fill it out. And quite often would be going in and out of "forms" mode or "browse" mode depending on which school you go to check things. If the form was done absolutely perfectly, as yours of course are ... RH: (laugh) sometimes ... AD: Then of course there is much less need to be dropping in and out of those modes. But, because a lot of forms aren't done that way it is important to be checking exactly what you are filling out. RH: Okay can we first look at a form and labelling these form controls, or input fields. Could you run through the form for us? AD: Right [READER: "Heading level 1, label and title. Blank. Name colon edit. Email colon edit. Choose a subscription option from below, colon. Blank. Radio button not checked weekly. Radio button not checked, two of three, monthly. Radio button not checked three of three, quarterly."] RH: In that case you couldn't actually put anything into the form could you? AD: Not at this stage. RH: So say you wanted to put your name in. How would you put your name in? AD: I'd go to the top of the form RH: And you can use a shortcut for that? AD: Control Home. I can type E to get to the first edit field. [READER: "Name colon edit"]. AD: And, then I hit enter [READER: "Forms mode on name colon edit, type-in-text"] AD: Okay... and then I tab ... [READER: "Email colon edit, type-in-text"] [DISPLAY - entering email address. Weekly radio button indicated] [READER: "Weekly radio button not checked. To change the selection press up or down arrow"] RH: Ok now what we noticed there Andrew, was that in read you got a sentence which said choose subscription from options below, but in the forms mode we don't actually get that piece, do we? AD: No. The forms mode will only read what is in the fields to be filled out. It doesn't read anything else on the screen. RH: So, if you put a little instruction in between them, in forms mode it could be missed. Is that one of the reasons why you say you have to go in and out of forms AD: Oh yes, that's why I would always be checking the form before I start filling it out and even when I'm filling it out to make sure that I know what's coming next. RH: Can we see what happens if we put a title attribute to those weekly, monthly and quarterly options? You've got another version with titles, can we look at that? FADE [READER: "Forms mode on. Name colon edit type-in-text"]. AD: That's name. [READER: "Email colon edit, type-in-text. Weekly subscription radio button not checked. One of three to change the .. Monthly subscription radio button, checked. To change the selection press up or down arrow. RH: Now, for this one Andrew you have put in a title attribute, "monthly subscription" so you can understand what it is. AD: Yes it's reading the monthly ... FADE OUT

Video Details

Duration: 4 minutes and 6 seconds
Country: Australia
Language: English
Producer: Roger Hudson, Andrew Downie, Russ Weakley
Director: Roger Hudson
Views: 3,673
Posted by: webusability on Aug 31, 2008

Andrew Downie discusses how the Label element (with the for attribute) or the title attribute for the form control can make HTML forms more screen reader friendly. 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.