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.
>> In the last movie we began marking up a complex table with better HTML to describe what each data cell was headed by. But since each of the data cells in the table are headed by three different cells, we really need to use the ID and headers attributes to further enhances its accessibility. If you're following along with the exercise files, open the page government.html in Dreamweaver. That's located in the 07_06 folder of the chapter seven exercise files. Click on the code button in the document tool bar.
Scroll down in code view until you get to the table that we're currently working on. It starts on line 86. Place your cursor inside your first TH tag with the text fiscal year inside of it. You can place your cursor immediately before the scope attribute. What we're going to do is give each table header cell an ID then in each of the data cells, we'll specify what ID's head that cell. So with your cursor in the first TH cell, type ID="year". You can give the ID attributes any value that you want, but you probably want to give them meaningful names so that it will be easier to identify the correct ID's for each of the data cells, but also make them short names because you're going to have to type them many times into the headers attributes of those data cells.
They don't have to be listed before the scope attribute of the TH cells, but it's a good idea to put them first because when you're adding the headers attributes to the data cells, it makes scrolling back up the table to glance at what the ID's you set earlier were easier since they'll all be in a row. Now place your cursor in the second TH cell and type ID="budget" and a space. In the third TH cell type ID="dollars" and a space.
And in the fourth header cell of the first row, type ID="percent" and a space. The next row also starts off with a TH cell. Click inside that TH cell immediately before the rowspan attribute and type ID="2006" and a space. Since this cell is a header cell, it needs an ID attribute set.
But it, too, has its own header, the fiscal year cell that we labeled above. So to identify that relationship we're going to use the headers attribute. Type in headers="year" and a space. This is telling the browser or other devices that the header for this particular year is the fiscal year cell with the ID of year. Now move on to the second TH cell in the second row. Click before the scope attribute and type ID="ad06" and a space.
This cell is also being headed by other cells, so it needs the headers attribute too. Type in headers="budget 2006" and a space. We've used two separate values separated by a space within the headers attribute because this cell is headed by two separate cells, the budget cell in the first row and the 2006 - 2007 cell in the same row.
You can include as many values as you need to inside of the headers attribute, each one separate by a space. The order that you write them is not important. Now let's move on to a regular TD cell. Click inside the first TD cell immediately before its closing bracket. Enter a space then headers="dollars 2006 ad05". Here we've specified that three cells are headers for this cell, the dollars cell, the 2006 cell and the ad06 cell.
So you can see that this provides a lot more detail of explicit information about how this cell is being headed than the scope attribute provides. Let's apply the headers attribute one more time to the final cell in the second row of our table. Click inside the opening TD tag, before its closing bracket and type space headers="percent 2006 ad06". This cell shares two of the same headers cells as the one above it, but its first header cell, percent, is different from the one above it.
Again, this is just providing very detailed explicit information about the relationships in the table. You can continue adding the ID and headers attributes to all subsequent rows until every cell is linked to the others that label it. Remember, you only have to use these attributes when you have a complicated table that you can't remake into a simpler version where scope can't directly tie each cell to its single row header and single column header. The HTML table elements and attributes that we've discussed in this chapter can turn what may have been an incomprehensible heap of words and numbers to a screen reader user into meaningful data that many devices and people can correctly interpret.
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.