Complex Tables

As mentioned in the Simple Tables knowledge base article, Complex Tables should be avoided at all cost.  They will create 3 to 6 hours of work apiece for authors, developers, or remediators.  Nonetheless, if you are not faint of heart and have some time to burn, press on to get a better understanding of the remediation process.

In this complex table, we have multiple cells that should be defined as Table Headers (TH) and some that are merged across several cells as highlighted below:

Screenshot of Table in Microsoft Word with Multiple Table Headings Prominently Displayed

We can initially address the THs in the first row and column, by selecting the table > click on the Table Design tab > and check Header Row and First Column:

Screenshot of Microsoft Word with Table Design Ribbon Active and Header Row and First Column are checked

However, this table will definitely need some accessibility work done in Adobe Acrobat DC.

Hands On Training

Pre-requisites:

Every person's PDF files are going to be different, so there are no fail-safe directions on making accessible tables in Adobe Acrobat DC.  As the old saying goes, "Practice makes...better".  The following directions will guide you through the process I used to make the example file accessible:

  1. Open the KB Example - Tables in Acrobat DC.pdf in Adobe Acrobat DC (not Acrobat DC Reader).
  2. Open the Order and Tags Navigation Panes in your PDF document - In the top menu, click on View > Show/Hide > Navigation Panes > Order.  Go to the same location and make sure Tags are also enabled.
  3. Cleanup empty <P> Tags - With the Tags Navigation Pane active, go through and delete all the empty <P> Tags through the right-click context menu:
    Screenshot Adobe Acrobat Delete Tags
  4. Verify the Other Tags - the <H1>, <Table> and <H2> tags are all setup correctly (expand each of them to see the tag hierarchy).  It's the second table that is a confused mess.
  5. Open the Table Editor Options - If your Accessibility Tools are not active (they will show up in the right sidebar), then go to Tools > click on the Accessibility tool.  Click on Reading Order and you should see a bunch of white boxes with black numbers appear over each cell of your tables (reading order) as well as the Reading Order tool:
    Adobe Acrobat Screenshot with Reading Order
  6. Open the Table Editor - Click anywhere in the second table, and click the Table Editor button in the Reading Order window.  You should see the table change, displaying different colors for the THs and TDs:
    Adobe Acrobat Screenshot with Table Editor Enabled
  7. Update the STUDENT UNION BUILDING merged header - Right-click on the first TH ("STUDENT UNION BUILDING") > click Table Cell Properties...:
    Adobe Acrobat Screenshot TH Right-Click Menu with Table Cell Properties Highlighted
    Change the Scope drop-down to Column > input "9" into the Column Span field:
    Adobe Acrobat Screenshot Table Cell Properties with Scope set to Column and Column Span set to 9
    Click OK.  You will notice the Table's reading order will update from step 6:
    Adobe Acrobat Screenshot Table Reading Order Updated
    (Note: As you update your table by defining TH, TD and spans across multiple columns/rows, Adobe Acrobat DC will try to revise and correct the layout of the table.)
  8. Update THs that should be TDs - The TH that is in the second column, right above Regular Hours should be a TD.  Right-click on that cell > click Table Cell Properties... > change the Type (radio group) to Data Cell > click OK. 
  9. Update TDs that should be THs - Starting from left to right, top to bottom, find any TDs that need to be updated to THs.  In this example, we have the Regular Hours and Summer Hours that need to be updated to row headings.  The days of the week that need to be column headings, but that will come later in step 13.
    1. Update the Row Headings - Shift-click Lounge, Caffeinated Cup, Bookstore, Regular Hours and Summer Hours > right-click on any one of the selected cells > click Table Cell Properties...Change the Type (radio group) to Header > click the drop-down for Scope and choose Row > click OK. The table should look identical to:Adobe Acrobat Screenshot Table with THs set
    2. Update the Column Headings - For this particular complex table, this step needs to come later (in step 13) due to cleanup that needs to happen prior to updating these specific column headings.
  10. Remove the Extraneous THs - The two THs underneath CAFFEINATED CUP and the one TH underneath BOOKSTORE are extraneous and need to be removed. To do so, open the Tags Navigation Panel (go to View > Show/Hide > Navigation Pane > Tags). Expand the second <Table>, expand <TBody> and then expand the fourth, fifth and seventh <TR>s. Shift-click the <TH>s that are NOT expandable--they do not have the ">" to the left:
    Adobe Acrobat Screenshot Tags Navigation Panel with Multiple THs Selected
    Right-click on one of the <TH>s in the Tags Navigation Panel > click Delete Tag. There will be no visual change to the Table Order, but that will change in the next step...
  11. Right-click on the <TH> associated with CAFFEINATED CUP > click Table Cell Properties... > verify the Header Cell (radio group) is selected and the Scope drop-down menu is set to Row > input "3" into the Row Span field:
    Adobe Acrobat Screenshot Table Cell Properties with Scope set to Column and Row Span set to 3
    Click OK > click Yes when the next alert appears ("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?"):
    Adobe Acrobat Screenshot Warning Changing Span Attribute
    The table should now look identical to:
    Adobe Acrobat Screenshot of Merged TH for Caffeinated Cup
  12. Right-click on the <TH> associated with BOOKSTORE > click Table Cell Properties... > verify the Header Cell (radio group) is selected and the Scope drop-down menu is set to Row > input "2" into the Row Span field > Click OK > click Yes when the next alert appears ("Changing the Span attribute ... Do you want to proceed?"). The table should now look identical to:
    Adobe Acrobat Screenshot of Merged TH for Bookstore
  13. Update Weekdays as <TH> Cell Types - Shift-click the days of the week > right-click on any of those <TD>s > change the Type (radio group) to Header > click the drop-down for Scope and choose Column > click OK. The table should now look identical to:
    Adobe Acrobat Screenshot with All THs Correctly Setup
    Now that we have all the <TH> cell types correctly defined, we can set the IDs for these cells.
  14. Generate TH IDs - Right-click on any of the TH or TD cell types > click Auto Generate Header Cell IDs.
  15. Associate Header Cell IDs - Some of the TH cell types are associated with others.  We need to define associated header cell IDs, so that a screen reader will appropriately read the contents of TDs in context of their correct corresponding THs.  Luckily, we only need to do this for a couple of sets of THs:
    1. Shift-click Regular Hours and Summer Hours THs > right-click on either of those TH cell type labels > click Table Cell Properties... > click the Plus button next to the Associated Header Cell IDs:
      Adobe Acrobat Screenshot of Adding a Table Header ID
      Select R4C1_CAFFEINA > click OK > click OK.
    2. Shift-click Lounge, Caffeinated Cup, and Bookstore THs > right-click on any one of those TH cell type labels > click Table Cell Properties... > click the Plus button next to the Associated Header Cell IDs > Select R2C1_LOCATION > click OK > click OK.
  16. Merge Remaining TDs.
    1. Right-click on the TD Cell Type containing "Summer Hours May Vary / Closed on Holidays" > click Table Cell Properties... >  input "8" into the Column Span field > click OK > click Yes when the next alert appears ("Changing the Span attribute ... Do you want to proceed?").
    2. Right-click on the TD Cell Type containing "Summer Hours May Vary" > click Table Cell Properties... >  input "8" into the Column Span field > click OK > click Yes when the next alert appears ("Changing the Span attribute ... Do you want to proceed?").
      The table should now look identical to:
      Adobe Acrobat Screenshot with TH, TD and Merged Cells Setup
  17. Verify that Tags Match the Cell Type Labels - Open the Tags Navigation Panel (go to View > Show/Hide > Navigation Pane > Tags) > expand the hierarchy of tags and click on each tag and visually verify that the Tag Type matches the Cell Type Label:
    Adobe Acrobat Screenshot Showing Disparity Between Tag and Cell Type ID
    To fix, right-click on the <TD> in the Tag Navigation Panel > click Properties... > click the Type drop-down and select Table Header Cell:
    Adobe Acrobat Screenshot Updating Tag Property to Table Header Cell
    The other remaining discrepancy is listed below:
    1. Delete blank <TH> tag under the second <TR>.  You should also update the TD to the right of LOCATION in the Table Editor: right-click on the TD cell type label > click Table Cell Properties... >  input "2" into the Row Span field > click OK > click Yes when the next alert appears.  The table should now look identical to:
      Adobe Acrobat Screenshot of an Accessible Complex Table
      PERFECT!
  18. Check the Reading Order - In the top menu, click on View > Show/Hide > Navigation Panes > Order.  Luckily, since our Source document was accessible and we updated the Complex Table to become accessible, the reading order is in good shape!
  19. LASTLY, Use a Screen Reader to Test Your PDFs Accessibility.

Additional Resources

Previous: Simple Tables

 

Details

Article ID: 54605
Created
Tue 5/29/18 1:32 PM
Modified
Wed 3/6/24 9:13 AM