Create Tables with Snippets
Tables should be built using the Responsive Table or Data Table snippets provided in the CMS, rather than via the table icon in the editor toolbar. These snippets automatically create a single header row for your column headings and make it much easier to create accessible tables.
Example: The following table was built using the Responsive Table snippet.
| First Name | Last Name | Major |
|---|---|---|
| Baxter | Smith | Jazz Studies |
| Shay | Williams | Physics |
| Harper | Price | Economics |
Properties of an Accessible Table
- Each table header has a clear, helpful name in the header row that makes it much easier to understand the data.
- Do not delete the header row. If you delete this header row, you will have to add it back manually.
- The column headers are particularly helpful for screen reader users who can navigate a table cell-by-cell. Without table headers, you can cause the issue table cell missing context in Siteimprove.
- Each cell has data in it. If you have any missing data, opt for writing "Not applicable" instead of leaving the cell blank. Without at least one data cell assigned to each table header, you can cause the issue "no data cells assigned to table header" in Siteimprove.
- Links are only used in data cells. Because the header row in the CMS has a dark gray background, the garnet link text in the foreground of a table header would create a color contrast failure.
- Data is being presented; the table is not being used just to create a certain visual layout.
Complex Tables with Merged Cells
It can be very confusing for those using screen readers to understand tables with merged cells, so you should avoid merging rows or columns whenever possible.
If your table must use merged cells, you can create the table via the Table icon in the editor toolbar but you will need to manually add a header row to ensure the accessibility of your table. You will also need to test that your table is still usable on mobile devices.