Tables

Organizing Data

• What: Accessible tables use a clear grid structure with designated Headers. These headers provide the context for every piece of data in the table.
• Why: A screen reader user navigates a table cell-by-cell. Without headers, the computer just reads numbers and words: “Row 2 Column 2… 14… Row three, Column 2… 22.” With headers, it says: “Row 2, Column 2 Price: 14 dollars… Row three, Column 2 Quantity: 22.”
• The #1 Rule: Never use tables to control the visual layout of a page (e.g., using a table to put a photo next to text). Use columns or alignment tools instead.

Accessible Table Design

There are four main rules to keep in mind when designing any accessible table:

1. Keep it Simple: Use a simple grid. Avoid merging cells (merging two columns into one) or splitting cells. Complex tables often need to be broken into two smaller, simpler tables.
2. Define the Header Row: The top row must be designated as the “Header.” In a PDF, this turns a standard <TD> (Table Data) tag into a <TH> (Table Header) tag.
3. No Empty Cells: Screen readers can get “lost” in empty cells. If a cell has no data, enter “N/A” or “0” so the user knows they haven’t reached the end of the table.
4. Don’t Rely on Color Alone: Never use color as the only way to convey meaning within a table. If a row is red to indicate it is “Overdue,” you must also include the word “Overdue” in a text column.

Add Tables to your Documents

Microsoft Word

The following support page from Microsoft details how to add accessible tables to your Word documents. You can also review the following support page for additional details Accessibility Resources and Tutorials: Microsoft Office.

Google Docs

In Google Docs, use the Insert > Table option to add a new table. Open the Table Options and select Row to Pin Header Row(s) and uncheck Allow row to overflow across pages.

You can also review the following support page for additional details Accessibility Resources and Tutorials: Google Docs.

Grackle Docs

You must use Grackle Docs to verify the accessibility of all tables in your documents. Select Extensions > Grackle Docs > Launch and review the tables section of the report.

You can also review the following support page for additional details Accessibility Resources and Tutorials: Grackle Docs.

Canva

In Canva, you can add a pre-designed table element using the following steps:

1. On the editor side panel, select the Elements tab.
2. Under the Tables section, select a table to add it to your design.
3. To add text, double click the cell you want to type into.

Tip: Type “/table” anywhere on your design to add a table and to specify how many rows and columns you need.

Table Accessibility in Canva

Currently, there does not appear to be a mechanism to check the table accessibility in Canva directly.

The Design Accessibility tool only checks for typography, color contrast, and alternative text. So if your table has one of these errors, it may be flagged. However, the actual tagging of your table will occur in another tool like Adobe Acrobat.

Follow all best practices listed on this page for creating an accessible table in Canva before saving your file as a PDF.

Adobe Acrobat

• Note: Editing tables directly in a PDF is complex and prone to errors.
• The Golden Rule: Always fix accessibility in the source file (Word or Google Docs) before exporting to PDF.

If you must edit a PDF without the source file, we recommend exporting it back to Word first:

To export PDFs to Microsoft Office:

1. Open a PDF file
2. Choose the Export PDF tool
3. Choose format and select Export
4. Save your file

Evaluating Tables Errors in PDF

Before trying to resolve table issues in your PDF consider the two following scenarios.

Go Back to the Source File if:

• The table is missing headers: It is significantly faster to designate a Header Row in your source document than to manually change cell tags in Acrobat.
• There are merged or split cells: These create “irregular” tables that are incredibly difficult to fix in the Tag Tree.
• The table is being used for layout: If the table is just there to make the page look a certain way, delete it and use proper alignment tools.

Fix in Adobe Acrobat if:

• You only need to verify or adjust the Scope (Row vs. Column) for an existing header. (Scope tells the screen reader if the header applies to the entire Row to its right or the entire Column below it).
• You are a power user comfortable with the Table Editor tool.
• You no longer have access to the original source file and you can’t export without altering the overall design or integrity of the document.

Resolving Table Errors in Adobe

From Adobe Tools, select Accessibility > Reading Order. Locate your table either from the Accessibility Tags or within the document content itself and highlight the table. Select Table Editor from the Reading Order tool.

Right-click each cell and select Table Cell Properties. Ensure Header Cell is selected and identify the scope (Row, Column, Both, or None). Select OK. Repeat as needed to identify every header cell in the table.

For more complex tables, we recommend reviewing the Complex Tables tutorial in the Adobe Acrobat Accessibility Series.