Introduction
This handbook has been created to help content taggers understand HTML tables in order to remediate them for accessibility within the PXE Workflow.
Accessible Tables
The current HTML 5 specification defines tables this way (opens in a new tab):
The table element represents data with more than one dimension, in the form of a table. Tables have rows, columns, and cells given by their descendants. The rows and columns form a grid; a table's cells must completely cover that grid without overlap.
Multi-Dimensional Data
For sighted users, there is visual cognitive processing happening whenever you encounter a table; what you generally see is a summation of the data. Take the following table for example:
X-axis | ||||||||
|---|---|---|---|---|---|---|---|---|
Y-axis | Sunday | Monday | Tuesday | Wednesday | Thursday | Friday | Saturday | |
| Breakfast | Toast and Coffee | Fresh Fruit and Cereal | Toast and Coffee | Fresh Fruit and Cereal | Toast and Coffee | Fresh Fruit and Cereal | Pancakes and Syrup | |
| Lunch | Ham Sandwich and Crudities | Tomato Soup and Salad | Hot Dog and Fries | Submarine Sandwich and Chips | Chicken Strips and Fries | Club Sandwich Plate | Cheeseburgers and Fries | |
| Dinner | Lasagna and Salad | Fish and Chips | Roast Chicken and Mashed Potatoes | Lamb Chops and Rice | General Tso's Chicken | Tofu Pad Thai | Prime Rib and Baked Potato | |
<table>
<thead>
<tr>
<td> </td>
<th scope="col">Sunday</th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
<th scope="col">Saturday</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Breakfast</th>
<td>Toast and Coffee</td>
<td>Fresh Fruit and Cereal</td>
<td>Toast and Coffee</td>
<td>Fresh Fruit and Cereal</td>
<td>Toast and Coffee</td>
<td>Fresh Fruit and Cereal</td>
<td>Pancakes and Syrup</td>
</tr>
<tr>
<th scope="row">Lunch</th>
<td>Ham Sandwich and Crudities</td>
<td>Tomato Soup and Salad</td>
<td>Hot Dog and Fries</td>
<td>Submarine Sandwich and Chips</td>
<td>Chicken Strips and Fries</td>
<td>Club Sandwich Plate</td>
<td>Cheeseburgers and Fries</td>
</tr>
<tr>
<th scope="row">Dinner</th>
<td>Lasagna and Salad</td>
<td>Fish and Chips</td>
<td>Roast Chicken and Mashed Potatoes</td>
<td>Lamb Chops and Rice</td>
<td>General Tso's Chicken</td>
<td>Tofu Pad Thai</td>
<td>Prime Rib and Baked Potato</td>
</tr>
</tbody>
</table>As a sighted user, once you see this table you have already drawn a mental conclusion of what this table represents based on the totality of the information provided. It is a 7-day menu with Breakfast, Lunch and Dinner options shown. The data is multi-dimensional: the table has both an X and Y axis that helps define the individual cell's data based on each data cell's (<td>) relationships to the headings (<th>).
Tables and Assistive Technology
The way that screen readers process tables makes them a complex data collection to work with. Unlike sighted users who can see the sum of the parts, screen reader users can only iterate through a single cell at a time. As a screen reader starts to walk through a table, row by row and column by column, retaining the relationships of the data in the human short-term memory becomes increasingly difficult.
For example, in the preceding sample table, after stepping through 22 unique cells, the user lands on "Chicken Strips and Fries". As a sighted user, you can glance at that table and see that in fact, "Chicken Strips and Fries" is Thursday’s Lunch.
To ensure that non-sighted users can also reach the same understanding quickly without relying on memory of the top row and left-hand column contents, in our sample table we need to programmatically encode the X and Y axis relationship between the meal, and the day and seating for that meal. In HTML, we accomplish that using table header elements (<th>).
With the programmatic association now defined in the source-code, screen reader users can quickly query the header(s) associated with the table data cell (<td>), and also draw the same understanding as sighted users.
🧚 PXE Workflow
PXE (Pearson + XHTML + EPUB) is a legacy Pearson workflow used to produce epubs for a variety of destinations from a single HTML-based source whose format is called PXE Master. This source is processed by software called the PXE Tools which produces one or more epubs as output. All accessibility remediations are applied to PXE Master.
Content pertaining to the PXE Workflow in particular will be contained in callouts like this one or in sections explicitly labelled "PXE" with a 🧚 (pixie/fairy) emoji for sighted users.
EPUB
The current EPUB specification defines EPUB this way (opens in a new tab):
EPUB® 3 defines a distribution and interchange format for digital publications and documents. The EPUB format provides a means of representing, packaging, and encoding structured and semantically enhanced web content — including HTML, CSS, SVG, and other resources — for distribution in a single-file container.
The aforementioned container is essentially a ZIP archive with an uncompressed mimetype file.
Tables Within PXE
As this is a legacy workflow, modern accessiblity conformance was not a top-level priority in the creation of the system or the content within it. Furthermore, while Pearson is today remediating this content, they have elected to put limits on the degree to which we are able to perform this remediation and there are certain things that are out of scope for this project.
Historically, taggers were required to rigidly mimic the original visual appearance of content in the print layout of each title. Original authors and editors were in a traditional, print-oriented mindset that did not consider the requirements of digital accessibility. For example, there are regular occurances of non-tabular content presented in table form, like definition lists.