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.
>> Earlier we talked about why we shouldn't use tables for layout, but instead use a layout created with DIVs and controlled by CSS. However, that doesn't mean that we should never use tables at all. They're the appropriate semantic element to use anytime we have data that we need to present. If we didn't use tables to markup data, we would actually be decreasing the accessibility of our pages. Data that has a two way relationship can be considered tabular data. This means that if you place the data in a grid, each block would be related to the blocks above and below it, as well as to each side of it.
By using this proper structure of a table, you can make these relationships between pieces of information clear, not just to sighted users, but to screen reader users as well. If you're following along with the exercise files, we have residents.html open in Dreamweaver. It's located in the 07_01 folder of the chapter seven exercise files. This is the same resident's page we were working on before. But if we scroll down the page in design view, you'll see that a table has now been added to the bottom of the page.
In Dreamweaver, the table cells are denoted with a dotted line. This data is perfect for a table because it has the two way relationship that we talked about. All of the number values are related to each other. By themselves, they could be considered a list of rainfall amounts. The items in the first row of the table would also make up a list by themselves of months, so the pieces of data are related across the rows. But there's also relationships up and down between the month and the number. So even with this very simple example, you can see how a table connects related pieces of information.
If we instead used a DIV for each of these table cells and then floated each DIV to the left in order to make rows like we see here, we might get the same visual appearance, but we wouldn't have the connections in HTML that a table structure gives us. When the table is built properly in HTML, a screen reader can read off a heading cell before the data that it labels. Sighted users have the ability to track across a row or a column in the table to line up the values and see visually what pieces of information are related to each other.
But a screen reader user does not have this ability unless that information is in the HTML so that it can be announced. Let's quickly look at the code for this table to get a sense of how these connections are made. Click inside the January cell then click on the code button on the document tool bar. You can see that we are not using standard TD tags here, but instead TH tags. We also have a scope attribute with a value of call. There's also a caption element inside the table.
If we scroll down to see the second row of the table, we'll see the more familiar TD tags. So the changes that you need to make to your HTML are not major, but in the next movie we'll talk about what each of these pieces means and how you can add them to your tables.
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.