HTML Tables & Accessibility

Tables are not the preferred method for organizing information as they are more difficult to make accessible. Even when they are technically accessible (e.g., can be read correctly by a screen reader or other alternative technology), you must ask yourself if a visitor to your site is able to make complete sense of the information you want to share with them.  We recommend testing any tables to ensure that when they are read out, that someone would be able to follow and remember what each piece of data correlates to in terms of headers, rows, and columns – you can do that with Silktide’s free browser extension.

Where possible, consider alternative methods of sharing your data, such as ordered or unordered lists (example of this from CWIT’s website).

Tables should never be used to organize or arrange photos, blocks of text, or anything other than a dataset that can be clearly labeled with headers, a title, and captions. To achieve any of those options, please use the “Columns” feature available in the Sites Visual editor under “Insert Elements.”

To learn more about how to achieve accessibility with tables broadly, check out these external resources:

• W3C’s Tables Tutorial
• Beginner’s Guide to Accessible Tables by Whitney Lewis
• Mozilla’s HTML Table Accessibility

Example 1: Alternating Row Background Table

Example 2: Table with No Alternating Row BGs and Highlighted Column

Example 3: Alternating Row Background Table with Highlighted Row