Placing a table on your site should only be done for displaying tabular data. Tables must not be used for any other reason such as page layout. You should also try to avoid complex tables with nested tables or with header cells that span multiple rows or columns, as screen reader users can encounter problems accessing these tables.
When using a table, there are a few additions each table should have to be considered an accessible table. When adding a table using the Rich Text Editor, along with setting the desired column and row numbers, it will also ask if the first row, column, or both should be treated as a header. This is very important for a screen reader in order to know how to read the table to the user. Without headers, the screen reader will read the full contents of the table, from the upper left cell to the lower right cell without giving any context as to what is being displayed.
Other fields provided while creating a table are the Caption and Summary fields. The Caption should title the table and will appear above the table when it is displayed. Something along the lines of, "Student Expenses Per Semester," is an example of a Caption.
The Summary, contrary to what it sounds like, does not describe the table. Instead, it is used to tell the user how to properly read the physical table. The Summary is only available to screen readers; sighted users will never see the Summary. A Summary, for our tuition table example, would be, "The first row separates the columns by semester name. The first column displays the different expenses a student may encounter."
Student Expenses Per Semester (example only)| Expense | Fall | Winter | Summer |
|---|
| Tuition | $5,872 | $5,872 | $2,500 |
|---|
| Room | $3,296 | $3,296 | $800 |
|---|
| Board | $2,838 | $2,838 | $1,432 |
|---|
| Book and Supplies | $515 | $515 | $112 |
|---|
