You've already started watching Forms: Part 1
In this video, you'll learn how to make web forms more accessible. Web forms play a central role in almost every web app, so it's important to make sure they work properly for everyone.
-
0:00
[?mellow guitar music?]
-
0:03
Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com
-
0:07
Accessibility: Web Apps - Forms: Part 1 with Nick Pettit
-
0:13
Over the next several videos,
-
0:14
we're going to learn how to make web apps--versus websites--more accessible.
-
0:19
Most web apps feature lots of forms for users to fill out,
-
0:22
so we're going to spend some time focusing on forms first.
-
0:26
Forms are often the source of poor usability.
-
0:29
There's probably been many instances where you've tried to submit a form,
-
0:33
and you weren't able to figure it out.
-
0:35
So, as you can imagine, it's very easy for someone who relies on a screen reader
-
0:40
or a refreshable Braille display to get lost in a web form.
-
0:44
A form with good visual design will benefit sighted users,
-
0:48
but a form with good markup will benefit all users,
-
0:53
and that's what we're going to focus on.
-
0:55
So as you can see here, we just have a basic page.
-
0:57
There's nothing on there except a gradient background.
-
1:00
Switching over to my text editor, we have just some very basic markup here,
-
1:05
and just a little bit of CSS, but we're going to be focusing on the markup.
-
1:10
So first, I'm going to go ahead and create a form.
-
1:14
So we'll type out the <form> tag, and we don't want the action to lead anywhere,
-
1:20
and we'll use the "get" method and we'll go ahead and close that </form> tag.
-
1:28
First, we want to put in a <label> tag,
-
1:34
which I'll explain in just a minute here.
-
1:42
Then we're going to put an <input> tag with a couple of attributes here.
-
1:47
First is the id="first_name".
-
1:50
Next is type= which is "text",
-
1:55
then title= and we'll say "Type your first name."
-
2:01
And then the name of the form element, which is "first_name".
-
2:07
And when we switch back to our browser and refresh,
-
2:11
as you can see, we have some text and right next to our text is an input element.
-
2:18
So let's switch back to the code and go through each part.
-
2:21
First, I should mention that this form isn't actually submitting anywhere.
-
2:26
In a real web form, you'd have some server code or JavaScript code
-
2:29
ready to process the form after it's been submitted,
-
2:32
but that's not what we're interested in.
-
2:35
The important thing here in regards to accessibility
-
2:37
is the <label> tag, which you can see right here.
-
2:42
We added the text First Name next to our input element,
-
2:47
but we didn't use just any element to contain the text.
-
2:50
We could have used a div, a paragraph, a span, or something else,
-
2:54
but we used a label.
-
2:56
That's because a <label> tag is specific to forms,
-
2:59
and allows us to tell the browser or screen reader
-
3:02
what text is labeling which form element,
-
3:05
and in this case, this <label> tag is labeling this input.
-
3:10
Another thing to note is that this text is sequential.
-
3:14
A screen reader is going to read a website in the order of the markup,
-
3:18
not in the order that it's presented.
-
3:20
For text inputs, it's best practice to put your label elements
-
3:25
directly before your input element, like we have here.
-
3:28
A screen reader like JAWS will read this as "First name, edit, hypertext."
-
3:35
We'll talk more about sequence in a moment.
-
3:38
So switching back to the browser here--another nice thing you'll notice
-
3:41
about the <label> tag is that you can actually click on text,
-
3:46
and it will focus the form element, just like this.
-
3:49
So I'm clicking on the text and it's focusing onto the form element.
-
3:54
This is useful for users with milder vision impairments,
-
3:57
especially if you make the text and input much larger
-
4:02
because it makes for a much larger click area.
-
4:04
It's also helpful for users that might not be very familiar with computers,
-
4:09
as they may not know that you normally have to click the input box
-
4:14
in order to change the browser focus.
-
4:17
This way, clicking the label or the input works,
-
4:20
causing less confusion for everyone.
-
4:23
So while we're in the browser, I'd like you to also notice
-
4:26
that if I hover over this text input and leave my cursor there,
-
4:30
the title I gave the input will pop up.
-
4:34
If we switch back to the code, you can see that title attribute right there.
-
4:39
The title attribute can be used on just about any HTML element,
-
4:45
and in the case of forms, you should always try to include a <title> tag
-
4:49
on your input elements.
-
4:51
This is a great way to provide a small bit of instruction
-
4:54
for users that get stuck, and it helps make the form more usable for everyone.
-
4:59
Going back to the label, the way I've associated this label with the input element
-
5:04
is by using the "for" attribute on the <label> tag,
-
5:08
which you can see right here.
-
5:10
The id= attribute on the input is normally used
-
5:14
for selecting the element with CSS and JavaScript,
-
5:17
but it's also useful for the form itself.
-
5:20
By using the same value in the for= attribute and in the id= attribute,
-
5:26
we connect the label and the form element together.
-
5:29
The id= attribute shouldn't be confused with the name attribute.
-
5:34
The name attribute is again, used to identify this particular value
-
5:39
when the form is submitted to some JavaScript code or the server.
-
5:44
So let's try using labels with checkboxes.
-
5:47
So I'm just going to expand out this form here,
-
5:52
and I'm going to use a paragraph to label this part of the form
-
5:57
and I'm actually just going to put that in strong text,
-
6:01
and I'll say Select your favorite colors.
-
6:07
Right below that we're going to create an input with the id= of "red",
-
6:14
it's going to be of type="checkbox"
-
6:18
and we'll give it the title attribute "The color red" and we'll go ahead and capitalize that there--
-
6:27
and we'll also give it the name= "red" and the value= checkbox.
-
6:35
Now, right after that, I'm going to put my <label> tag,
-
6:40
and I'll explain that in a second.
-
6:44
So we'll label that "Red" and we'll close the </label> tag.
-
6:48
Rather than sit here and type out 2 more checkboxes,
-
6:51
I'll just go ahead and copy and paste these from offscreen.
-
6:57
Now we have a red one, a green one, and a blue one.
-
7:02
So when we save that and switch back to the browser and refresh,
-
7:06
you can see that we now have 3 checkboxes here to select our favorite color.
-
7:11
In this case, we're putting the label after the input,
-
7:16
which you can see right here--the label comes second.
-
7:21
A screen reader will read this as "select your favorite colors"
-
7:25
red check box not checked, green check box not checked, blue check box not checked."
-
7:32
This is a very important difference to note
-
7:34
from normal text inputs.
-
7:36
Those are just a few of the things that we can do to make forms more accessible.
-
7:40
In the next video, we'll learn some additional tips.
-
7:43
[?mellow guitar music?]
-
7:46
Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com
You need to sign up for Treehouse in order to download course files.
Sign up