PDF accessibility – data tables
26 September 2008
Generally speaking, making PDFs accessible is relatively straightforward. However, one of the least well understood aspects of PDF accessibility is handling data tables correctly. The following highlights some common pitfalls and explains how to make even the most complex data tables fully accessible. An accompanying PDF (33KB) provides examples of both accessible and inaccessible tables for testing purposes.
How not to create a table
Firstly, and apologies if this is obvious, but in the source document, whether it be Word, InDesign or anything else, always use a proper table structure rather than, for example, positioning content with the tab key. The following grid-like construction is a simulation of the latter (the acompanying PDF has the real thing). Whilst it may look very similar to the correctly formatted Table 1 below, the difference will become apparent very quickly when tested in JAWS. Without the benefit of visual cues to define the relationships between headings and other data, the grid makes little sense.
This is a grid, not a table
Name Coffee Tea Water
Sam 11 13 13
Bob 12 16 11
Sue 10 15 12
Background colours
It is also important to note that for some vision-impaired people, using background colours will almost always cause problems. This is because some readers will want to use the higher contrast colour schemes available in Acrobat. However, whilst the foreground colours will change according to the choices made in the , background colours will remain unchanged, leading invariably to much poorer colour contrast. In short, avoid using any background colours, including white; instead, always use a transparent background. To demonstrate the potential problems, an example of a table with background colours is provided in the accompanying PDF.
Headings
When creating a table in Word it is good practice to set the column headings in the Table Properties dialogue box (). Although in JAWS this makes no difference for tables with just a single level of headings, in more complex tables and in other assistive technologies it does matter. In Word, with the headings row selected, under the tab of the Table Properties dialogue box, make sure that the check box is checked. This ensures that headings are recognised as such when the document is converted to PDF.
The importance of tagging
The next step is to ensure that the PDF is tagged when it is first created. Never print the document as a PDF () as this creates an untagged and inaccessible document.
Figure 1 shows the
part of a PDF's tag tree corresponding
to a table created originally in Word with its
headings set as outlined above. Notice the hierarchy
created in the tagging process including
<THead> and <TBody>
sections to house the headings and the main body
of the table respectively. Also, as
in HTML, table rows are tagged as <TR>s,
heading cells as <TH>s and
normal table data cells (not shown here) as <TD>s.
Editing PDFs for accessibility
Please note that in order to edit PDFs for accessibility you will need Acrobat Professional. The Acrobat commands in this article refer to version 8 – earlier versions differ slightly.
Correcting <TH>s manually
But what if you don't have access to the source document
and the headings have not been properly set?
In this case the headings will have been tagged
as normal data cells (<TD>s) during
conversion to PDF and will need to be changed to <TH>s.
There are two ways to
correct the headings: using
the Table Inspector or editing tags directly
in the tag tree.
Using the Table Inspector
To use the Table Inspector, open the TouchUp Reading Order panel by selecting . Right-click on the table in question and choose . Right-click on the first cell to be converted to a heading and choose ; The Table Cell Properties dialogue box opens. In the section, select the option button, and from the dropdown menu choose (or as appropriate). Repeat the process as necessary for the other heading cells.
Editing in the tag tree
tagged headings . What should be heading (TH tags) are normal table data cells (TD tags) (end of Figure 2 text).
The same job can be done by editing the tag tree. To do so select and locate the table to be edited.
Navigating the tag tree
To navigate quickly and easily around the tag tree, either right-click a tag and select , or select a section of content in the document pane using the selection tool, click in the tags panel and choose .
Editing tags
The four <TD>s visible in
Figure 2
correspond to the cells in the first row of headings
in Table 1. To convert these to <TH>s
using the tag tree, simply click on each one in
turn, delete the "TD" and type "TH".
Simple tables
Provided that the PDF is tagged when created, and provided that the table has only a single level of headings (defined here as a simple table) no further intervention is needed on the part of the document author or editor. It will be possible navigate easily with JAWS using the standard table navigation commands as set out in Table 2.
| Name | Coffee | Tea | Water |
|---|---|---|---|
| Sam | 1 | 3 | 3 |
| Bob | 2 | 6 | 1 |
| Sue | 0 | 5 | 2 |
| Function | JAWS command |
|---|---|
| Next table | t |
| Previous table | Shift + t |
| Read next row | Windows key + down arrow |
| Read previous row | Windows key + up arrow |
| Read row | Windows key + comma |
| Read column | Windows key + period |
| Next cell in a row | Alt + Ctrl + right arrow |
| Previous cell in a row | Alt + Ctrl + left arrow |
| Cell below in a column | Alt + Ctrl + down arrow |
| Cell above in a column | Alt + Ctrl + up arrow |
Complex tables
So far so good. However, once a table has two or more levels of headings (defined here as a complex table), as with a complex HTML table, a little editing work will be needed to make it fully accessible. The problem arises because, during conversion from Word to PDF, information that a heading spans more than one column sometimes gets lost. Typically this affects the last column in a table.
| Name | Last year | This year | ||
|---|---|---|---|---|
| Entered | Finished | Entered | Finished | |
| Sam | 5 | 1 | 4 | 2 |
| Bob | 6 | 3 | 4 | 1 |
| Sue | 11 | 9 | 10 | 5 |
What should happen is that, when navigating to a data cell in the last column, JAWS should announce (in the case of Table 3 above) "This year, Finished" and then the value of the data cell itself. However, what actually happens is that JAWS fails to recognise the top level heading and announces only the second row heading followed by the contents of the data cell.
ColSpan errors
In order to see the source of the problem, it will be necessary to inspect the ColSpan and RowSpan properties of the top level heading tags for Table 3. (It is also possible to inspect these properties in the , but they can only be edited via the tag tree).
Update
In Acrobat 9 it is now possible to edit ColSpan and RowSpan in the (renamed in version 9) making it a much simpler process. However, you still need the following for version 8.
Follow these steps to observe the ColSpan and RowSpan settings.
- In the tag tree, right-click the second
<TH>in the first row (<TR>) of Table 3 and select . The TouchUp Properties dialogue box opens. - Click the button. The Attributes dialogue box opens.
- Expand (click the + sign).
- Expand .
- Observe that it has a ColSpan value of 2 and a RowSpan value of 1 (see Figure 3). This is correct: it spans the two columns below it and just one row.
However, repeat steps 1 to 3 above for the third
<TH> in the first row of Table 3 and
you will see that there is no
and therefore no Colspan setting for
this heading. This is why JAWS fails to associate
any data in the last column with the top level heading
("This year"):
the heading needs to be set to span both columns
below it.
Fixing ColSpan and RowSpan
The following are the steps required to set the ColSpan and RowSpan values for a heading cell. It's may look like a long process but with a little practice it takes just a few seconds to complete and, once mastered, will enable you to tackle even the most complex tables.
- In the tag tree, select the appropriate
<TH>, right-click it and select . - Under the Tag tab, click .
- With selected, click . is created.
- Expand (click the + sign).
- Select and click . Delete the word "Layout" and replace it with "Table"
- With selected, click . The Add Key and Value dialogue box opens.
- Set the value for as ColSpan.
- Set the value for as 2.
- Set the value for as String.
- Click .
- With selected, click . The Add Key and Value dialogue box opens.
- Set the value for as RowSpan.
- Set the value for as 1.
- Set the value for as String.
Once these values are set the table should be fully accessible with all the headers being correctly associated with the corresponding data cells. To hear the changes in JAWS save the document, close and re-open it.
Even more complex tables
Of course, for even more complex tables, just as with HTML tables, any combination of ColSpan and RowSpan properties can be set. Colspan and RowSpan work in exactly the same way as their HTML counterparts. (For more information see Cells that span several rows or columns, from the W3C HTML 4.01 specification.)
Conclusion
As stated at the outset, making tables accessible is one of the least well understood aspects of PDF accessibility. Nevertheless, making a simple table accessible only requires avoiding grid-like constructions and background colours, ensuring that headings are set and that the source document is tagged on conversion to PDF. Making complex tables fully accessible requires a little more attention to detail, but probably no more so than complex HTML tables.
Ted Page Director PWS
PWS accessibility services
For further information on any aspect of web accessibility (including our PDF accessibility training course), please contact us on 01932 355 222 or 07918 952 874.
RSS (subscribe)