click to play button
click to replay button
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!