Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Accessibility on the web has been an issue for over a decade, and it remains a crucial--but often overlooked--element of web design. Instructor Zoe Gillenwater explains the concept of accessibility as it applies to the web, and describes how it affects the audience. She also covers how to set up accessibility testing, and how to apply accessibility principles to new and existing sites using standards-compliant markup and CSS. Exercise files accompany the tutorials.
>> Once we have labels added to our forms, another type of structure we can add is field sets and legends. A field set groups a series of related form elements, for instance field for street address, city, state and zip code could all be grouped under mailing address. You could create a field set that groups all of these elements and give it an appropriate legend to describe that group. The legend is essentially a heading for all of the items in the field set. When a person using a screen reader comes to one of the fields in a field set, the screen reader will also read out the legend text before the label, such as mailing address city.
Using legends and field sets in addition to labels is especially important when you have two groups of elements that are very similar except for their groups type, such as a group of fields for billing address and a group for mailing address. You probably don't want to write billing address city, billing address zip code and so on for every label in your form, so providing a legend with that additional information lets you keep your information simple for sighted users while still understandable to those who can't see a heading for an entire group of fields.
If you're following along with the exercise files, open the page departments.html in Dreamweaver. It's saved in the 08_03 folder of the chapter eight exercise files. This is the same form we were working on in the last movie, but the remaining labels have been added to all of the fields. Also, the single table that was holding together the entire form has been split into multiple tables to make adding the field sets easier. We're going to do that now. Click inside the form, go to the insert tool bar at the top of Dreamweaver and select the forms tab then select the field set button.
It's the fifth button from the right immediately to the right of the button labeled ABC. Click on that button. A dialogue box opens asking you for the legend. Type in contact information then click okay. We now need to add the first table in our form into that field set. Click inside the table then go down to the tag selector at the bottom of the document window and click on the table tag. Press control X or command X on your keyboard to cut the table.
Then place your cursor at the end of the contact information legend and press enter or return. Then press control V or command V on your keyboard to paste the table into your field set. Scroll down to the next table. Place your cursor to the right of the second table. In the insert tool bar again click the field set button. Once again we're asking for a legend. In the case of a grouping of radio buttons or checkboxes, the question that precedes that groups should be the legend. That's because the question is essential for understanding the items below it.
You want to make sure that it gets read as well as the label text for each of the individual radio buttons and checkboxes, so you can put the question itself into the legend, so simply retype the question do you prefer to be contacted via email or phone? Then click okay. Now we can delete this row of the table. Click inside the table cell with the question listed then click the TR tag in the tag selector then click on the code button in the document tool bar. The entire row will be selected, so simply hit backspace or delete on your keyboard to get rid of it.
Go back to design view by clicking on the design button in the document tool bar. Click inside the email and phone table and then click the table tag on the tag selector. Press control X or command X to cut the table, then place your cursor at the end of the question legend, hit enter and hit control V or command V to paste in the table. We have one more field set left to add. Click beside the final table then in insert tool bar click on the field set button. In the dialogue box enter your comments in the legend field then click inside the table above, click on the table tag in the tag selector, hit control X or command X to cut, place your cursor at the end of the your comments legend, hit enter or return, and control V or command V to paste.
The last item in the form is the submit button. It's not necessary to wrap a field set around this button. If you did have several buttons that could be used on your form though, you might consider wrapping them all in a field set. We don't need to do that on this form so we've finished adding all of the structure that we need. It now has all of the extra pieces of HTML that it can for accessibility, labels, field sets and legends. But we can further improve its structure by removing the fields from the tables that are currently being used for the form layout and use CSS instead to control the forms formatting.
We'll cover how to do that next.
There are currently no FAQs about Web Accessibility Principles.
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.