Topics Map > Services > Accessibility and Universal Design
Topics Map > Services > Teaching, Learning and Classrooms > Assistive Technology
Tables
What Makes a Table Accessible?
Tables are a way to organize and share information in a clear and effective manner. To do this, start with accessibility in mind. Tables need headers, alternative text, and a simple structure for individuals with disabilities and all users to understand. Some of the key characteristics of an accessible table include:
- Include a Header Row: The first row of the table should state what kind of information is contained in each column (rows go across and columns go down). This provides context for the data and assists screen readers in navigating the table. Ensure header rows are consistent across pages. Rows should not break across pages.
- Use a Simple Table Structure: Design simple tables, avoiding merged or split cells. Avoid tables nested within other tables. All of these will make it very difficult, if not impossible, for screen readers to read the information in the table aloud in a way that makes sense.
- Add Alt Text (Descriptive Text): It can be time-consuming to read a table with a screen reader. Use alt text to add a short summary of the information provided in the table so that screen reader users can decide if they want to read the table in its entirety.
- Avoid Blank Cells if Possible: You should never leave the left uppermost cell blank, as it's the first cell a screen reader user will encounter. Blank cells anywhere in the table could also mislead someone using a screen reader into thinking that there's nothing more in the table.
- Don't Use Screenshots of Tables: Build a table in your document or website (LMS page) rather than just including a screenshot. A screen reader can't read an image, so a person using a screen reader won't know what data is contained in a screenshot of a table.
- 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.
Create Tables with Accessibility in Mind
When creating a table, it is important to make sure all tables are accessible to those using screen readers. This takes careful planning and thoughtful design to ensure all users can understand and navigate your data. This helps those using screen readers to make sense of the data contained in a table. You should only use a table when it's necessary to convey relationships between pieces of data, and not for layout purposes.
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.
Table Header Row
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
Marking table headers tells screen readers 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.
Alternative/Descriptive Text
Alternative text (descriptive text) is the short written description that typically appears in place of an image. For a table, the purpose 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
Table captions are not required but are a good idea. Captions are like a title for the table that describe the purpose and a brief description, including where the data came from and/or who created the table. Meanwhile, alternative text is used to describe images in words for people who can't see them.
Color Contrast
Ensure that your tables and text meet a contrast ratio (add KB page link Color Contrast) of at least 4.5:1 for regular text. For large text (18+ pt or 14+ pt bold), a minimum contrast ratio of 3:1 is acceptable. Use online contrast checkers like WebAIM to ensure compliance with accessibility standards.
Table Navigation
Accessible tables enable all users to navigate data smoothly using keyboard controls. A simple table layout is the best way to guide users through information smoothly. People should be able to navigate from left to right across rows and from top to bottom through columns without confusion. Clearly marked headers are especially important for people using screen readers, as they help explain how each piece of data connects to its row and column.
Accessible Table Checklist
- Check the Header Row option to highlight the top row as headers.
- Select First Column to mark the first column as headers.
- Add Alt Text as a brief description and summary of the table.
- Optional, add Caption as a title for the table to help provide purpose.
- Avoid title rows in the middle of a table. Instead, break up the table into two (or more) separate tables.
- Do not merge cells.
- Ensure every cell contains relevant data.
- Ensure there are no extra spaces between cells.
- Avoid hard returns (pressing Enter( within table cells.
- If spacing needs adjustment, use the paragraph settings.
Resources
- Blackboard - Add Tables
- Video - Create an Accessible Table in Word
- WebAIM - Creating Accessible Tables