Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
>> Web page forms are a common and vital source of interaction between your users and your site. What may look like a very easy to understand and simple form to use to a sighted user can be quite challenge to use for some people with disabilities if certain features aren't set in the HTML. People with mobility impairments might find it impossible or difficult to set the cursor in a text field and a blind person might not know what the fields of the form are for. One of the things that makes form elements accessible to the blind and visually impaired is labeling the form elements.
Most forms already have labels written beside the fields, but the problem is that if there's nothing in the HTML to associate that piece of text with the adjacent field, then it's just another piece of text and the screen reader cannot know what to tell the user to fill in when it comes to a particular field. If you're following along with the exercise files, open the file departments.html in a browser. It's located in the 08_01 folder of the chapter eight exercise files. This page contains a simple form.
It's very easy for sighted users to know what to fill in each of these fields. The proximity of these text labels makes a visual connection clear, but there's nothing in the HTML to make that explicit. Screen readers will often guess what the label for a field is. But what if they guess wrong? The variety of placements of labels makes that quite possible. You'll see that the first three fields of this form have the label placed off to the left of the field, name, email and phone.
Then we have a question above two radio buttons and then their labels are placed off to the right. Finally another label placed to the left. And then a label placed above the field. So without something in the HTML to tell a screen reader what piece of text relates to what field, it's going to have a very hard time helping its users to fill out the form correctly. Also, radio buttons such as these, as well as checkboxes can be very hard to select for people who do not have fine motor control.
This form could be fixed quite easily by using the label element in HTML. It should be wrapped around every piece of text that describes the purpose of an adjacent form control. Every form control should have a label. And a label can only correspond with one form control. The only form controls that don't need labels are submit buttons and submit images, as their descriptive text is contained in their value and alt attributes, respectively. Labeling form elements is essential to ensure that even a person who cannot see the form can determine what each text field, checkbox, radio button and other form elements are for.
In addition, a label element essentially expands the clickable area of a field. If a radio button or checkbox has a label beside it, you can click anywhere in the label to select that button or checkbox. Next we'll look at how to add labels to forms, both existing ones that you need to retrofit and new ones that you're building from scratch.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.