More Info:
HTML tables come in two forms. Data tables and positioning tables. We try not to use table to position text on modern symantic web pages. Instead we now use CSS to position text on the screen. However, we must always use tables to display data. A spread sheet that provide a bus schedule , a train schedule, or a list of stocks and their Level 1 pricing information are all good examples of data tables and need special markup to help screen reader users to navigate them.
Coding:
- Best Practices:
- Using the HTML ABBR and ACRONYM Tags to Increase Accessibility
- Using the HTML TABLE Tag to Create Accessible Tables
Guidelines
- Data Tables MUST use TH tags to assist screen readers. On the other hand, Layout Tables MUST NOT use TH Tags.
- For data tables, identify row and column headers.
- For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.
- Identify structural groups of rows (THEAD for repeated table headers, TFOOT for repeated table footers, and TBODY for other groups of rows) and groups of columns (COLGROUP and COL).
- TH element content must be less than 20 characters (English) if TH element does not contain ABBR attribute
- ABBR attribute value on TH element must be less than 20 characters (English).
- TABLE element must contain a CAPTION element if it's a data table.
- TABLE element, SUMMARY attribute value must be null if it's a layout TABLE.
- TABLE element must contain a SUMMARY attribute if it's a data TABLE.
- TABLE element, SUMMARY attribute value must be greater than 10 characters (English) if it's a data TABLE.
Example 1:
<TABLE border="1" summary="This table charts the number of cups of coffee consumed by each senator, the type of coffee (decaf or regular), and whether taken with sugar."> <CAPTION>Cups of coffee consumed by each senator</CAPTION> <TR> <TH id="header1">Name</TH> <TH id="header2">Cups</TH> <TH id="header3" abbr="Type">Type of Coffee</TH> <TH id="header4">Sugar?</TH> <TR> <TD headers="header1">T. Sexton</TD> <TD headers="header2">10</TD> <TD headers="header3">Espresso</TD> <TD headers="header4">No</TD> <TR> <TD headers="header1">J. Dinnen</TD> <TD headers="header2">5</TD> <TD headers="header3">Decaf</TD> <TD headers="header4">Yes</TD>
Example 2:
<h1>Bus Schedule: Congress Street</h1>
<table id="stepFour" summary="This table displays the bus schedule for the Congress Streeet bus route. The first column of the table is the day of the week. The other columns are the time in minutes after the hour. The first row is a list of destinations. The other rows contain the days, and times the bus will arrive at that location.">
<caption>Schedule for the Congress Street Bus Route.<br />This bus runs hourly from 6am - 2am M -F and 8am - 12am Sat. and Sun..</caption>
<thead>
<tr>
<th>Day</th>
<th>Congress and Grant</th>
<th>Congress and Mountain</th>
<th>Congress and Broadway</th>
<th>Congress and Speedway</th>
<th>Congress and 22nd</th>
</tr>
</thead>
<tbody>
<tr>
<th><abbr title="Monday">M</abbr> - <abbr title="Friday">F</abbr></th>
<td>on the hour</td>
<td>15 after</td>
<td>30 after</td>
<td>40 after</td>
<td>55 after</td>
</tr>
<tr>
<th><abbr title="Saturday">Sat.</abbr> and <abbr title="Sunday">Sun.</abbr></th>
<td>on the hour</td>
<td>20</td>
<td>35 after</td>
<td>45 after</td>
<td>55 after</td>
</tr>
</thead>
</table>
Example 3:
<table border="1" summary="List of your received calls with columns for voicemail message, date and time, caller name, caller phone number, a link to add or edit their address book entry, what action was taken on the call, and a link to block future calls from this number."> <caption>A list of all of your recieved calls.</caption <thead> <tr> <th scope="col" id="rc-vmail">a href="#" title="sort by Voicemail">Voicemail</a></th> <th scope="col" id="rc-date">a href="#" title="sort by Date/Time">Date/Time</a></th> <th scope="col" id="rc-name">a href="#" title="sort by Caller Name">Name</a></th> <th scope="col" id="rc-phone">a href="#" title="sort by Phone Number">Phone Number</a></th> <th scope="col" id="rc-action">a href="#" title="sort by Result">Result</a></th> <th scope="col" id="rc-block">a href="#" title="sort by Block">Block</a></th> </tr> </thead> <tr> <td headers="rc=vmail"></td> <td headers="rc=date">11/18/04 10:39 AM</td> <td headers="rc=name">SurfSamSurf</td> <td headers="rc=phone">703-555-1234</td> <td headers="rc=action">Answered on main line</td> <td headers="rc=block">Block</td> </tr> </table>
Testing:
Using AIS to Test for Tables
Notice the "Complex Data Table" test option on the "Structure" menu.
Toolbar Test Results
Notice the results of this is a pop up window saying there were no TH tags found. If the page contains any table used for data, it should contain at a minimum the TH tag.
Toolbar Test Results – Tables use for Positioning
Notice this results page is full of red errors. The tool assumes all tables are used for data. Since this page is actually used for positioning, the tool does not reflect a accurate test.
Toolbar Test Results: Table used for Data
Notice there are no red errors on this page. TH tags are present and so are header attributes inside the TD tags.
Testing with Jaws:
- Once in a table, use the Jaws table navigation keys.
- Next Cell in Table = ALT+CTRL+RIGHT ARROW
- Previous Cell in Table = ALT+ CTRL+LEFT ARROW
- Move to first Cell = ALT+CTRL+HOME
- Move to Last Cell = ALT+CTRL+END
- Next Row = WINDOWS KEY+DOWN ARROW
- Prior Row = WINDOWS KEY+UP ARROW
- Jaws should read the table headings along with the data in each cell.
SEO:
No known Search Engine Optimization issues.
W3C:
- HTML Techniques for Web Content Accessibility Guidelines 1.0
- Acronyms and abbreviations
- Tables of data
- Tables for layout
- Linearizing tables
- Backward compatibility issues for tables
- Tables of data
- CSS Techniques for Web Content Accessibility Guidelines 1.0
- Layout, positioning, layering, and alignment