INTERVIEWER: Forms are often a
cause of accessibility problems on websites. There are a few
things you need to do to make sure that everyone
is able to complete the forms on your site. In this tutorial,
you'll learn how to make a form
easy to understand and easy to navigate through,
as well as the proper use of the label element. The first thing you
should be thinking about when creating a form is
whether it is easy for the user to fill out. For example, this
form you see here, you don't really need to collect
all of this information just to send out a newsletter. In contrast, this website only
asks for your email address. Only ask the questions
you really need to know. The longer the form is,
the less likely users are to fill it out. Also think about how the
specific questions you're asking may cause problems
for users with disabilities, such as making the
phone number field on a contact form required. Users who are deaf
or hard-of-hearing don't necessarily have phones. Many will have a cell phone. But if they give you
the number, there needs to be a way they can tell
you it's only for text messages and not calls. Don't make phone
number required, and add another
question to ask if they prefer to be contacted by
phone, email, or text message. Even many users
who aren't disabled would appreciate being given a
choice of how to be contacted. It's a good idea to tell people
upfront any unusual information they need to complete a form. People can easily enter the
basics like their own name and address. But if you ask for something
like a driver's license number, they might not have it handy. This form is
especially complicated, and it tells users
what information they need right upfront. In the Getting Ready
section, there's a link to an entire
separate page that explains exactly what the
applicant will be asked to provide, as far as
medical records, job history, and other personal information. Then under Apply
and Complete, it tells them how long it will
take to complete the form-- one to two hours-- and that they can save their
information as they go. On long forms, the
ability to save as you go will increase usability
for everybody. But it's especially
important for people with physical or
cognitive disabilities who may take longer than
usual to complete the form. It's incredibly frustrating
when a form times out and loses all your information. The ability to save means users
won't have to worry about that. Make sure the form fields are
in a logical order in the HTML, because that is the order that
a keyboard-only user will use to tab through the fields
or that a screen reader will read the fields to a user. On this form, when you
tab, it goes left to right in each row of fields. Generally, this won't be
a problem for most forms. But if you use CSS to rearrange
fields visually on a page, a non-intuitive tabbing
order could cause confusion for anyone who is tabbing
through the form fields. Make sure that
fields are clearly highlighted when
tabbing through the form so that users can see which
field they are typing in. The browser will give selected
fields a style by default, but adding a more
visible style like this will make it easier
for keyboard-only users to see where they
are on the page. Labels are very
important for web forms because they tell the user
what to enter in each field. Be as specific as possible, but
also try to keep them short. This form has very
straightforward labels that are easy to understand. Don't make users guess
what they need to enter. If you want them to
create a password, tell them upfront whether
it must have or can't have certain symbols, numbers,
et cetera, as this form does. If there are other fields
with specific requirements, let the user know. For screen reader users, one
of the most important things for accessibility is
to make sure each label element is properly associated
with the field it corresponds to. Just having them next to each
other visually on the screen isn't enough, since screen
reader users can't see that. Please fill out the
following information to receive our newsletter. First name. Edit text. Blank. Last name. Edit text. Blank. Email address. Edit text. Blank. Send button. If you don't associate
them using code, users may not be able
to figure out which label goes with which field. First, use the for attribute
to tell the screen reader that a label goes
with a certain input. The for value on the label
should match the ID value on the input element. First name. Group. First name. First name. Edit Text. Last name. Group. Last name. Last name. Edit text. For more tips, check out
our Resources section for links to articles
and other tutorials that can help you expand on the
concepts we've covered here. Thanks so much for watching. Don't forget to check out
the other Take 5 videos, as well as the entire course
catalog here at Gymnasium.
