Proper Tables
WHY? Proper table headings and formatting makes a table easy to read and understand.
For visually impaired users: Proper HTML <th> tags are used by screen readers to identify the headings in a table to make is easier for visually impaired users to know how that data in the table are related to the columns in the table.
For sighted users: Table headings helps to distinguish the table’s rows and columns from the actually data contained in the table cells. They are usually formatted differently to distinguish them from regular data cells. (i.e., bold and centered in the table cells or against a color background with contrasting text fields). JAWS will announce the number of columns and rows in a table (i.e., "table with 4 columns and 7 rows") and the end of the table (i.e., "table end").
Mitigation Technique: Add table headings
HOW? To add table headings to a table, select the complete header row or header column and then click on the TH checkbox in the Properties panel.
| Jan | Feb | March | April |
|---|---|---|---|
| 12 | 44 | 78 | 78 |
| 45 | 45 | 89 | 98 |
| 78 | 78 | 89 | 78 |
TIP: It is also best practice to create alternating row color so that the table can be easily read by a visual impaired or sighted user.
Mitigation Technique: Structure tables for easy navigation
If tables are used, keep them as simple as possible so that they are easy to navigate.
Avoid, when possible:
- Nested tables
- Merge or split cells
NOTE: If you do have to merge or split cells, make sure the cell borders are line up with cell around them. You can merge or split cells by selecting the cells you need and then right-clicking to select either merge or split from the menu. - Avoid using a blank row to create space between data. Instead, drag the bottom of the row to increase space if needed. To delete a row, select it and the right-click and select Delete row from the menu.
- CAUTION: Complex table may need the "scope" and "id" attributes in order for screen readers to read them correctly.
TIP: To check the reading order of a table, use the TAB key to tab from left to right and top to bottom.