Tables

Why Accessible Tables Matter

Tables are often used to make complex information easier to read and understand, but if not created accessibly can pose significant barriers, particularly for those who are blind or have low vision and rely on assistive technologies to receive the information.

Imagine having information for a random cell of a table, but not knowing the topic outlined in the top-most cell (column header) or left-most cell (row header). You wouldn’t know the context. This is one way an inaccessible table could be experienced by those who use a screen reader when hearing the table contents read aloud.

How To

General Practice

Use tables for data only, not to visually lay out the contents of your document or webpage. (Comparison of data table vs layout table provided under Examples.)

Use Simple Table Structure. Do not merge cells as this causes additional challenges for many users and can be difficult to make accessible.

Apply Table Headers. Designate the first row and/or first column of your table as the table header(s). This will inform assistive technology users where they are as they navigate content within the table.

Add a Table Caption. Captions offer a quick overview of what the table represents, giving users immediate context without needing to analyze the data first. This can also be achieved using a Heading before the table. (Refer to “Accessible Data Table” under Examples.)

Use a Real Table. Make sure you are building a table in your document or webpage, not copy-pasting an image of a table. (If absolutely necessary to use an image of the table, apply brief alt text to the image and provide a full text description of the table’s contents within your page. The alt text must refer to the text description for details.)

Assigning Table Headers

The following video offers guidance for assigning table headers in Microsoft Word, content management systems such as WordPress, SharePoint Communications Sites, and Blackboard Ultra documents.

Technical Tips

Use Table Headers. Change the table data <td> elements to table header <th> elements.

Include Scope Attributes. Use <th scope="col"> or <th scope="row"> for clarity in column and row headers, respectively.

Add Captions. Use the <caption> tag to provide a summary of the table’s content.

Visit Pope Tech’s Beginner’s Guide to Accessible Tables for more technical insight with examples on fixing inaccessible data tables.

What to Avoid

• Using Tables for Page Layout: Tables should only be used for data or information, not for visual layout of your document or webpage. (Tech Tip: use CSS to determine a page’s layout.)
• Merging Cells: Merged cells create complex tables that are challenging for assistive technology users to navigate and understand.
• Leaving Unmarked Row or Column Headers
• Leaving Blank Table Cells

Examples

Accessible Data Table

The following table has appropriate table (column) headers, is used only for data that corresponds to the headers, and has a caption summarizing the table contents.

Name	Family	Growing Season
Asparagus	Lily	spring, summer
Cauliflower	Mustard	spring, fall
Pepper	Nightshade	summer

Inaccessible Layout Table

The following table poses multiple accessibility barriers. It does not have table headers (so a screen reader user will not be able to affiliate information with its category), there are empty data cells, and it is missing a caption.

Gardens Galore Homepage
About Us	Gardening Tips	Contact Us
We are passionate about helping your garden thrive.	Learn how to grow healthy vegetables and flowers.	Reach out to our experts for personalized advice!
Our Tools	Plant Spotlights	Seasonal Tips
Discover the best tools to cultivate your garden.	Explore the unique qualities of roses, succulents, and more.	Using leaf mulch in the fall is as great for your gardens as it is for pollinators!

Additional Resources