Forms: Label and Title

Enterprise Solutions

dotSUB is the world's leading solution for creating, translating, and rendering multiple language subtitles for videos across all platforms.

Our collaborative tools and proprietary back end Project Management System makes it possible to manage complex multiple language translation projects easier, faster and more cost effectively than ever before.

A full suite of integration tools and a Software Development Kit (SDK) makes it possible for our partners to deploy dynamic subtitles to video players, mobile devices, as well as transcription and video editing systems.

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

iPhone, iPad and Apple VoiceOver

Refreshable Braille and the Web

Derek Featherstone interview at Webstock 2009

Duration: 4 minutes and 6 seconds

Country: Australia

Language: English

License: CC - Attribution Non-commercial No Derivatives

Genre: Instructional

Producer: Roger Hudson, Andrew Downie, Russ Weakley

Director: Roger Hudson

Views: 821 (617 embedded)

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.

Report this video as offensive

Video Transcription

Show in new window

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