FormVideo.mp4
X
00:00
/
00:00
CC
Forms, perhaps, are used for more interactive purposes on the web than
any other tool. They allow users to make transactions, fill out forms, search the
web, and many other functions. Therefor, their accessibility is very
important. One of the most common ways to navigate through a form is by
using the tab key. So if you have a confusing form layout, such as the one
you see here, it can be quite difficult navigating using a screen reader, as
a screen reader reads linearly and sounds like this when reading it aloud:
first name, email, edit, home phone, edit, edit, middle initial, computer type,
work phone, edit, last name, edit, radio button not checked, Mac, radio button
not checked, PC, country, edit, internet speed, radio button not checked, 28.8,
radio button not checked, 56k, radio button not checked, T1, edit.
To make things simpler, make sure that form labels are adjacent to their controls
and use markup to explicitly associate the controls with their labels. Using the
<label> tag allows a screen reader to read the text that is within the tag as
well as what type of form it is.
After reconfiguring the previous form using the <label> tag and shaping the
form into two columns, the new form looks this. A screen reader may read
this form like so:
"Start of form two: first name, text, last name, text, middle initial, text, home
phone, text, work phone, text, country, text, computer type, not pressed, Mac,
not pressed, PC, not pressed, Linux, internet speed, not pressed, 28.8, not
pressed, 56K, not pressed, T1. End of form 2.”
The last two boxes, at the bottom of the form, clearly are different in the fact that
they have several different choices to choose from. They can be grouped
together by what is called a fieldset. Fieldsets are accompanied by legends,
which explain what the associated form group is. The fieldsets in this example
are defined by the legends, computer type and internet speed.
Notice in the HTML markup that the “for” and “id” values are the same. This
makes certain that each label is associated with its correct form.
Hope this video helps. Thanks for watching!