Accessible HTML <table>s | Accessibility
Standards Based Development
| Class of Service | Appetizer | Salad | Wine | Entree | Dessert |
|---|---|---|---|---|---|
| Economy | Peanuts | None | Complimentary Soft Drinks, Liquor for Purchase | Ham and Cheese Sandwich | Packaged Cookies |
| Business | Shrimp Cocktail | Mixed Greens | Oceana Label Chardonnay or Merlot | Chicken Satay or Beef Tips | New York Style Cheesecake |
| First | Beluga Caviar | Caesar, Salad Nicoise, or Antipasto | Vive Clicquot Vintage Reserve 1990 | Salmon Basil Cream, Raspberry Balsamic Chicken, Boeuf En Daube | Assorted Belgian Truffles |
| Meals | Hotels | Transport | subtotals | |
|---|---|---|---|---|
| San Jose | ||||
| 25-Aug-97 | 37.74 | 112.00 | 45.00 | |
| 26-Aug-97 | 27.28 | 112.00 | 45.00 | |
| subtotals | 65.02 | 224.00 | 90.00 | 379.02 |
| Seattle | ||||
| 27-Aug-97 | 96.25 | 109.00 | 36.00 | |
| 28-Aug-97 | 35.00 | 109.00 | 36.00 | |
| subtotals | 131.25 | 218.00 | 72.00 | 421.25 |
| Totals | 196.27 | 442.00 | 162.00 | 800.27 |
The Oceana Airlines Dinner Service example above utilizes the summary="" attribute to contain a summary of the way in which the table is layed out - not a summary of the results. summary="" should provide an orientation for a user who will be listening to the table. In other words, when a user is using a screen reader, they will have an overview of the table layout before they start to read it, provided via summary=""
Identifying Table Rows and Table Column Information
The example below shows how to associate data cells (td) with their corresponding headers by means of the headers attribute. The headers attribute specifies a list of header cells (row/column labels) associated with the current data cell. This requires each header cell to have an id attribute.
| Name | Cups | Type of Coffee | Sugar? |
|---|---|---|---|
| T. Sexton | 10 | Espresso | No |
| J. Dinnen | 5 | Decaf | Yes |
The next example associates the same header (th) and data (td) cells as before, but this time uses the scope="" attribute rather than headers="".
scope="" must have one of the following values: row, col, rowgroup, or colgroup. scope="" specifies the set of data cells to be associated with the current header cell. This method is particularly useful for simple tables.
Note: the spoken rendering of this table would be identical to that of the previous example. A choice between the headers="" and scope="" attributes is dependent on the complexity of the table. It does not affect the output so long as the relationships between header and data cells are made clear in the markup.
| Name | Cups | Type of Coffee | Sugar? |
|---|---|---|---|
| 10 | Espresso | No | |
| 5 | Decaf | Yes |
Creating Categories via axis="" Attribute
The following example shows how to create categories within a table using the axis attribute
| Meals | Hotels | Transport | subtotals | |
|---|---|---|---|---|
| San Jose | ||||
| 25-Aug-97 | 37.74 | 112.00 | 45.00 | |
| 26-Aug-97 | 27.28 | 112.00 | 45.00 | |
| subtotals | 65.02 | 224.00 | 90.00 | 379.02 |
| Seattle | ||||
| 27-Aug-97 | 96.25 | 109.00 | 36.00 | |
| 28-Aug-97 | 35.00 | 109.00 | 36.00 | subtotals | 131.25 | 218.00 | 72.00 | 421.25 |
| Totals | 196.27 | 442.00 | 162.00 | 800.27 |
The example ablove lists travel expenses at two locations: San Jose and Seattle, by date, and category (meals, hotels, and transport). The image shown below displays how a visual user agent might render it. Description of Travel Table.
longdesc="" attribute demo?References and Resources
- Accessible Tables
- assistivetech.net - The National Public Website on Assistive Technology
- catea - Center for Assistive Technology and Environmental Access | Georgia Tech
- http://blog.catea.gatech.edu/
- http://blog.catea.gatech.edu/?feed=rss2
- Defining a Key Cell - html Tables Techniques - Web Experience Toolkit (wet)