 |
|
|
|
|
|
|
|
|
| |
|
|
|
|
|
|
|
|
|
Living Examples - Tables |
(g) Row and column headers shall be identified for data tables.
(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
Tables are used quite often to display data on a web page, and it is a particularly popular and efficient way for an application to display multiple records
drawn from a database. Additionally, some developers still use tables as a page layout tool for aesthetics purposes. If necessary, check the page's source
code for the <table> tag.
Any table that is created for the express purpose of displaying a related grouping of information (usually horizontally) is considered a content table.
Tables used for aesthetic page layout are not considered content tables, and are exempt from the remainder of the tables checklist.
Typically, any list of data displayed in a table is positioned so that common categories within each record are aligned within columns (vertical groupings).
To accommodate those who use assistive technology, specific tags and attributes must also be used to define column headers.
Visually, column headers are usually marked by naming the category in the top row, and by highlighting that column header in some way (e.g. the column header
"Phone Numbers" could be displayed in bold text, or could be contained in a different colored cell).
A sighted user can easily determine which column a particular piece of information falls under because he/she can see the entire table at once, but those
who use assistive technology can only hear the table being read one cell at a time, in the left-to-right / top-to-bottom order it is displayed in. To accommodate
assistive technology, all column headers must be placed within <th> tags instead of <td> tags, and must also be assigned an id attribute.
<table>
<tr>
<th id="t1">Employee</th>
<th id="t2">Title</th>
<th id="t3">Cube</th>
<th id="t4">Extension</th>
</tr>
Next, add the headers attribute to all <td> tags whose cells contain record data. In the example below, the headers attribute of the <td> cell that contains
the name of Employee Joe Techie has been given the same value, "t1," as the "Employee" header cell that would appear directly above it; the headers attribute
of the <td> cell that contains the employee's title, "Sr. Programmer / Analyst," has been given the same value, "t2," as the "Title" header cell, etc.
<tr>
<td headers="t1">Joe Techie</td>
<td headers="t2">Sr. Programmer / Analyst</td>
<td headers="t3">346</td>
<td headers="t4">0879</td>
</tr>
<tr>
<td headers="t1">Bobby Bookworm</td>
<td headers="t2">Research Analyst</td>
<td headers="t3">353</td>
<td headers="t4">1688</td>
</tr>
</table>
Assistive technology might read the above table as: "Employee: Joe Techie; Title: Sr. Programmer / Analyst; Cube: 346; Extension: 0879; Employee: Bobby
Bookworm; Title: Research Analyst; Cube: 353; Extension: 1688."
NOTE: not all assistive technologies are currently able to accommodate id and header attributes, but the use of these attributes is an industry standard
that many assistive technology manufacturers will ultimately follow.
The W3C web site contains more information on using id and headers attributes for tables:
Information on using id and headers attributes for tables at the W3C web site
Some tables are structured to highlight the row record's first column. In such a case, the record's most identifiable piece of information, oftentimes a
database table's primary key, will be positioned as the row record (e.g. a listing of employees will often have the employee's name in the first column).
There are no special tags that can be used to indicate a row header, yet the id attribute should still be used in the same way it is used for column headers.
Additionally, sighted users can be accommodated by using the <strong> or <em> tag to highlight the content within the first column of each row.
NOTE: not all assistive technologies are currently able to accommodate id and header attributes, but the use of these attributes is an industry standard
that many assistive technology manufacturers will ultimately follow.
A table that has a main column header and several subordinate column headers underneath can be considered a complex table. A table that contains clearly
marked row headers with subordinate row headers underneath (e.g. a list of employee names, each with breakdowns of what projects they are working on) can
also be considered a complex table.
In the example below, both rows of column headers are enclosed with the <th> tags that contain id attributes.
<table>
<tr>
<th colspan=2> </th>
<th id="app" colspan=3>Approved by</th>
</tr>
<tr>
<th id="date">Date Submitted</th>
<th id="num">Number submitted</th>
<th id="p1">Person 1</th>
<th id="p2">Person 2</th>
<th id="p3">Person 3</th>
</tr>
Additionally, the cell containing the value 'October' in the example below has been marked with an id attribute value that represents the cell's value,
and contains a headers attribute that matches it with the Date Submitted column header in the previous example.
<tr>
<td id="oct" headers="date">October</td>
<td colspan=4> </td>
</tr>
<tr>
<td id="early" headers="date oct">1-15</td>
<td headers="oct early num">20</td>
<td headers="app p1 oct early">15</td>
<td headers="app p2 oct early">10</td>
<td headers="app p3 oct early">17</td>
</tr>
Assistive technology might read the above table as: "Date submitted: OctoberÙ1-15Ùnumber submitted: 20Ù approved by person one: 15; approved by person two:
10; approved by person three: 17Ù"
NOTE: not all assistive technologies are currently able to accommodate id and header attributes, but the use of these attributes is an industry standard
that many assistive technology manufacturers will ultimately follow.
The W3C web site has more information on coding complex tables:
Information on coding complex tables on the W3C web site.
|
|
|
|
|
|
|
|
|
 |
Curator:
Responsible NASA Official:
Last Updated: March 6, 2009
|
|
|
|
|
|
|
|
|
|
