Poor Table Practices

Purpose: Compare and Contrast

• Tables should be used to compare and contrast information.
• Tables should not be used for layout.
• Merging Cells is ok as long as the cells are properly marked in Digital Commons. A screen reader must be able to properly convey the relationships between the data to the user.
• Example: This table compares apples to oranges. Both apples and oranges are fruits, so it is appropriate that they are nested under the merged cell, fruits. The merged cell is also identified as a heading.

Fruits	Apples
	Oranges

Exhibit A

• Problem 1: HTML pasted into the text editor. Why is this a problem? When you copy and paste content from elsewhere, whether a website or a Word document, it can bring along hidden code with it. That code then impacts your website's usability and accessibility. EditoriA11y is flagging every row in this table because there is no heading. There is no heading because the table is not being used appropriately to compare data.
• Problem 2: Table is being used for layout purposes. Why is this a problem? Tables should be used for data that website visitors will consume, not for layout.
• How to Fix It: A table is not necessary in this context because it was being used for layout only. Create the content fresh on Digital Commons, don't paste information copied from a report. Save images and upload them into the Media Library with Alt Text included or a caption or description on the page for complex graphics, such as this map. Add images, text, anchors and "back to the top" links outside a table. 

Landslide Events Hurricanes Frances and Ivan September 2004

Exhibit B

• Problem 1: Table Lacks a Heading. Why is this a problem? Screen readers read table headings to help the visually impaired to understand how the content within the table is related. Without headings, the content is a table full of random, seemingly disconnected information.
• How to Fix It:
  • Select the table.
  • Select the Column or Row that describes what is being compared.
  • Toggle the Header switch for the Column or Row as is appropriate.

Exhibit C

• Problem 1: Not using the Data Table Content Type for large data sets Why is this a problem? This example uses a Tabs/Accordion Component to break up data annually. While not necessarily a bad practice, each Tab contains a table for that year's monthly reports. The table is being used to layout content, not to compare the content. This table is being used inappropriately which is why there are no headings.
• How to Fix It: The Data Table Content Type allows users to filter and search by the column headings. If a user needs only the reports from 2023, it's easy to find. Use the Data Table Content Type for large data sets. OR: If you and your users like the Tabs and want to keep the Tabs/Accordion Components, don't use a table inside. Create a simple bulleted list instead.