Forms Inside a Datatable

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

Using JavaScript for error correction in forms

Forms Inside a Datatable

Duration: 5 minutes and 21 seconds

Country: Australia

Language: English

License: CC - Attribution Non-commercial No Derivatives

Genre: Instructional

Producer: Roger Hudson, Andrew Downie and Russ Weakley

Director: Roger Hudson

Views: 143 (95 embedded)

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.

Report this video as offensive

Video Transcription

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

Welcome to dotSUB - Any Video Any Language

Welcome to dotSUB!

Any Video Any Langauge

Other videos from webusability

Forms Inside a Datatable

Share

Video Transcription