Creating Accessible Data Tables

By Frank M. Palinkas

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.

1. Source Markup - Vertical View: the table markup as written in a source code/text editor
2. 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:

Defining the markup

Let's break this down and look at what all the different parts of the table mean:

table element - <table></table>

This element starts and ends a data table.

summary attribute - summary=""

This attribute is added to the opening table element.

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 - <caption></caption>

According to web standards, the caption element should accompany all HTML data tables.

Its opening tag comes directly after the opening <table> tag.

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 - <thead></thead>

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 closing tag </caption> and directly before the first table row <tr> opening tag.

table footer element - <tfoot></tfoot>

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 <tbody>.

colspan attribute - colspan=""

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 - <tbody></tbody>

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 <tr>.

table row element - <tr></tr>

This element marks the start and end of a data table row.

table heading element - <th></th>

This element identifies our data table rows and columns.

You can now apply the scope attribute scope="" in the opening table heading tag <th scope=""> to define our rows and columns.

scope attribute - scope=""

You can use the scope attribute 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 <th scope="row"></th>.

table data element - <td></td>

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.

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.

Summary

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.

Frank M. Palinkas

Frank is an American working in Sunnyvale, California with Google Motorola Mobility, Inc. as a Senior Technical Writer, Web Standards & Accessibility Designer.

He authors all markup, presentation, behavior code and content using (X)HTML, HTML5, CSS, and Unobtrusive DOM/JavaScript. His technical writing incorporates web standards, accessibility, and semantics. Frank enjoys creating tutorials which are offered free of charge to the Help Authoring and Technical Writing community.

He is happily married to his wife Wanda (Lighterian Reiki Master/Instructor and Hand Embroidery Instructor), and they have two sons, Gregory (MCSD and Computer Animator) and Andre (Sound and Recording Engineer). Frank and Wanda live in Sunnyvale, California, USA.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.