Proper use of tables
Accessibility
Tables can be used to display the kind of information that is appropriate, and that kind of data only. It has to be created in a specific manner to optimize its accessibility.
Reason
Tables can be a difficult feature to navigate on a web page, especially if it does not contain a table header row, or if it is used to lay out content instead of its actual purpose.
Best practice
Here is an example of a properly constructed table with a header row, containing data appropriate to a table.
| Course | Department |
|---|---|
| Math 1001 | Math and Statistics |
| Statistics 1002 | Math and Statistics |
| Environmental Studies 2002 | Geography and Environmental Studies |
| History of Math 4004 | History |
Example of less accessible practices
Here are some examples of a bad table.
In this example, we find a table which has no header. It gives no context to someone using a screen reader:
(You will notice that this is an image of a table – that is because the table function in cuTheme does not allow for a table to be created without a table header row. Alt text on the image describes the problem with this table.)
This table would not allow easy access to the tabular information.
The second table (also an image) shows a table being used to layout page content using a table:
Not only does this add confusion, many users will skip tables with no header row and so any useful/crucial information will be missed. Besides why would you want to lay information out in this way when it could look like this?
Dio
Cat ipsum dolor sit amet, flee in terror at cucumber discovered on floor but cats are fats i like to pets them they like to meow back. Grab pompom in mouth
Ruka
Fluffness ahh cucumber! cats go for world domination scoot butt on the rug. Scream for no reason at 4 am kitty kitty pussy cat doll or destroy couch.
Additional benefits
- Usability: Table headers bring additional visual cue, both drawing the user to the table, and quickly orienting them to what the data includes.
- SEO: Making your content more organized (which tables help with) is something which search engines value, especially when the tables contain relevant data and are properly formatted with clear headers and labels. More properly formed HTML in general (which includes table headings) also helps with SEO
- Marketing: Thanks to the improvement in usability (see above) the University becomes more appealing. Especially with items like course listings, presenting data in an easy to access format, like a proper table, helps people understand requirements and makes their Carleton experience much better.
What WCAG says
From WAVE: The <th> element helps associate table cells with the correct row/column headers. A <th> that contains no text may result in cells with missing or incorrect header information.
(Be sure to learn more about errors and alerts.)
From WCAG:
“Tables without structural markup to differentiate and properly link between header and data cells, create accessibility barriers. Relying on visual cues alone is not sufficient to create an accessible table.”