Acrobat Chapter 6: Complex Tables

 Instructions

Introduction

Tables with multiple header rows or columns are considered complex. Irregular structures like split or merged cells can make navigation difficult for screen reader users, even if accessibility steps are followed. It's better to use simple tables without spanned cells than to create confusing complex ones.

If a table is too complex to be accessible, consider splitting it into multiple simpler tables for better screen reader navigation.

However, in many cases, creating accessible complex PDF tables is possible. The next sections will provide step-by-step examples.

Section 6.1: Keep your Tables Simple

The easiest way to make a table accessible is by simplifying it. Often, a complex table can be broken into multiple simple tables, benefiting all users. Complex tables can overwhelm anyone, not just screen reader users, as it takes significant effort to match header cells with their corresponding data. If you’ve worked with tables, you know how complicated they can become, with multi-level headers, split or nested tables, and headers placed at various positions.

For an example, our table below shows a complex table for the Average High Temperature by Season for a few different cities. This table can be broken up into two separate tables, one for the cities in New York, and another for the cities in California.

Open

Complex tables can be challenging to make fully accessible. Even if you follow all the correct steps, glitches or the limitations of current screen reader technology may still result in poor usability. It's essential to test the accessibility of your work, especially for complex PDF tables. Always test with at least one screen reader, and using two is even better for thorough evaluation.

Section 6.2: Tagging a Complex Table

First, we need to demonstrate an example of settings a complex table’s scope and span. Scope refers to whether the header is a column header, row header, or both. Span refers to how many rows or columns the header spans. If you make a simple table, which is one header column/row or one of each, you do not need to worry about this part.

In our example, we have a complex table of the Average High Temperature by Season with several different headers:

1. Location - The header that defines both of the first two rows and the first columns.

   Open

   

2. New York and California - The headers that define four columns. Each of these headers is merged and takes up two cells in one row.

3. Buffalo and New York City (under the merged New York header) - Headers that define one column.

4. Los Angeles and San Francisco (under the merged California header) - Headers that define one column.

Steps for Tagging a Complex Table

1. Save your file as an untagged PDF.

   1. Go to the File Tab in the Ribbon.

   2. Click the Save as Adobe PDF button.

   3. In the Save Adobe PDF File As box, click on the Options box.

   4. In the Acrobat PDFMaker box, check the Enable Accessibility and Reflow with Tagged Adobe PDF box. Click OK.

2. Open the file in Adobe Acrobat, and click on the Tags Icon on the right side of the screen.

3. In the Accessibility Tags Pane, click on the No Tags Available button and click the Autotag Document Option. Your tags will appear after a couple of minutes. If you see any tags that are empty, delete them.

4. Right click on the Table tag, and click Table Editor in the expansion menu.

5. A red grid should now appear on the table. Keep in mind that the red grid overlay is often offset from the actual table cells, so you may have extra cells or not enough cells.

6. Now you should identify all of your headers. In our example, we have 11. Including:

   1. Location

   2. New York

   3. California

   4. Buffalo (under New York)

   5. New York City (under New York)

   6. Los Angeles (under California)

   7. San Francisco (under California)

   8. Spring

   9. Summer

   10. Fall

   11. Winter

7. Hover your mouse over the table and right click on each table header and set the scope and scan. Right click on your first Table Header (in our example, the Location cell) and click on the Table Cell Properties option.

8. The Table Cell Properties box will appear. In the type section, check Header Cell. Now the Location header is a header for both rows and columns. In the Scope dropdown menu, choose Both. In the Attributes section, type 2 for Row Span, and 1 for Column Span. Finally, click OK. Note: You will receive the following pop-up warning: Changing the Span attribute may result in a malformed table structure. The Table Editor may not be able to display the table structure correctly. Do you want to proceed? Click Yes this time and each time this warning appears.

9. Set the Scope and Span for each of the remaining headers.

10. Use a screen reader like NVDA to test your results.

Section 6.3: Setting Header IDs and Associating Data Cells

Sometimes, setting the scope and span is not enough and you will need to provide explicit associations between data and header cells using the Table Editor.

In this example, we have the same table from the perThere are 9 header cells:

1. Year - column header (spans 2 columns)

2. 2020 - row header (spans 2 columns)

3. 2021 - row header (spans 2 columns)

4. 2022 - row header (spans 2 columns)

5. 2023 - row header (spans 2 columns)

6. 2024 - row header (spans 2 rows)

7. September/October - row header (spans 1 row)

8. November/December/January - row header (spans 1 row)

9. Regular Season Wins - column header (spans 1 column)

When dealing with complex tables, you need to think about the following questions.

• What is the layout?

• What are all of the headers?

• What columns and/or rows do they apply to?

Complex tables don't always have a straightforward tagging structure. At times, it's necessary to experiment and observe what works best with screen readers. For instance, in this table, 2020, 2021, 2022, 2023 technically span two columns, but are merged. You might initially think to set the span to just one column for those four header cells. However, after testing with a screen reader, you’ll find this doesn’t work, and the cells won't be read correctly. Therefore, you'll need to set the span to two columns instead. You should always pay attention to the merged and split cell areas because they may be problematic.

Steps for Tagging a Complex Table

1. Save your file as an untagged PDF.

   1. Go to the File Tab in the Ribbon.

   2. Click the Save as Adobe PDF button.

   3. In the Save Adobe PDF File As box, click on the Options box.

   4. In the Acrobat PDFMaker box, check the Enable Accessibility and Reflow with Tagged Adobe PDF box. Click OK.

2. Open the file in Adobe Acrobat, and click on the Tags Icon on the right side of the screen.

3. In the Accessibility Tags Pane, click on the No Tags Available button and click the Autotag Document Option.

4. Your tags will appear after a couple of minutes. If you see any tags that are empty, delete them.

5. Check to identify any incorrectly tagged cells and fix them. In our example, the Week 1-8 cell and the Week 9-18 cell were both tagged as data cells when they should be header cells. To change the tags, right click on the TD tag in the tag tree and select Properties. The Object Properties box will appear. Change the Type dropdown menu option to Table Header Cell. Click OK to exit the Object Properties box.

6. After the tags are corrected, right click on the Table tag, and click Table Editor in the expansion menu.

7. Now your table will have a red grid over it.

8. For each header cell, right click them and select Table Cell Properties. Make sure the header cells are as a header cells. Set the Scope, Row Span, and Column Span. Remember as in the prior tagging method, each time the pop-up warning appears about changing the Span attribute, click Yes.

9. Next, create some header and data cell associations. The cells Weeks 1-8, Weeks 9-18, 6, and 7 may give a screen reader trouble because of the merging issues and multiple headers. Here is what each header is related to in our example.

   1. Weeks 1-8 is related to Year and 2024.

   2. Weeks 9-18 is related to Year and 2024.

   3. 6 is related to Weeks 1-8, 2024, and Year.

   4. 7 is related to Weeks 9-18, 2024, and Year.

Note: While the cells for Weeks 1-8 and Weeks 9-18 are technically associated with the header "Year," we will establish separate associations between Weeks 1-8 and Year, as well as Weeks 9-18 and Year. Associating these values directly with Year would lead to redundant information being conveyed. This illustrates one example of the unique challenges that can arise with complex tables, making it essential to test their accessibility with a screen reader.

10. Now, we have 5 headers that need work: Year, 2024, Weeks 1-8, Weeks 9-18, and Regular Season Wins. Each of these headers need meaningful IDs. Acrobat creates ID’s automatically, but they are a series of random letters and numbers, so they will be harder to identify. For each of the 5 headers noted earlier, we need to give each of them a unique name. To do this, right click on each of those tags and click Table Cell Properties. In the Table Cell Properties box, go to the Attribute section. In ID, type a name. For our example, we will keep the header names as the IDs. So the ID for “Year” will be “Year.”

11. To create an association, click the green plus sign in the Table Cell Properties box. Repeat the process for all of the headers in the order you want the screen reader to read the table in. When you are done, click OK.

12. Note: As screen readers read a table cell, they should announce the corresponding headers in the order opposite to that displayed in the Associated Header Cell IDs list (so, from bottom to top). However, in reality, this does not work perfectly and sometimes they are announced out of order. Also, if you make an error here, you cannot rearrange the order displayed by simply dragging and dropping. You'll need to delete and re-add the ID.

13. Finally, create the header associations for the remaining cells. Then test your page with a screen reader.

 Related articles