Section 13.6. Accessible Tables


13.6. Accessible Tables

Presenting data in rows and columns is a highly effective device in visual media for adding meaning to data. Consider the simple table example in Figure 13-8.

Figure 13-8. A simple table example


Sighted users can easily trace up a column or across a row to a header cell that explains the data's meaning and context. Blind or severely sight-impaired users do not have this luxury. When using a screen reader or Braille device, the contents of each cell may be read one after another (a process called linearization ). The table in Figure 13-8 might be presented like so: "Planet Diameter measured in earths Orbital period in years Moons Mercury .38 .24 0 Venus .95 .62 0 Jupiter 317.8 11.9 63." It's easy to lose track of the meaning of each statistic for a table as simple as this. For complex data tables, such as those pictured in Figure 13-1, it's nearly impossible.

The (X)HTML specification provides several mechanisms for adding meaning to cell data even when the table is presented non-visually. This section outlines the basics of authoring accessible data tables. For more in-depth tutorials, see these online resources:

  • "Techniques for Accessible HTML Tables" (from Papers on Section 508), by Steve Ferg (www.ferg.org/section508/accessible_tables.html)

  • "Bring on the Tables," by Roger Johansson (www.456BereaStreet.com/archive/200410/bring_on_the_tables/)

  • "Creating Accessible Tables," at WebAIM (www.webaim.org/techniques/tables/2)

13.6.1. Table Metadata

The first step in making a table accessible is to provide descriptions of the table using the caption element and summary attribute.

The caption element introduced earlier in this chapter provides a short descriptive title for the table. Visual browsers display the contents of the caption element above or below the table, as specified by an attribute or style property.

The summary attribute in the table element may provide a more lengthy description of the table. It is analogous to the alt attribute for images. Unlike the caption element, the value of the summary attribute is not rendered by visual browsers.

The summary may give visually impaired users a better understanding of the table's contents and organization that sighted users could understand at a glance. This alleviates the need to read through several rows of data to decide whether a table will be useful. Although the summary is available for longer descriptions, authors are advised to keep summary descriptions clear and succinct and use them only when necessary.

The table in Figure 13-8 might be given the following caption and summary (note that summaries are more useful for tables that are more complex than this one).

     <table summary=" A comparison of major features for each planet in the solar system, relative to  characteristics of the Earth.">      <caption> Solar System Summary</caption>      <tr> (table continues...)  

13.6.2. Table Headers

The most important element in creating accessible data tables is the table header (th). Table headers provide a description or context for the data cells in a column or row. Non-visual user agents rely on the th element for descriptions of each table cell. While it is possible to use styles to make the first row of table cells (td) look like headers (for example, by making them bold and arranging them in shaded boxes), a td element alone will not perform the same function as a th, and important information will be lost.

Here is the same table from the previous figure rewritten with table headers (Figure 13-9). Notice that by default, browsers render headers in bold, centered text, but you can easily change the way they look with CSS properties. By all means, do not avoid using th elements properly just because you don't like the browser's default rendering.

     <table summary="A comparison of major features for each planet in the solar system,  relative to characteristics of the Earth.">     <caption>Solar System Summary</caption>       <tr>         <th>Planet</th>         <th abbr="diameter">Diameter measured in earths</th>         <th abbr="orbit"> Orbital period in years</th>         <th>Moons</th>       </tr>       <tr>         <td>Mercury</td><td>.38</td><td>.24</td><td>0</td>       </tr>       <tr>         <td>Venus</td><td>.95</td><td>.62</td><td>0</td>       </tr>       <tr>         <td>Jupiter</td><td>317.8</td><td>11.9</td><td>63</td>       </tr>     </table> 

Figure 13-9. A table with a caption and table header elements


With headers in place, a screen reader may be configured to read each row of data like this: "Planet: Mercury, Diameter measured in earths: .38, Orbital period in years: .24, Moons: 0," and so on. It is clear how headers alone go a long way toward attaching meaning to the data in each cell.

It is also easy to see how this might be cumbersome, particularly if the header titles are long. The abbr attribute allows authors to provide an alternate version of the header title that may be used instead, as shown in example.

     <th abbr="diameter">Diameter measured in earths</th> 

Instead of repeating "Diameter measured in earths" before each measurement, a screen-reader could say simply "diameter" instead.

13.6.3. Associating Headers with Data

As table structure gets more complex, additional markup is required to keep the associations between table headers and their respective data clear. The remaining attributes for the th element, scope and headers, are used to conceptually attach headers to groups of data cells.

13.6.3.1. Scope

In the simple table shown in Figure 13-9, it is easy to tell that the headers apply to their respective columns of data. In more complex tables, the relationships between headers and data may not be so straightforward. The scope attribute in the th element is used to explicitly declare associations between table headers and the rows, columns, row groups, or column groups in which they appear (using the values row, column, rowgroup, and colgroup, respectively)

The table example in Figure 13-10 has been altered slightly to include table headers for each row.

Figure 13-10. Table with row and column headers


In this case, it is desirable to make it clear that the headers in the left column apply to each data cell in the rows in which they appear. It is helpful to indicate the relationship of the cells with their respective column header as well. This revised markup shows how the scope attribute is used to indicate these relationships.

     <table summary="A comparison of major features for each planet in the solar system,  relative to characteristics of the Earth.">     <caption>Solar System Summary</caption>       <tr>         <td></td>         <th scope="column"abbr="diameter">Diameter measured in earths</th>         <th scope="column" abbr="orbit">Orbital period in years</th>         <th scope="column">Moons</th>       </tr>       <tr>         <th scope="row">Mercury</th>         <td>.38</td>         <td>.24</td>         <td>0</td>       </tr>       <tr>         <th scope="row">Venus</th>         <td>.95</td>         <td>.62</td>         <td>0</td>       </tr>       <tr>         <th scope="row">Jupiter</th>         <td>317.8</td>         <td>11.9</td>         <td>63</td>       </tr>     </table> 

This line from the table markup example extends the description "Mercury" to all the cells in that row. The relationship may be visualized as shown in Figure 13-11.

 <th scope="row">Mercury</th> 

Figure 13-11. A header is associated with a row with the scope attribute


The scope attribute may also be used in a data cell element (td) to apply its content as a label to the remaining cells in its row, column, row group, or column group. This is useful for cells that contain data themselves but also carry meaning about other data cells, such as the planet names in the sample table. If the "Planets" table header were reinserted, the planet names could go back to being regular td elements yet still be associated with each row.

13.6.3.2. ID and headers

In Figure 13-11, it was possible to indicate the scope of the header by drawing a box across the row. The same would be true when applying scope to columns or groups: the scope extends in a rectangle that encompasses the specified table cells.

For very complex tables with spanned and/or nested table headers , the relationships between headers and the data they describe may not fit into neat rectangles. The headers attribute is used to associate data cells with specific table headers by referencing them by name (provided in an id value).

The solar system table has been altered once again to include a (fairly contrived) nested header as shown in Figure 13-12.

Figure 13-12. Table with a nested header


The first step in using this method to associate headers and cells is to give each table header (th) element a name using the id attribute. Then, each td uses the headers attribute to specify the table headers that apply to it. The value may include several header names, separated by spaces, as shown in this example.

     <table  cellpadding="4" summary="A comparison of major features for each planet in the  solar system, relative to the Earth's characteristics.">     <caption>Solar System Summary</caption>       <tr>         <td rowspan="2"></td>         <th colspan="2"  abbr="measurements">Measurements relative              to Earth</th>         <th rowspan="2" >Moons</th>       </tr>       <tr>         <th  abbr="diameter">Diameter measured in earths</th>         <th  abbr="orbit">Orbital period in years</th>       </tr>       <tr>         <th >Mercury</th>         <td headers="mercury measure diameter">.38</td>         <td headers="mercury measure orbit">.24</td>         <td headers="mercury moons">0</td>       </tr>       <tr>         <th >Venus</th>         <td headers="venus measure diameter">.95</td>         <td headers="venus measure orbit">.62</td>         <td headers="venus moons">0</td>       </tr>       <tr>         <th >Jupiter</th>         <td headers="jupiter measure diameter">317.8</td>         <td headers="jupiter measure orbit">11.9</td>         <td headers="jupiter moons">63</td>       </tr>     </table> 

The headers method is complicatedeven for a simple table such as the one in this exampleand should be used only when scope won't adequately do the trick.




Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net