You've already started watching Forms
HTML forms are the primary method of data entry within a web app. This critical component is decent on its own, but there are some enhancements that can be made to make them more accessibile.
-
0:00
[?music playing?] [Treehouse]
-
0:08
There are some subtle differences between websites and web apps.
-
0:12
Over the next several videos, we're going to learn how to make web apps more accessible.
-
0:16
A big part of web apps are forms, so let's focus on those first.
-
0:21
[?music?]
-
0:23
Forms are often the source of poor usability.
-
0:26
There have probably been many instances where you tried to submit a form,
-
0:30
and you weren't able to figure it out.
-
0:33
So, as you can imagine, it's very easy for someone that relies on a screen reader
-
0:37
or refreshable braille display to get lost in a web form like this one.
-
0:41
A form with good visual design will benefit sighted users,
-
0:44
but a form with good markup will benefit all users, and that's what we're going to focus on here.
-
0:51
So, I already have a form here in the web browser,
-
0:54
and if I switch over to my text editor you'll see that I have this form right here
-
0:59
with a label and an input.
-
1:03
So let's go ahead and go through each part.
-
1:06
First, I should mention that this form isn't actually submitting anywhere,
-
1:10
and we don't even really have a submit button.
-
1:12
In a real web form you'd have some sort of server code or java script code
-
1:16
ready to process that form after it's been submitted.
-
1:19
The most important thing here in regard to accessibility is the label tag.
-
1:25
We have the text "first name" next to our input element,
-
1:29
but we didn't just use any element to contain the text "first name."
-
1:34
That's because a label tag is specific to forms
-
1:38
and allows us to tell the browser or screen reader what text is labeling which form element.
-
1:45
So, if you'll notice, we're using the "for" attribute which has the same value as the ID attribute that we're associating it with.
-
1:53
Another nice thing that you'll notice about the label tag if we switch over to the web browser
-
1:58
is that if you actually click on the text it will select the form element.
-
2:04
So let's try using labels now with something more complex, like checkboxes.
-
2:09
So we'll switch over to our text editor, and inside of our form element here
-
2:15
we're going to just create sort of a label up here at the top, not the actual element label,
-
2:23
but just a paragraph which will label this area.
-
2:28
So "select your favorite colors," and we'll create checkboxes that will have colors in them.
-
2:36
So we'll go ahead and create our first input here.
-
2:39
We'll have the ID "red,"
-
2:42
it will be of type "checkbox,"
-
2:46
and it will have the name "color."
-
2:49
Then, we'll go ahead and create a label for this first checkbox.
-
2:54
We want our "for" attribute to match up with our ID,
-
2:59
so we'll go ahead and say this is for red,
-
3:03
and then we'll type in the word red so it stays in the browser,
-
3:08
and go ahead and close out our label there.
-
3:11
So we'll save that out, switch back to the browser and refresh,
-
3:14
and you'll notice that we now have this nice checkbox here.
-
3:17
Now, we want this to be a group of checkboxes, so we'll go ahead and create the rest of them here.
-
3:22
To do that, we'll just copy and paste what we have, and we just need to change the colors here.
-
3:29
This next one will be green, and then we'll change this next one to say blue.
-
3:37
[typing]
-
3:43
So when we switch back to the browser and refresh,
-
3:47
you'll see that we now have this grouping of checkboxes,
-
3:50
and we can actuallyclick on either the checkbox or we can click on the label to go ahead and select it.
-
3:57
In this case, we're putting the label after the input instead of before the input,
-
4:02
which is fine as long as we have the attribute "for" on the label.
-
4:07
A screen reader might read this as "select your favorite colors,
-
4:12
red checkbox not checked, green checkbox not checked, and blue checkbox not checked."
-
4:18
Normally, your markup should be in the proper order
-
4:22
and allow the user to tab through it very easily using the tab key.
-
4:26
So, if we focus on our first input there and then hit the tab key,
-
4:32
we can actually cycle through the inputs.
-
4:36
By holding shift and tab you can, of course, go backwards.
-
4:40
Now, if for some weird reason, whether it be aesthetic or technical,
-
4:45
you have to have some elements in the wrong order in your markup,
-
4:48
you want to make sure that you correct that with the tab index attribute so that you still have a proper tab order.
-
4:55
Pressing the tab key will allow you to jump from one form element to another,
-
5:00
and with the tab index values this will be in ascending order.
-
5:05
So let's go ahead and add some tab index attributes.
-
5:08
So we'll switch back to our text editor and,
-
5:11
on our first input here, let's say that we always want this to be the first thing that people tab to.
-
5:19
So we'll use the tab index attribute, and we'll give it a value of 1.
-
5:25
Now, we'll go ahead and put this in a different order than what we have now,
-
5:31
so we'll go ahead and cut that, and then we'll paste it down here just like that,
-
5:37
and then we'll go ahead and copy our tab index here, and we'll use it on these inputs,
-
5:44
and we'll change this number here.
-
5:47
So we'll save this as the second thing you tab to, this is the third thing,
-
5:51
and this last checkbox is the fourth thing.
-
5:57
So we'll save that out and, just looking at our tab index,
-
6:00
we should tab to the first name value first here and then to the checkboxes.
-
6:06
So let's go ahead and switch back to the browser,
-
6:10
and when we refresh the page you'll notice that the order of them has changed,
-
6:13
but if we hit the tab key we'll go to the first name input first,
-
6:18
and then as we tab through we'll go to the other checkboxes.
-
6:23
[?music?]
-
6:25
As you can see, there are quite a few things we can do to make forms more accessible.
-
6:30
In the next video we'll learn about tables.
-
6:34
[?music?] [Treehouse]
You need to sign up for Treehouse in order to download course files.
Sign up