Creating Accessible Data Tables
This article demonstrates how to code accessible data tables in (X)HTML, enabling visually impaired users who employ assistive technologies to interpret the table data. Two views of a tabular data table are presented and discussed.
- Source Markup - Vertical View: the table markup as written in a source code/text editor
- Source Markup - Linear View: the table markup as an assistive device will interpret it
Source Markup: Vertical View
This is how accessible data table markup appears when written in a text editor. Each element must be correctly opened, closed, and correctly nested.
<table summary="contains accessible tablular data"> <caption>Accessible Data Table</caption> <thead> <tr> <th scope="col">Column 1</th> <th scope="col">Column 2</th> <th scope="col">Column 3</th> </tr> </thead> <tfoot><tr><td colspan="3">End table</td></tr></tfoot> <tbody> <tr> <th scope="row">Row A</th> <td>data</td> <td>data</td> </tr> <tr> <th scope="row">Row B</th> <td>data</td> <td>data</td> </tr> <tr> <th scope="row">Row C</th> <td>data</td> <td>data</td> </tr> <tr> <th scope="row">Row D</th> <td>data</td> <td>data</td> </tr> </tbody> </table>
The table looks as follows when rendered:
|Column 1||Column 2||Column 3|
Defining the markup
Let's break this down and look at what all the different parts of the table mean:
- table element -
- This element starts and ends a data table.
- summary attribute -
This attribute is added to the opening
- It can be acknowledged by a screenreader, but it will not be rendered in a graphical browser view of the data table.
- It is implemented to give a short idea of what is contained within the data table.
- Important: Following web standards and accessibility guidelines, always try to keep your attribute value descriptions as concise as possible.
- caption element -
According to web standards, the
captionelement should accompany all HTML data tables.
Its opening tag comes directly after the opening
When added to your tabular data table markup, it:
- Gives a short descriptive title to the data table
- Is visible in browser view
- Is easily identified by assistive technologies
- Is discoverable by search engines
- table header element -
Not to be confused with the table heading element
<th></th>, this element defines the table header section of the data table.
Its opening tag is placed directly after the
</caption>and directly before the first table row
- table footer element -
- This element defines the footer section of the data table.
- It is an optional addition and can be omitted.
Note: If you use it, it must be placed directly before the table body opening tag
- colspan attribute -
This attribute is added to the opening table data element tag
<td colspan="">, which is part of the table footer element section.
- Enter the number of columns you want to span between the quotation marks.
- It enables the table footer to safely span all columns without a break, eliminating the vertical column lines.
- table body element -
- This element defines the body area of the table and surrounds its contents.
It comes directly after the closing table footer element
</tfoot>, and before the opening table row element
- table row element -
- This element marks the start and end of a data table row.
- table heading element -
- This element identifies our data table rows and columns.
You can now apply the
scope=""in the opening table heading tag
<th scope="">to define our rows and columns.
- scope attribute -
You can use the
scopeattribute to declare a table heading element
<th></th>either as a row or a column.
It is inserted in the opening table heading element tag, for example
- table data element -
- This element contains tabular data.
- It is located at the intersection of a column and row.
Source Markup: Linear View
Markup is authored in a vertical manner (as in the previous code block - Source Markup: Vertical View). The following tabular data table illustrates markup elements and attributes in linear order, as rendered by a user agent.
|<table summary="Contains accessible tablular data">|
|<caption>Accessible Tabular Data Table</caption>|
|<thead><tr><th scope="col">Column 1</th>||<th scope="col">Column 2</th>||<th scope="col">Column 3</th></tr></thead>|
|<tfoot><tr><td colspan="3"> End table</td></tr></tfoot>|
|<tbody><tr><th scope="row">Row A</th>||<td>data</td>||<td>data</td></tr>|
|<tr><th scope="row">Row B</th>||<td>data</td>||<td>data</td></tr>|
|<tr><th scope="row">Row C</th>||<td>data</td>||<td>data</td></tr>|
|<tr><th scope="row">Row D</th>||<td>data</td>||<td>data</td></tr></tbody>|
Assistive Technology linearization
Now that we've seen the source markup in linear view, lets look at how an Assistive Technology handles it. These devices read a table starting with the first cell in the first row (1, 1), and proceed horizontally to the end of that row (1, 3). It then moves to the first cell in the next row and proceeds to the end of that row, and so on until the end of the table ... although in this case (2,1) is defined as the footer, so it moves on to (3,1) and reads (2,1) last. Modern ATs will read all data contained within a cell. Older ATs used to read just the first line of a cell and then move to the next cell. This produces major confusion for a user if a cell contains data broken over more than one line. Assigning the coordinates discussed above, an assistive device gives cognitive meaning to the data in the cell.
|1, 1||1, 2||1, 3|
|3, 1||3, 2||3, 3|
|4, 1||4, 2||4, 3|
|5, 1||5, 2||5, 3|
|6, 1||6, 2||6, 3|
This is a short guide to making HTML data tables accessible. I believe that the most important point of this exercise is to enable tabular data to be understood by all users. If you're dealing with complex tabular data tables, see if there is a logical way to break them up into simpler units. Again, we're striving for a quick and easy understanding of the data. Please remember that the foundation of any accessible web page is code written to current web standards.
This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.