Web Accessibility Inserting Access Mark-Up Dr David Kreps

Data Tables

Manchester Digital Web Accessibility Group
Dr David Kreps

Agenda

Introduction: The WCAG and Tables
- What the Guidelines actually say
Linear Tables
- What linearisation actually is and how to achieve it
Guideline 5 in detail
- Including notes on practical realities…

The WCAG and Tables

"Tabular information
- When tables are used to represent logical relationships among data -- text, numbers, images, etc., that information is called "tabular information" and the tables are called "data tables". The relationships expressed by a table may be rendered visually (usually on a two-dimensional grid), aurally (often preceding cells with header information), or in other formats."

Tabular Information

The WCAG and Tables

GL3 - Use markup and style sheets and do so properly
- "Misusing markup for a presentation effect (e.g., using a table for layout or a header to change the font size) makes it difficult for users with specialized software to understand the organization of the page or to navigate through it."
- "..it is appropriate to use the TABLE element in HTML to mark up tabular information even though some older screen readers may not handle side-by-side text correctly. Using TABLE correctly and creating tables that transform gracefully makes it possible for software to render tables other than as two-dimensional grids."

G3 Using markup properly

The WCAG and Tables

G5 Create tables that transform gracefully.
- "Tables should be used to mark up truly tabular information ("data tables"). Content developers should avoid using them to lay out pages ("layout tables")."
- "Tables for any use also present special problems to users of screen readers.
- "Some user agents allow users to navigate among table cells and access header and other table cell information. Unless marked-up properly, these tables will not provide user agents with the appropriate information."

G5 Creating tables

Linear Tables

Linearising a table means taking each table cell and placing them one after each other (underneath) down the page.
Linearisation is done row before column, therefore if you had a table like the following:
This would linearise like this:
one
three
five
two
four
six

Linearisation problems

Linear Tables

Horizontal, or row-before-column, is in most cases probably what is desired (in cases where you have real content).
However in this case, it is clear that the table is intended to be read vertically column-before-row - first.

Linear Tables

To ensure that a table like the above linearised correctly, it is necessary to nest another table inside each of the columns, or just separate the cell content with line breaks. See below:

The above two tables would linearise something like this:
one
two
three
four
five
six

How to Linearise

Linear Tables

In some cases a part linearisation might be done by the user agent, where rows are displayed in a single line without regard to the columns, in this case the last table on the previous slide would look like this:
One
two three
four five
six

The WCAG and Tables

5.1 For data tables, identify row and column headers.
- For example, in HTML, use TD to identify data cells and TH to identify headers. A

fq note:

This makes simple data tables the easiest and best kind of tables to have
BOTH the top row and the first column of your tables should be marked up as TH for the most accessible data tables.

G5.1 Simple data tables

The WCAG and Tables

5.2 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells. A
- For example, in HTML, use THEAD, TFOOT, and TBODY to group rows, COL and COLGROUP to group columns, and the "axis", "scope", and "headers" attributes, to describe more complex relationships among data.

fq note:

AXIS, THEAD, TFOOT, and TBODY are not supported by many browsers, though MSIE 5.5 and 6 do support them.
SCOPE, COL, and HEADERS are very useful, and supported by most user agents.

G5.2 Complex data tables

The WCAG and Tables

If you use the thead, tfoot and tbody elements, you must use every element.
They should appear in this order: <thead>, <tfoot> and <tbody>, so that browsers can render the foot before receiving all the data. You must use these tags within the table element.
The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML.
Example

<table border = "1">
<thead>
<tr>
<td>This text is in the THEAD</td>
</tr>
</thead>
<tfoot>
<tr>
<td>This text is in the TFOOT</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>This text is in the TBODY</td>
</tr>
</tbody>
</table>

THEAD, TFOOT and TBODY

The WCAG and Tables

5.3 Do not use tables for layout unless the table makes sense when linearized. Otherwise, if the table does not make sense, provide an alternative equivalent (which may be a linearized version). AA
- Note. Once user agents support style sheet positioning, tables should not be used for layout.

fq note:

- Style sheet positioning was supported by Netscape 4.7

G5.3 A last note on layout tables

The WCAG and Tables

5.4 If a table is used for layout, do not use any structural markup for the purpose of visual formatting. AA
- For example, in HTML do not use the TH element to cause the content of a (non-table header) cell to be displayed centered and in bold.
5.5 Provide summaries for tables. AAA
- For example, in HTML, use the "summary" attribute of the TABLE element.

fq note:

- The RNIB "See It Right" campaign audit recommends that summaries are NOT used for layout tables.

G5.4 and 4.5 Structural markup and summaries

The WCAG and Tables

5.6 Provide abbreviations for header labels. AAA
- For example, in HTML, use the "abbr" attribute on the TH element.

G5.6 Abbreviations

Real Data Tables

<caption>PC Cluster Rooms</caption>

<th scope="col" id="header2">Building</th>

<th scope="col" id="header3" abbr="open">Opening Times</th></tr>

<tr>

<td headers="header2">Dover Street</td>

</tr>

<tr>

<td headers="header2">Dover Street</td>

</tr></table>

This would be read by a speech browser as follows:-

Caption: PC Cluster Rooms. Summary: This table lays out the location and opening times of PC Cluster Rooms.
Room: OG10 Building: Dover Street Open: 8.30 dash 6.30
Room: DP3 Building: Dover Street Open: 8.30 dash 6.30

Example

Real Data Tables

<table border="1">
<tr>
<th>Year</th>
<th>Quantity</th>
</tr>
<tr>
<td>2003</td>
<td>50</td>
</tr>
<tr>
<td>2004</td>
<td>100</td>
</tr>
<tr>
<td>Total</td>
<td>150</td>
</tr>

</table>

Full Structural Markup Stage 1

Real Data Tables

<table border="1">
<caption>Total Sales of Thingamajigs</caption>

<thead>
<tr>
<th>Year</th>
<th>Quantity</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>150</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>2003</td>
<td>50</td>
</tr>
<tr>
<td>2004</td>
<td>100</td>
</tr>
</tbody>

</table>

Full Structural Markup Stage 2

Real Data Tables

<table border="1">
<caption>Total Sales of Thingamajigs</caption>

</table>

Full Structural Markup Stage 3

Real Data Tables

<table border="1">
<caption>Total Sales of Thingamajigs</caption>

</table>

Full Structural Markup Stage 4

Table Mark-Up

Layout Tables
- Don't use them layout should be done with CSS positioning
Linearising
- Make sure your data tables linearise properly
Simple Data Tables
- Use TH for the first row and the first column
- Use scope in the TH to identify whether it is a row or a column
Complex Data Tables
- Use id in the TH to give it a unique name
- Use headers in the TD to link it to the relevant TH

Summary