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 an earlier movie we looked at a page that listed the values from a pie chart in text form. If you are following along with the exercise file the page is named budget-description.html and is located in the 0702 folder of the chapter seven exercise files. Currently the data is set in a list but it would be better to mark it up as a table. In design view place your cursor at the end of the text 2008 and press enter or return to start a new line, then go to the insert menu, choose table, the table dialog box opens.
We need 11 rows in our table so type 11 into the rows field and type two in the columns field, leave the table width blank and delete any value that is shown in the border thickness, cell padding, or cell spacing fields. These are presentational attributes on the table so we don't want to set them here but in CSS. Next in the dialog box are a series of four images labeled none, left, top and both. This is referring to where you and table cells to appear in the table you are about to insert.
We're going to put header cells at the top of the table so click the top image. Don't worry about the options listed under the accessibility heading for now. In this movie we are focusing on header cells so click OK. An empty table is added to the page scroll down so you can see all of it. Scroll back up we need to enter text for our header cells. Click the first cell of the first row and column, type area of budget.
Then click in the second cell of the first row and type percentage. You may notice that this text that we entered is bold, this is simply the default style of heading cells we will talk about how to change them later. In order to give us more room to see the table go down to the properties inspector and click the arrow next to its label to collapse the panel. Now we're simply going to drag the data out of the list and into our table. Highlight over transportation then click on the highlighted text and drag it into the second row for cell then highlight for over 20 percent and drag it into the second cell in the second row.
Repeat this with the police data in the third row. Delete the unused list items by highlighting over them and hitting backspace, continue to highlight and drag the data into the table and to delete list items as they become empty. All of the data is now in our table. Let's examine the code to see the pieces that make this a semantic table.
Click on the code button in the document toolbar. Scroll up to where the start of the table code begins on line 27, after the opening table tag we have a TR tag for table row. Inside the table row tag are two TH tags both of them have a scope attribute set to call. TH stands for table header, it's simply another type of cell just like TD, but it denotes that it is heading other data in the table. The scope attributes specifies what it is heading.
A value of COL means that it is heading the column and a value of row would mean it was heading all the cells in its same row. The other options for scope values are call group and row group, if you had a cell that was part of a row span or COL span. That is all there really is to creating data table relationships. The HTML required isn't a lot but it can make a big difference to screen reader users. Next we'll talk about some other table accessibilities features, captions and summaries.
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.