Table
| Democrat | Republican | Green | Libertarian | Unaffiliated | |
|---|---|---|---|---|---|
| 16 to 25 years old | |||||
| Male | blue | red | green | black | silver |
| Female | blue | red | green | black | silver |
| Unspecified | blue | red | green | black | silver |
| 26 to 35 years old | |||||
| Male | blue | red | green | black | silver |
| Female | blue | red | green | black | silver |
| Unspecifed | blue | red | green | black | silver |
In general, tables should be used for display of data, rather than page layout. The table of made up data above uses CSS background-images, colors, and text-transformations for some styling. We try to move all presentation into the style sheets.
More significantly, the table incorporates attributes and tags that unambiguously relate the data in the body of the table to the table headers. The goal is to give blind or low-vision users reading the page with screen reader programs the ability to understand the data in the table as effectively as users who can see the table. Specifically, we use the scope, header, and id attributes to associate table headers with data in rows and columns. Additionally, we use the axis attribute in the table headers to provide extra information about the headers. We use the caption element to contextualize the table on the page—think of a caption as a heading for a table. And we use the table summary attribute to explain the layout of the table to screen readers users.
What does all of this extra coding sound like in a screen reader? Let's take an example. Using the JAWS screen reading program, when the user first hits the table, she hears, "Table one colon car color preferences by politics, age and gender. This table shows car color preferences by political affiliation, age group, and gender. The top row lists political affiliations. Inner rows specify the age group. The left hand header column lists gender. Data cells specify color preferences." As she moves through the table, when she gets to column two, row three, which indicates that young Democrat men prefer blue cars, she can hit the JAWS key strokes for getting contextual data from a table (Alt-Ctrl-Num Pad 5). She will hear, "Political affilation democrat. Age range 16 to 25 years old. Gender male. Blue". This should be enough contextual information to make the data clear.