Tables, more than just rows and cells

Structuring tables correctly is an important step in developing an accessible website but sadly it is rarely achieved. Many website developers do not realise the importance of creating accessible tables in their designs and, time after time, I find myself auditing pages with tables that fail due to lack of basic table structure.

With this in mind, I am hoping to pass on some quick, simple tips for creating tables. This is by no means an extensive list of table attributes, but those which are required to make a simple table accessible for all users.

Before we start, let me point out that tables should not be used for layout purposes and doing so, would result in your website failing to meet the Web Content Accessibility Guidelines. Browser support used to make creating table-less designs difficult to achieve, but it is now perfectly feasible. Therefore tables should only be used for tabular information.

The foundations of an accessible table

You will be pleased to hear that creating an accessible table is a simple process that requires very little extra coding. Assuming you already know the basics for creating a table, using rows and cells, there are only two further techniques you will need to learn in order to make your tables accessible.

Summary Attribute

This attribute, applied in the <table> element, gives a summary of the table for screen readers and text-only browser users. For example:

<table summary="The most popular browsers according to www.netapplications.com include IE 7, IE 6, Firefox 2 and Safari 3">

A summary may be used to describe how the table fits into the context of the current document.

 

Table header cells

A table header cell <th> is exactly what it sounds like, a tag that identifies a header of the table. These may appear horizontally, vertically or both depending on the table structure and content. Typically, most browsers will render these cells in bold by default, but the <th> tag can be styled in any way you wish.

At this point, it is also worth mentioning the <caption> element. This is a visible-to-all label, which most browsers will display above the table. Although this element is not required, it is easily added and can provide additional information to the user.

Implementing a table should be second nature for developers

Very little extra coding is required and the end result will greatly improve your table's structure and accessibility:

<table summary="The most popular browsers according to
www.netapplications.com showing IE 7 leading slightly over IE 6.
Firefox and Safari combined form under 20% of the market share.">
    <caption>Browser Market Share for December 2007</caption>
    <tr>
        <th>>Position</th>
        <th>Browser version</th>
        <th>Total market share</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Internet Explorer 7</td>
        <td>40.6%</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Internet Explorer 6</td>
        <td>35.2%</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Firefox 2.0</td>
        <td>15.8%</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Safari 3.0</td>
        <td>3.7%</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Safari 41</td>
        <td>1.4%</td>
    </tr>
    <tr>
        <td>6</td>
        <td>Opera 9</td>
        <td>0.6%</td>
    </tr>
    <tr>
        <td>7</td>
        <td>Other</td>
        <td>2.7%</td>
    </tr>
    <tr>
        <td colspan="3">Source: <a href="http://www.netapplications.com">www.netapplications.com</a></td>
    </tr>
</table>

It may seem like a simple piece of coding and visually there is little difference with a table that does not have a summary attribute and table headers. However it is what lies beneath the surface of a table that is important to many users. These two techniques can greatly improve the accessibility and understanding of content, within the table for screen reader users.

Without these simple additions being put into place the content and its significance can be lost in a sea of meaningless names and values.

The making of a grand table

Although not always necessary, it is nice to come across tables that have been constructed using the <thead>, <tfoot> and <tbody> elements as well as those already discussed. Structuring a table in this fashion is normally reserved for large tables with multiple headings, such as the Broads Authority Tide table. It can be an effective way to break down the header, footer and main body into manageable groups.

The code below should help you to understand the concept of a table structure using these elements:

<table summary="The most popular browsers according to
www.netapplications.com showing IE 7 leading slightly over IE 6.
Firefox and Safari combined form under 20% of the market share.">
    <caption>Browser Market Share for December 2007</caption>
    <colgroup>
        <col/>
        <col/>
        <col/>
    </colgroup>
    <thead>
        <tr>
            <th>Position</th>
            <th>Browser version</th>
            <th>Total market share</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="3">Source:<a href="http://www.netapplications.com">www.netapplications.com</a></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>Internet Explorer 7</td>
            <td>40.6%</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Internet Explorer 6</td>
            <td>35.2%</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Firefox 2.0</td>
            <td>15.8%</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Safari 3.0</td>
            <td>3.7%</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Safari 41</td>
            <td>1.4%</td>
        </tr>
        <tr>
            <td>6</td>
            <td>Opera 9</td>
            <td>0.6%</td>
        </tr>
        <tr>
            <td>7</td>
            <td>Other</td>
            <td>2.7%</td>
        </tr>
    </tbody>
</table>

Using this method has several benefits such as being able to independently style the head, foot and body without adding lots of classes. However they can often become very complex when attributes such as scope, header and id are added; therefore it is often better to try and simplify the table, rather than use multiple layers of headings.

Conclusion

Congratulations! If you have structured your tables using the methods above correctly, you are well on the way to creating Triple-A accessible tables in line with the Web Content Accessibility Guidelines.

Although there are other elements and attributes that can be used in a table, those detailed in this article are sufficient to meet the accessibility requirements of the W3C guidelines.

Despite these simple steps, developers are still structuring tables incorrectly. We can but hope developers will come to realise the importance of using the techniques outlined in this article and code accessible tables in the future.

Add a comment

Fields marked with an asterisk (*) are mandatory.