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.
>> If you're following along with the exercise files, open departments.html in Dreamweaver from the 08_05 folder of the exercise files. This is the same page we worked on in the previous movie, but all of the remaining tables have been removed and all of the labeled field pairs are now in ordered lists. With all the HTML pieces that the form set, we can now begin styling our form with CSS. We'll start by formatting the field sets and legends. Click on the new CSS rule button at the bottom of the CSS styles panel.
In the new CSS rule dialogue box, choose tag as the selector type. In the Tag menu, choose field set. Keep define in styles.css selected. Click okay. For the field set, we simply want to work on its margin and padding properties in order to iron out inconsistencies between the browsers, so click on the box category. Leave the same for all box checked under padding and enter 0 in the top field. Under margin, uncheck the same for all box.
Enter 0 in the top, right and left fields. In the bottom field enter 1 and then choose M's as the unit of measurement. This just provides space underneath each field set to separate them out from each other. Now click okay. Next let's add a rule for the legend element, so click on the new CSS rule button at the bottom of the CSS styles panel. Choose tag as the selector type. Then in the Tag menu scroll down and select legend from the list of tags.
Leave define in styles.CSS selected and click okay. In the CSS rule definition dialogue box click on the Weight menu, choose bold. This will set the legend text apart from the label text, which it heads. Then click on the box category, uncheck the same for all box under margin. Enter 1 in the left field under margin and choose M's from the adjacent menu for its unit of measurement this simply moves the legend text away from the left side of the field set to make up for the padding that we earlier removed from the field set.
Now click okay. You can see that now the legend text is bold, but other than that our form hasn't changed too much in appearance. Let's start removing the list formatting. Click on the new CSS rule button at the bottom of the CSS styles panel, keep advanced selected for the selector type. In the selector field delete the default text that Dreamweaver has entered and type in field set OL. This will select all of the ordered lists within all of he field sets.
Leave define in styles.css selected then click okay. Click on the box category in the CSS rule definition dialogue box. Leave the same for all box checked under padding and enter 1 in the top field then choose M's from the adjacent menu for its unit of measurement. Also leave the same for all box under margin checked, but enter 0 in its box. You are just adjusting default list spacing. We also want to remove the numbering showing on the lists, so click on the list category in the dialogue box.
Click on the arrow of the Type menu and select none. This removes all list markers, in our case, numbers. Click okay. Let's scroll down the page in design view a bit to see how the page is looking up. The numbers are now gone from the list, but we still need to get rid of the bullet image. This was set earlier on our LI elements, so we'll need to override it with a new rule. Click on the new CSS rule button at the bottom of the CSS styles panel, keep advanced chosen as the selector type, delete the default text in the selector field, type field set LI.
Leave defined in styles.css selected and then click okay. Click on the background category first. Click inside the background image field and type none then click on the box category. Leave the same for all box checked under padding and type 0 in the top field. Under margin, uncheck the same for all box. Enter 0 in the top, right and left fields. In the bottom field type one and choose M's from the adjacent menu.
This bottom margin spaces out each label field pair from each other. Now click okay. Now the bullet images are gone and our form already looks a lot better. It would be nice though if we could line up each of these text fields in the first field set to make the form look a little cleaner. We'll continue adding to the CSS to improve the appearance of our form in the next movie.
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.