Tables
Tables are more than just a way to organize information; they are a powerful tool for sharing information clearly and effectively.
When designed with accessibility in mind, tables become more user friendly for all—including individuals with disabilities.
Create Tables with Accessibility in Mind
Creating accessible tables requires careful planning and thoughtful design to ensure all users can understand and navigate your data.
When creating tables, follow these guidelines:
- Use tables for data only, not for layout purposes.
- Build all tables in the original document. Avoid drawing, importing, or inserting tables as an image file.
- Use a simple table structure with a clearly marked header row and first column.
- Avoid using blank, merged, and split cells. These can create issues for screen reader users, who may not be able to navigate the table in a logical reading order.
-
- For split cells: Merge the cells back together. Make any adjustments to the table you might need, including creating several less-complex tables.
- For merged cells: Split the cells apart. If the title of table appears in merged cells at the top of the table, move the title outside the table into a caption and delete out the row of merged cells. If need be, make other adjustments to the table, including creating several less-complex tables.
- For empty cells: Fill in all empty cells with text such as “n/a” “null,” etc.
Characteristics of an Accessible Table
- Simple Structure: Design simple tables, avoiding merged or split cells.
- Consistent Header Row: Ensure header rows are consistent across pages. Rows should not break across pages.
- Descriptive Alternative Text: Add alternative text or a detailed description for more complex tables. This text should convey the same information to a user that the table would.
- Informative Table Caption or Summary: Include a caption or summary that explains the table's purpose prior to reading the table.
- Sufficient Color Contrast and Font Size: Use high color contrast combinations and font sizes.
- Keyboard-Friendly Navigation: Organize the table so users can move through it logically using keyboard controls.
A table header row is the top row of a table that serves as a title for the categories of information in each column. Designers often manually bold this row to create emphasis, but it's important to mark headers properly in the code to ensure they are structurally identified. Screen readers depend on these structural headers to help users understand the table's organization and navigate its content accurately
Table Header Row Example
Benefits of Table Header Rows?
Marking table headers tells screen reader users how to read tables. If the table headers have been properly marked, the user is able to navigate table cells and hear which column they are currently in.
Properly marked table headers benefit all users, not just those using screen readers. When tables span multiple pages, correctly marked headers ensure that readers can keep track of the table's structure without needing to flip back and forth between pages. This improves clarity and usability for everyone.
Table Header Row Guidelines
- Have only one header row per table.
- Have only one header column per table.
- Avoid title rows in the middle of a table. Instead, break up the table into two (or more) separate tables.
Alternative text (or alt-text) is the short, written description that typically appears in place of an image. For a table, the purpose of alt-text is to convey the same information and data to a user that the table would. This is especially important for screen reader users, as screen readers typically announce tables without context unless alt-text is provided. Without a description, users will hear only “Table” and won’t understand its purpose or content. Including clear and concise alt-text ensures that users can grasp the meaning of the table, even if they cannot view it visually.
Table captions provide a brief description of a table's content. Think of them as a quick summary of the table; they tell the reader the purpose of the table before diving into the details. It's important to know that captions are different from alternative text. Captions give a brief summary of the data, including where the data came from and/or who created the table. Meanwhile, alternative text is used to describe images in word for people who can't see them.
If you have used shading to visually differentiate rows, make sure that the color contrast between the background shade is good enough to perceive the text color. This can be achieved by adhering to WCAG 2.1 AA's color contrast guidelines:
- Normal sized text should have a contrast ratio of at least 4.5:1
- Large sized text should have a contrast ratio of at least 3:1. Large sized text consists of an 18 pt font or higher or a 14 pt. font bolded.
Build Accessible Tables In
Resources
For more guidance on building accessible tables in Word, Excel, PowerPoint, and Adobe Acrobat documents, see TTaDA's Accessibility Resource Index.