Adding Accessibility Features to a Data Table

There are a range of features that can be added to data tables to make them more accessible.

The summary attribute shown in Listing 14.2 should be used on complex data tables because it provides a clear description of what the table presents. It does not display on screens of current (standards-compliant) web browsers, but it can display on other web-browsing devices such as handhelds, cell phones, and so forth. The summary attribute is used as an orientation for people who use nonvisual devices.

Listing 14.2. HTML Code Showing summary

<table summary ="Table of screws, Flat nails, Dyna-bolts and Spring washers, in kilos"> 

A caption should be included with any data table. It provides a brief description of the table's contents. Unlike the summary, the caption is displayed on the screenusually centered above the table. The caption should appear directly after the opening table tag as shown in Listing 14.3.

Listing 14.3. HTML Code Showing caption

<caption>     Pricing for threaded screws, flat nails, dyna-bolts and spring washers </caption> 

The <th> element, shown in Listing 14.4, should be used to define any row or column heading within a data table. It is used to create a relationship between <th> and <td> elements, which is important for nonvisual devices.

Listing 14.4. HTML Code Showing <th> Elements

<th>Item</th> <th>Threaded screws </th> <th>Flat nails</th> <th>Dyna-bolts </th> <th>Spring washers</th> 

The <thead>, <tbody>, and <tfoot> elements shown in Listing 14.5 are used to group rows in tables. The <thead> and <tfoot> should contain information about the table's columns and the <tbody> should contain the table data.

Listing 14.5. HTML Showing <thead> and <tbody> Elements

<thead>     <tr>         <th>Item</th>         <th>Threaded screws </th>         <th>Flat nails</th>         <th>Dyna-bolts </th>         <th>Spring washers</th>     </tr> </thead> <tbody>     <tr>         <th>1 kg</th>         <td>$2.50</td>         <td>$3.50</td>         <td>$4.50</td>         <td>$2.50</td>     </tr> </tbody> 

The abbr attribute, shown in Listing 14.6, is used to provide an abbreviated form of the relevant cell's contents. The abbr attribute is important for people who use screen readers and may have to hear a cell's content read out loud repeatedly.

Listing 14.6. HTML Code Showing abbr Attributes

<tr>     <th>Item</th>     <th abbr="screws">Threaded screws</th>     <th abbr="nails">Flat nails</th>     <th abbr="bolts">Dyna-bolts</th>     <th abbr="washers">Spring washers</th> </tr> 

headers and ids are used to tie a table's data cells with their appropriate header. Each header must be given a unique id. The headers attribute is then added to each <td> element as shown in Listing 14.7.

Listing 14.7. HTML Code Showing headers and ids

<table summary="Table of screws, Flat nails, Dyna-bolts and Spring washers, in kilos">     <caption>         Pricing for threaded screws, flat nails, dyna-bolts and spring washers     </caption>     <thead>         <tr>             <th>Item</th>             <th id="screws" abbr="screws">Threaded screws</th>             <th id="nails" abbr="nails">Flat nails</th>             <th id="bolts" abbr="bolts">Dyna-bolts</th>             <th id="washers" abbr="washers">Spring             washers</th>         </tr>     </thead>     <tbody>         <tr>             <th id="one">1 kg</th>             <td headers="screws one">$2.50</td>             <td headers="nails one">$3.50</td>             <td headers="bolts one">$4.50</td>             <td headers="washers one">$2.50</td>         </tr>         <tr>             <th id="two">2kg</th>             <td headers="screws two">$3.00</td>             <td headers="nails two">$4.00</td>             <td headers="bolts two">$5.00</td>             <td headers="washers two">$3.00</td>         </tr>         <tr>             <th id="three">3kg</th>             <td headers="screws three">$3.50</td>             <td headers="nails three">$4.50</td>             <td headers="bolts three">$5.50</td>             <td headers="washers three">$3.50</td>         </tr>         <tr>             <th id="four">4kg</th>             <td headers="screws four">$4.00</td>             <td headers="nails four">$5.00</td>             <td headers="bolts four">$6.00</td>             <td headers="washers four">$4.00</td>         </tr>     </tbody> </table>