Page Content
A table can be classified as a data table whenever you need to specify a row or column with header information about that row/column. If no informational header is needed, then it is a formatting table.
Simple Tables vs. Complex Tables
A simple table here means means that there is a maximum of one header row and one header column where a header column specifies the type of information in the column. In addition, there are no merged cells within a simple table. Below are examples of simple and complex tables. Because screen readers present information linearly (i.e. table cell by table cell), it is generally easier to parse tables when they are set up as simple tables.
Simple Table (More Accessible)
| Rank | Democratic | Republican |
|---|---|---|
| 1 | Barak Obama (1828.5) | John McCain (1575) |
| 2 | Hilary Rodham Clinton (1726.5) | Mike Huckabee (278) |
| 3 | John Edwards (4.5) | Mitt Romney (271) |
Complex Table (Less Accessible)
| Top Presidential Candidates 2008 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Democratic | Republican | ||||||||||
| Name | Del | Name | Del | Name | Del | Name | Del | Name | Del | Name | Del |
| Barak Obama | 1828.5 | Hilary Rodham Clinton | 1726.5 | John Edwards | 4.5 | John McCain | 1575 | Mike Huckabee | 278 | Mitt Romney | 271 |
Mark Table Headers
When sighted users focus on a table cell, they are able to visually determine which row and column the cell is in and what the data means. On the other hand, a screen reader can only read aloud each cell one by one from left to right top to bottom.
One way to help blind users process the information is to read out what row and column header the cell refers to. In the table below, the headers are the top row (color names) and the left column (language names).
Because the headers are properly tagged, the cell for noir is read as “black, French noir“. To learn the specifics of how to mark table headers in different software packages, please see the Related Links section.
Examples of Table Headers
| Color | Spanish | French | Irish | Welsh |
|---|---|---|---|---|
| Black | negro | noir | dubh | du |
| White | blanco | blanc | bán | gwyn |
| Red | rojo | rouge | ruadh | coch |
| Blue | azul | bleu | gorm | glas |
| Green | verde | vert | glas | gwyrdd |
| Yellow | amarillo | jaune | buí | melyn |
Note: Gray cells with bold, centered text are headers.
In Screen Readers
Because this table contains TH tags
with the proper SCOPE definitions, a screen reader user tabbing through the second row may hear something like thisL
black,
Spanish: negro
French: noir
Irish: dubh
Welsh: du
Don’t Merge Cells
Even with headers properly marked, if cells are merged, a screen reader could find it difficult to determine which cell when cells become merged. Therefore it is recommended not to merge cells.
Titles (Captions) for Tables
It is also good practice to provide titles for tables, even for sighted users. This is sometimes also called a “caption.”
Export Excel Data to HTML Tables
If you need to export Excel data to accessible HTML tables, then you may want to use the College of Agricultural Sciences Convert Excel tables to HTML. This tool allows you to cut and paste data from Excel, add captions and summary text then have it converted to HTML.
Even if you don’t know much about HTML, you can cut and paste this code into the HTML view of any online blog, content manager or an HTML editor such as ANGEL.
WCAG 2.0 Guidelines
The following WCAG 2.0 Guidelines can be addressed by using the techniques above.
WCAG 2.0 Guideline 2.4.6—”Headings and labels describe topic or purpose.”
WCAG 2.0 Guideline 1.3.1 – “Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.”