[?music playing?] [Treehouse]

There are some subtle differences between websites and web apps.

Over the next several videos, we're going to learn how to make web apps more accessible.

A big part of web apps are forms, so let's focus on those first.

[?music?]

Forms are often the source of poor usability.

There have probably been many instances where you 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 that relies on a screen reader

or refreshable braille display to get lost in a web form like this one.

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 here.

So, I already have a form here in the web browser,

and if I switch over to my text editor you'll see that I have this form right here

with a label and an input.

So let's go ahead and go through each part.

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

and we don't even really have a submit button.

In a real web form you'd have some sort of server code or java script code

ready to process that form after it's been submitted.

The most important thing here in regard to accessibility is the label tag.

We have the text "first name" next to our input element,

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

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.

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.

Another nice thing that you'll notice about the label tag if we switch over to the web browser

is that if you actually click on the text it will select the form element.

So let's try using labels now with something more complex, like checkboxes.

So we'll switch over to our text editor, and inside of our form element here

we're going to just create sort of a label up here at the top, not the actual element label,

but just a paragraph which will label this area.

So "select your favorite colors," and we'll create checkboxes that will have colors in them.

So we'll go ahead and create our first input here.

We'll have the ID "red,"

it will be of type "checkbox,"

and it will have the name "color."

Then, we'll go ahead and create a label for this first checkbox.

We want our "for" attribute to match up with our ID,

so we'll go ahead and say this is for red,

and then we'll type in the word red so it stays in the browser,

and go ahead and close out our label there.

So we'll save that out, switch back to the browser and refresh,

and you'll notice that we now have this nice checkbox here.

Now, we want this to be a group of checkboxes, so we'll go ahead and create the rest of them here.

To do that, we'll just copy and paste what we have, and we just need to change the colors here.

This next one will be green, and then we'll change this next one to say blue.

[typing]

So when we switch back to the browser and refresh,

you'll see that we now have this grouping of checkboxes,

and we can actuallyclick on either the checkbox or we can click on the label to go ahead and select it.

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

which is fine as long as we have the attribute "for" on the label.

A screen reader might read this as "select your favorite colors,

red checkbox not checked, green checkbox not checked, and blue checkbox not checked."

Normally, your markup should be in the proper order

and allow the user to tab through it very easily using the tab key.

So, if we focus on our first input there and then hit the tab key,

we can actually cycle through the inputs.

By holding shift and tab you can, of course, go backwards.

Now, if for some weird reason, whether it be aesthetic or technical,

you have to have some elements in the wrong order in your markup,

you want to make sure that you correct that with the tab index attribute so that you still have a proper tab order.

Pressing the tab key will allow you to jump from one form element to another,

and with the tab index values this will be in ascending order.

So let's go ahead and add some tab index attributes.

So we'll switch back to our text editor and,

on our first input here, let's say that we always want this to be the first thing that people tab to.

So we'll use the tab index attribute, and we'll give it a value of 1.

Now, we'll go ahead and put this in a different order than what we have now,

so we'll go ahead and cut that, and then we'll paste it down here just like that,

and then we'll go ahead and copy our tab index here, and we'll use it on these inputs,

and we'll change this number here.

So we'll save this as the second thing you tab to, this is the third thing,

and this last checkbox is the fourth thing.

So we'll save that out and, just looking at our tab index,

we should tab to the first name value first here and then to the checkboxes.

So let's go ahead and switch back to the browser,

and when we refresh the page you'll notice that the order of them has changed,

but if we hit the tab key we'll go to the first name input first,

and then as we tab through we'll go to the other checkboxes.

[?music?]

As you can see, there are quite a few things we can do to make forms more accessible.

In the next video we'll learn about tables.

[?music?] [Treehouse]