PDF accessibility – data tables
26 September 2008 (updated and amended January 2010)
Summary
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 avoid or remedy them. An accompanying PDF provides examples of both accessible and inaccessible tables as discussed in the article.Note 1
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 accompanying PDF has the real thing). Whilst it may look similar to the correctly formatted Table 1 below, the difference will soon become apparent when tested in a screen reader such as JAWS. Without the benefit of visual cues to define the relationships between headers and other data cells, 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 often cause problems. This is because some readers will want to use the higher contrast colour schemes available in Adobe Reader or 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, use a transparent background. To demonstrate the potential problems, an example of a table with background colours is provided in the accompanying PDF.
Headers
When creating a table in Word it is good practice to set the column headers in the Table Properties dialogue box (). Although in JAWS this makes no difference for tables with just a single level of headers, in more complex tables it does matter. In Word, with the headers row selected, under the tab of the Table Properties dialogue box, make sure that the check box is checked. This ensures that headers are recognised properly 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
headers set as outlined above. Notice the hierarchy
created in the tagging process including
<THead> and <TBody>
sections to house the headers and the main body
of the table respectively. Also, as
in HTML, table rows are tagged as <TR>s,
header 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 headers have not been set properly?
In this case the headers 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 headers: 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 header 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 header cells.
Editing in the tag tree
tagged headers . What should be header (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 headers
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 headers (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 headers (defined here as a complex table), as with a complex HTML table, a little editing work will be needed to make it accessible. The problem arises because, during conversion from Word to PDF, information that a header 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 announces only the second row header 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 header 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 header. This is why JAWS fails to associate
any data in the last column with the top level header
("This year"): the header 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 header cell. It may look like a long process but with a little practice it takes just a few seconds to complete.
- 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 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.
Wrap up
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 headers are set and that the source document is tagged on conversion to PDF. Making complex tables accessible requires a little more attention to detail, but probably no more so than their HTML counterparts.
Ted Page Director PWS
PDF accessibility services
For further information please see our PDF accessibility services or PDF accessibility training pages, or contact us on 01932 355 222 or 07918 952 874.
RSS (subscribe)