In this section we'll discuss what it takes to make tabular data accessible. In Web pages 
there are two common types of tables. From an accessibility standpoint what we are concerned 
about are tables that contain data. Here it is, is an example of what a data table typically 
looks like within a Web page. There are four steps to making a data table accessible. Step one 
requires us to remove any non-tabular data from the table and to make sure that we have column 
or row headings defined for each of our columns or rows within our table. So, in our Mouse 
College soccer program we do have a table here under our upcoming game section. What kind 
of data do we have in this table? Our first column typically contains the dates for 
upcoming games while the second column contains their locations. However, our table does contain 
data that is neither a date or location specifically, this information in the first row of 
the table which says, home of the Pack Rats. It needs to be removed from this data table. So 
I'm going to simply add an extra paragraph of text after upcoming games, highlight my text in this 
table and literally drag and drop that text into the new location outside of the table. 
Likewise, in my table we have some text that says away games are listed with a star. This is 
neither a location nor a date so this information also needs to be removed. And again, you can 
copy or cut and paste or drag and drop to remove the information from the table. Once 
that data has been removed, let's split this merged cell into a set of two cells by 
putting our cursor in that cell and clicking the split cell button on the properties 
inspector. This will allow us to split that single cell into two columns. Now let's add column 
headings for each of our columns. So our first column contains date information. Our 
second column contains location. That completes step one in our table repair process. In step 
two we need to make sure that our column and row headings, if we have them, are marked using 
the correct table heading tags. On screen you can see the example within our HTML code 
would show in this manner. In Dreamweaver we have a shortcut for applying this HTML code. Put 
your cursor in a cell that is a table header and click on the header check box on the 
properties inspector. Repeat that for the location heading. Most simple tables will simply 
require column headings as in this example. In step three, we need to make sure that the two 
items that we have marked as headings have the scope attribute specified for their 
heading tags. In the examples shown on this slide, you can see that the HTML code specifies a
scope attribute equal to the word col in double quotes for a column heading and for a row 
heading the scope attribute would be set to row in quotes. Unfortunately in Dreamweaver  
there is not shortcut for applying column or row heading scope to headings. You actually 
need to go in and edit the HTML code. Fortunately, it's not too difficult. Put your cursor in 
the date column heading, right click with your mouse on the TH tag at the bottom on your 
editing window and chose quick tag editor. Type a space, the word scope equals and in quotes, 
col. When you're finished, just click anywhere else on your screen. Repeat this process for
the location table header. Again, right click, chose quick tag editor, type in space scope  
equals col and then click anywhere else on the screen to complete the change. Don't 
forget to save your changes. The fourth and final step to making a table accessible is to ensure  
that you add a table summary using the summary attribute. In the example shown in this slide, 
this is what the table tag should look like within your HTML code. For a data table it 
should have an attribute called summary equals and then in double quotes, a short text 
description of the kind of data that is contained in the table. Think of this table summary as 
the equivalent of the short text descriptions that we write for images. In Dreamweaver 
unfortunately there again is no shortcut for adding a table summary to a table. So to 
accomplish this we're going to right click on the table tag. In our editing window chose quick 
tag editor. Before the closing bracket for our tag, we're going to type a space, the word 
summary equals double quote and then a short text description for our table. In this case our 
table lists dates and locations of upcoming games. When the table summary is complete, just 
click anywhere outside of the table to finish. So to review, we had four steps that were 
required to make our table accessible. We had to remove non-table data and add column or 
row headings. We had to make sure those headings were marked as headings using the header 
check box. We had to manually go into the HTML and add the scope for each of our table headings. 
And we had to manually go into the HTML and add a table summary to our table tag. In the event 
that you encounter a table that is complicated or complex as the one that is shown here, which 
contains more than two levels of logical structure there is an additional technique that may be 
required to make that table accessible. Complex tables are difficult to navigate for users 
of assistive technology and a separate technique must be used to make these kinds of tables 
accessible. If you do require assistance with making complex tables like this accessible, 
please contract the Web Services office via the IT Help Desk and Web Services staff member will 
be happy to work with you to instruct you on the proper way to incorporate accessibility 
into a complex table.