(g & h) DATA TABLES
Identify column and row table headers.
|2 pm||feed cat||brush cat||breakfast|
The benefit of such a data table is that it provides information in a visually organized format such that one can quickly identify the day of the appointment and time in a simple and easy manner. There are several methods to make data tables more accessible using specific HTML attributes.
Using the Scope Method:
Using the "scope" attribute is one of the most effective ways of making HTML compliant with these requirements. It is also the simplest method to implement. The scope attribute also works with some (but not all) assistive technology in tables that use "colspan" or "rowspan" attributes in table header or data cells.
The first row of each table should include column headings. Typically, these column headings are inserted in <TH> tags, although <TD> tags can also be used. These tags at the top of each column should include the following attribute:
By doing this simple step, the text in that cell becomes associated with every cell in that column. Unlike using other approaches (notably "id" and "headers") there is no need to include special attributes in each cell of the table. Similarly, the first column of every table should include information identifying information about each row in the table. Each of the cells in that first column are created by either <TH> or <TD> tags. Include the following attribute in these cells:
By simply adding this attribute, the text in that cell becomes associated with every cell in that row. While this technique dramatically improves the usability of a web page, using the scope attribute does not appear to interfere in any way with browsers that do not support the attribute.
<table border="1" cellpadding="4" cellspacing="4" >
<th scope="col" >Spring</th> <th scope="col" >Summer</th>
<th scope="col">Autumn</th> <th scope="col" >Winter</th> </tr>
<tr> <td scope="row" >Betty</td> <td>9-5</td> <td>10-6</td> <td>8-4</td><td>7-3</td>
<tr> <td scope="row" >Wilma</td> <td>10-6</td> <td>10-6</td> <td>9-5</td> <td>9-5</td>
<tr> <td scope="row" >Fred</td> <td>10-6</td> <td>10-6</td> <td>10-6</td> <td>10-6</td>
This table would be displayed as follows:
Spring Summer Autumn Winter Betty 9-5 10-6 8-4 7- 3 Wilma 10-6 10-6 9-5 9- 5 Fred 10-6 10-6 10-6 10- 6
Using the "ID" and "Headers" attribute:
The "id" and "headers" attributes require that every data cell in a table include special attributes for association. Although its usefulness for accessibility may have been diminished as browsers provide support for the "scope" attribute, the "id" and "headers" attributes are still very useful and provide a practical means of providing access in smaller tables.
The following table is much more complicated than the previous example and demonstrates the use of the "id" and "headers" attributes. Both methods provide a means of complying with the requirements for data tables in web pages. The table in this example includes the work schedules for two employees. Each employee has a morning and afternoon work schedule that varies depending on whether the employee is working in the winter or summer months. The "summer" and "winter" columns each span two columns labeled "morning" and "afternoon." Therefore, in each cell identifying the work schedule, the user needs to be told the employee's name (Fred or Wilma), the season (Summer or Winter), and the shift (morning or afternoon).
<th colspan="2" id="winter" >Winter</th>
<th colspan="2" id="summer" >Summer</th>
<th id="am1" >Morning</th>
<th id="pm1" >Afternoon</th>
<th id="am2" >Morning</th>
<th id="pm2" >Afternoon</th>
<td id="wilma" >Wilma</td>
<td headers="wilma am1 winter" >9-11</td>
<td headers="wilma pm1 winter" >12-6</td>
<td headers="wilma am2 summer" >7-11</td>
<td headers="wilma pm2 summer" >12-3</td>
<td id="fred" >Fred</td>
<td headers="Fred am1 winter" >10-11</td>
<td headers="Fred pm1 winter" >12-6</td>
<td headers="Fred am2 summer" >9-11</td>
<td headers="Fred pm2 summer" >12-5</td>
This table would be displayed as follows:
Winter Summer Morning Afternoon Morning Afternoon Wilma 9-11 12-6 7-11 12-3 Fred 10-11 12-6 9-11 12-5
Provide a text summary of all data tables.
Not all assistive technology products will interpret data tables using these options in this same manner, but data tables encoded in an accessible format will provide a greater opportunity for those needing assistive technology to gain access to on-line information. Using the <summary> tag can also assist screen-reader users in understanding the layout and content presented in a table. It is important to note that not all assistive technology developers support this attribute at the current time.
Remember the following:
- Design the table using either the scope or id and header attributes.
- Within the <table> tag insert the attribute summary= "descriptive table summary goes here". It is recommended to place this information as close to the start of the table as possible.
- A good description of the table will include a brief identification of the content displayed in the row, the column, and the cell.
- If possible, check the table and summary using screen-reader technology.
<table summary="Table of Betty, Wilma, and Fred's schedule during each of the four seasons.">
An additional resource for making data table accessible:
- Web Aim Tutorial: http://www.webaim.org/techniques/tables/
- Adobe Dreamweaver has a several built in accessibility helpers, including one that will help you make a table accessible as you build it: http://www.adobe.com/resources/accessibility/dw8/tables.html