Tables and Charts
Organize and visualize data accessibly.
Tables and charts are powerful tools for organizing, presenting, and visualizing information effectively. When designed with accessibility in mind, they help users understand data more clearly, especially for those using assistive technology.
Tables
While tables can help effectively organize and structure information, they can also be a navigational nightmare if not designed thoughtfully—especially for users of assistive technology.
Some key characteristics of accessible tables include:
-
Used for Data Only: Tables should organize and present data, not control page layout or visual design.
-
Built in the Original Document: Create tables using built-in table tools rather than images or drawn objects.
-
Simple Structure: Avoid merged, split, nested, or blank cells to help maintain a logical reading order and predictable navigation experience.
-
Header Rows and First Columns: Use structurally defined header rows and first columns to help users understand how data is organized within the table.
-
Alternative Text: Provide alternative text summarizing the purpose and overall content of the table.
-
Table Titles and Captions: Include a descriptive table title and brief caption to provide users with context before reading the table content.
-
Sufficient Color Contrast: Ensure text, borders, and table elements meet WCAG 2.1 AA color contrast guidelines.
-
Logical Navigation: Organize tables so users can navigate rows and columns predictably using a keyboard or assistive technology.
For full guidance on creating accessible tables, visit the Create Accessible Tables Knowledge Base article.
Charts
Charts can effectively visualize patterns, trends, and relationships within data. However, because charts are visual by nature, important information may not be communicated clearly to all users without additional accessibility support.
Some key characteristics of accessible charts include:
-
Clearly Labeled Elements: Include descriptive chart titles, axis labels, legends, and data labels to help users understand the chart’s content and purpose.
-
Flattened Charts: Flatten charts into images so they can be accessed more reliably by screen readers and assistive technologies.
-
Placed In Line with Text: Position charts within the document’s reading order so they are encountered logically during navigation.
-
Alternative Text and Long Descriptions: Provide alternative text for all charts and long descriptions for more complex visuals or datasets.
-
Sufficient Color Contrast: Ensure chart text, lines, bars, and other visual elements meet WCAG 2.1 AA color contrast guidelines.
-
Not Reliant on Color Alone: Use patterns, labels, or additional visual indicators so meaning is not communicated through color alone. Users who are color blind, have low vision, or rely on screen readers may not perceive color differences and may otherwise miss important information.
-
Descriptive Captions: Include a caption that identifies the chart and briefly explains the information being presented.
For full guidance on creating accessible charts, visit the Create Accessible Charts Knowledge Base article.
Tables vs. Charts
Tables and charts serve different purposes.
- Use a table when users need to review exact values or compare detailed information.
- Use a chart when users need to quickly identify trends, patterns, or relationships in the data.
In many cases, charts should also be supported by a table or a written explanation so users can access the same information in more than one way.