Blind users can't see a table's visual organization, so it is important that your table maintains the proper HTML tags in order to correctly prompt screen readers. These include column and row headers, which are read as the accessible user navigates through the information in the table.
Using Table Snippets
If you are using the Table Snippets directly in the CMS Editor, you will not need to worry about this, as the column and row headers are automatically generated. However, if you are creating your own HTML, please see Tables in our Advanced Accessibility help section.
Tables should NOT be used to create a page layout unless is has been created with one of our Table Snippets.
More complex tables
If you have more complex tables, one of the easiest ways is outlined below. It starts with a clean HTML copy/paste from Excel.
Adding borders
Right-clicking on table and then using "Table Properties" allows you to turn on the borders and set the color.
- the Border value should be set to 1. It's an on/off sort situation.
- Once you've turned them on, they will show as a light-grey. If you want to make them a different color, use a hexadecimal color in the Border Color box (perhaps #555555, it's a medium grey).
- Also, set your Width to 100% (not just 100, as that'll be only 100 pixels wide). That's more accessible then a set width.
Row and column headers
If you can imagine the screen reader going through and reading across the row, it will read the column head each time as the reader goes across, and the same if you're moving down in a column, it will read the row heading before the value. That is extremely useful for someone using a screen reader (and for SEO purposes!)
You will need to both set the column and row headers and then their scope.
- Select all the column headers, right click on part of the selection and choose "Cell Properties" from the "Cell" selection.
- Set the cell type to "Header Cell".
- Set the scope to "Column".
Then you'll do the same for the row headers, with everything the same except you set scope to "Row."
Layout Tables
Don't do it but if you must you can force a screen reader to not announce there is a table by adding role="presentation" to the table.
Example:
<table role="presentation">
WARNING: Do not use role="presentation" on data tables, because that will remove all accessibility features from the data table.
Proper Markup
Don't use whitespace and the <pre> tag in order to render content that should otherwise be in a table.