[?mellow guitar music?]

Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com

Accessibility: Web Apps - Forms: Part 1 with Nick Pettit

Over the next several videos,

we're going to learn how to make web apps--versus websites--more accessible.

Most web apps feature lots of forms for users to fill out,

so we're going to spend some time focusing on forms first.

Forms are often the source of poor usability.

There's probably been many instances where you've tried to submit a form,

and you weren't able to figure it out.

So, as you can imagine, it's very easy for someone who relies on a screen reader

or a refreshable Braille display to get lost in a web form.

A form with good visual design will benefit sighted users,

but a form with good markup will benefit all users,

and that's what we're going to focus on.

So as you can see here, we just have a basic page.

There's nothing on there except a gradient background.

Switching over to my text editor, we have just some very basic markup here,

and just a little bit of CSS, but we're going to be focusing on the markup.

So first, I'm going to go ahead and create a form.

So we'll type out the <form> tag, and we don't want the action to lead anywhere,

and we'll use the "get" method and we'll go ahead and close that </form> tag.

First, we want to put in a <label> tag,

which I'll explain in just a minute here.

Then we're going to put an <input> tag with a couple of attributes here.

First is the id="first_name".

Next is type= which is "text",

then title= and we'll say "Type your first name."

And then the name of the form element, which is "first_name".

And when we switch back to our browser and refresh,

as you can see, we have some text and right next to our text is an input element.

So let's switch back to the code and go through each part.

First, I should mention that this form isn't actually submitting anywhere.

In a real web form, you'd have some server code or JavaScript code

ready to process the form after it's been submitted,

but that's not what we're interested in.

The important thing here in regards to accessibility

is the <label> tag, which you can see right here.

We added the text First Name next to our input element,

but we didn't use just any element to contain the text.

We could have used a div, a paragraph, a span, or something else,

but we used a label.

That's because a <label> tag is specific to forms,

and allows us to tell the browser or screen reader

what text is labeling which form element,

and in this case, this <label> tag is labeling this input.

Another thing to note is that this text is sequential.

A screen reader is going to read a website in the order of the markup,

not in the order that it's presented.

For text inputs, it's best practice to put your label elements

directly before your input element, like we have here.

A screen reader like JAWS will read this as "First name, edit, hypertext."

We'll talk more about sequence in a moment.

So switching back to the browser here--another nice thing you'll notice

about the <label> tag is that you can actually click on text,

and it will focus the form element, just like this.

So I'm clicking on the text and it's focusing onto the form element.

This is useful for users with milder vision impairments,

especially if you make the text and input much larger

because it makes for a much larger click area.

It's also helpful for users that might not be very familiar with computers,

as they may not know that you normally have to click the input box

in order to change the browser focus.

This way, clicking the label or the input works,

causing less confusion for everyone.

So while we're in the browser, I'd like you to also notice

that if I hover over this text input and leave my cursor there,

the title I gave the input will pop up.

If we switch back to the code, you can see that title attribute right there.

The title attribute can be used on just about any HTML element,

and in the case of forms, you should always try to include a <title> tag

on your input elements.

This is a great way to provide a small bit of instruction

for users that get stuck, and it helps make the form more usable for everyone.

Going back to the label, the way I've associated this label with the input element

is by using the "for" attribute on the <label> tag,

which you can see right here.

The id= attribute on the input is normally used

for selecting the element with CSS and JavaScript,

but it's also useful for the form itself.

By using the same value in the for= attribute and in the id= attribute,

we connect the label and the form element together.

The id= attribute shouldn't be confused with the name attribute.

The name attribute is again, used to identify this particular value

when the form is submitted to some JavaScript code or the server.

So let's try using labels with checkboxes.

So I'm just going to expand out this form here,

and I'm going to use a paragraph to label this part of the form

and I'm actually just going to put that in strong text,

and I'll say Select your favorite colors.

Right below that we're going to create an input with the id= of "red",

it's going to be of type="checkbox"

and we'll give it the title attribute "The color red" and we'll go ahead and capitalize that there--

and we'll also give it the name= "red" and the value= checkbox.

Now, right after that, I'm going to put my <label> tag,

and I'll explain that in a second.

So we'll label that "Red" and we'll close the </label> tag.

Rather than sit here and type out 2 more checkboxes,

I'll just go ahead and copy and paste these from offscreen.

Now we have a red one, a green one, and a blue one.

So when we save that and switch back to the browser and refresh,

you can see that we now have 3 checkboxes here to select our favorite color.

In this case, we're putting the label after the input,

which you can see right here--the label comes second.

A screen reader will read this as "select your favorite colors"

red check box not checked, green check box not checked, blue check box not checked."

This is a very important difference to note

from normal text inputs.

Those are just a few of the things that we can do to make forms more accessible.

In the next video, we'll learn some additional tips.

[?mellow guitar music?]

Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com