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

Forms Inside a Datatable

0 (0 Likes / 0 Dislikes)
RH: Sometimes data tables contain form inputs for putting information in like financial data tables and quite often it is not absolutely necessary to label each of these inputs because you can identify what the input is from the head of the data table (column). In the past this was difficult under WCAG 1, because you were required to have labels for them. We've got a form here, Andrew can you run through that for us AD: Yes, this is a form with the information contained in a data table. Because I've already looked at the page I can hit 'T' to go straight to the table I know there is a table there. [READER: "Deposit form. Form for allocating deposits to different accounts Column one, row one, account name."] AD: So it reads me that information. I can move across the cells. [READER: "Account balance, deposit amount column three Account name, column one. Personal savings, row two."] AD: So I have come down to the second row of the table. [READER: "Account balance, dollar one thousand, two hundred point 0 0. Column two."] AD: Now it read the heading of the column and then it read the information in the cell I'm in, which is really quite important. [READER: "Deposit amount. Deposit amount for personal savings edit, column three."] AD: So it's told me that's an edit field and if I wanted to deposit money there, I would hit enter to go into forms mode ... [READER: "Forms mode on."] AD: and I can type in five thousand, and I am dreaming at the same time. AD: And then hit enter and turn forms mode off. [READER: "Forms mode off."] AD: So Now if I read that row again, [READER: "Account balance, dollar one thousand two hundered point 0 0 deposit amount. Deposit amount for personal savings edit five thousand point 0 0, column three."] FADE OUT / IN [READER: "Account name, investment account row three, account balance dollar two thousand two hundred point 0 0, column two."] AD: But the one I want... [READER: "Holidays, row four account balance dollar three thousand two hundred point 0 0. Column two deposit amount. Deposit amount for holidays edit column three. Deposit amount for holidays edit. Forms mode on."] AD: So I'll put another three hundred dollars in there and turn forms mode off. [READER: "Forms mode off"] AD: Well in my view I think that table structure works nicely, the information is presented in a fashion that I can understand and its reading the related cells correctly. RH: Now if we go up to the first form field on the page, and that's within this data table, now in these form fields we've given them the title attribute which means if you entered forms mode there you should be able to just tab from one to the other and the title attribute should describe what the form does. AD: Oh yes! ... Go into forms mode. [READER: "Forms mode on."] AD: Now if I tab. [READER: "Deposit amount for investment account edit, type-in-text"] AD: That's right, so we don't have to be going in and out. [READER: "Deposit amount for holidays edit, three hundred, type-in-text"] AD: So just by tabbing in forms mode I can go from each of those edit fields... [READER: "Desposit amount for investment account edit, type-in-text"] AD: ... and I know I know what the edit field is asking me to do. RH: And that's because that information is in the title attribute. Is that handy? AD: Yes, very useful. It just saves a lot of jumping in and out of modes and so forth and makes it very nice. RH: Can we switch to Window Eyes? [CLOSE JAWS OPEN WINDOW EYES] AD: Yes. AD: There are some slight differences in the way the screen readers are driven, but typing 'T' ... [READER: "Table one deposit form. Form for allocating deposits to different accounts four rows three columns"] AD: it still takes me to the table now there's a difference with Window Eyes in that I have to switch into table reading mode. [READER: "Account balance, deposit amount"] AD: So I am reading across the top row ... [READER: "Account name"] AD: If I drop to the second row ... [READER: "Insert entering body personal savings"] AD: Now you notice this one actually said entering body and that's because its picking up the thead and tbody information so it actually tells me when I enter the body of the table. RH: And that's in Window Eyes? AD: Yes, it picks that information up. Now if I go across the row ... [READER: "Account balance one thousand two hundred dollars and no cents. Deposit amount, five thousand point zero zero, last column, deposit amount"] AD: Of course yes, so that's the amount that I filled in previously. RH: If we want to change this, is it much the same. Do you still enter forms mode? AD: It's not called that, they just say browse off. [READER: "Browse off"] AD: I can delete that. RH: Is it the same keyboard command turning browse off? AD: No. RH: Different keyboard commands for different screen readers, oh terrific! AD: Some of the commands parallel each other, but some of them don't. [READER: "Browse on, one table, one heading, four thousand and zero."] AD: That's the amount that I've changed. RH: Can you still tab to the next form input and it'll read the title attribute? [READER: "Browse off. Deposit amount for investment account edit box"] AD: Yes ... [READER: "Deposit amount for holiday, three hundred, edit box"] AD: So that is working exactly the same. RH: So in both cases what's happening is in the mode where you can enter information into the form, the title attribute is giving you all the information you need to make an entry. AD: Yes. - FADE OUT

Video Details

Duration: 5 minutes and 21 seconds
Country: Australia
Language: English
Producer: Roger Hudson, Andrew Downie and Russ Weakley
Director: Roger Hudson
Views: 1,675
Posted by: webusability on Sep 1, 2008

Andrew Downie discusses use of the title attribute to identify forms inputs inside a datatable which can be used to enter the amounts to be deposited in different accounts. 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.