WEB DESIGN GARAGE [Electronic resources]

Marc Campbell

نسخه متنی -صفحه : 175/ 114

Improving Accessibility

Using the right tags goes a long way toward making your data tables more accessible. You can go even further by adding some finishing touches to your markup.

FAQ

Do these accessibility tips work in today's browsers?

Not really. File these suggestions in the Forward Compatibility category. The most recent versions of the major browsers don't use this extra markup, and current accessibility tools don't, either. Use these techniques to make your data tables ready for the next generation of Web-browsing technologies.

If the text in your table headers is excessively wordy:

<th>Intensity of the Kenneth Frequency</th>
<th>Fluctuation in Beta Transmission</th>
<th>Margin of Error</th>

you can add your own abbreviations in the abbr attribute of the th tag. Screen readers substitute these abbreviations for the full phrase, which cuts down on the monotony of listening to the data table read aloud.

<th abbr="Intensity">Intensity of the Kenneth Frequency</th>
<th abbr="Fluctuation">Fluctuation in Beta Transmission</th>
<th abbr="Error">Margin of Error</th>

[View full width]

<table border="1" rules="groups"> <caption>Table 3: Intensity of the Kenneth Frequency and Fluctuations in Beta Transmission</caption> <col width="300" align="center"> <col width="300" align="center"> <col width="160" align="center"> <thead> <tr> <th id="intensity" abbr="Intensity">Intensity of the Kenneth Frequency</th> <th id="fluctuation" abbr="Fluctuation">Fluctuations in Beta Transmission</th> <th id="error" abbr="Error">Margin of Error</th> </tr> </thead>  <tbody> <tr> <td headers="intensity">1</td> <td headers="fluctuation">90</td> <td headers="error">6%</td> </tr> <tr> <td headers="intensity">2</td> <td headers="fluctuation">128</td> <td headers="error">35%</td> </tr> <tr> <td headers="intensity">3</td> <td headers="fluctuation">2726</td> <td headers="error">32%</td> </tr> <tr> <td headers="intensity">4</td> <td headers="fluctuation">263443</td> <td headers="error">32%</td> </tr> <tr> <td headers="intensity">5</td> <td headers="fluctuation">2</td> <td headers="error">98%</td> </tr> </tbody> </table>

TIP

The IDs of all tags on a page need to be unique. Don't use the same ID for another header tag or any other HTML element on the page.

For your viewing pleasure, this table appears in Figure 56.10.

Figure 56.10. The browser doesn't display a data table any differently when you specify id and headers attributes, but this extra markup will make a difference with the screen readers of the future.

[View full size image]

Another way to improve the accessibility of your data table is to group cells into categories with the axis attribute. Your category names can be anythingjust use the names consistently, as in the following example, where all intensity cells belong to the axis intensities, all fluctuation cells belong to the axis fluctuations, and all error cells belong to the axis errormargins.

TIP

If the table cell belongs to two or more headers, separate the header IDs with spaces, like this:

<td headers="firstheader secondheader thirdheader fourthheader">

[View full width]<table border="1" rules="rows">
<caption>Table 4: Intensities of the Kenneth and Bradley Frequencies and Fluctuations in
 Beta Transmission</caption>
<col width="150">
<colgroup span="3" width="150" align="center">
<thead>
<tr>
<th>&nbsp;</th>
<th id="intensity" abbr="Intensity" axis="intensities">Intensity</th>
<th id="fluctuation" abbr="Fluctuation" axis="fluctuations">Fluctuations in Beta
 Transmission</th>
<th id="error" abbr="Error" axis="errormargins">Margin of Error</th>
</tr>
</thead>
<tbody>
<tr>
<th id="kenneth" rowspan="5" abbr="Kenneth">Kenneth Frequency</th>
<td headers="intensity kenneth" axis="intensities">1</td>
<td headers="fluctuation kenneth" axis="fluctuations">90</td>
<td headers="error kenneth" axis="errormargins">6%</td>
</tr>
<tr>
<td headers="intensity kenneth" axis="intensities">2</td>
<td headers="fluctuation kenneth" axis="fluctuations">128</td>
<td headers="error kenneth" axis="errormargins">35%</td>
</tr>
<tr>
<td headers="intensity kenneth" axis="intensities">3</td>
<td headers="fluctuation kenneth" axis="fluctuations">2726</td>
<td headers="error kenneth" axis="errormargins">32%</td>
</tr>
<tr>
      <td headers="intensity kenneth" axis="intensities">4</td>
<td headers="fluctuation kenneth" axis="fluctuations">263443</td>
<td headers="error kenneth" axis="errormargins">32%</td>
</tr>
<tr>
<td headers="intensity kenneth" axis="intensities">5</td>
<td headers="fluctuation kenneth" axis="fluctuations">2</td>
<td headers="error kenneth" axis="errormargins">98%</td>
</tr>
</tbody>
<tbody>
<tr>
<th id="bradley" rowspan="5" abbr="Bradley">Bradley Frequency</th>
<td headers="intensity bradley" axis="intensities">1</td>
<td headers="fluctuation bradley" axis="fluctuations">4</td>
<td headers="error bradley" axis="errormargins">73%</td>
</tr>
<tr>
<td headers="intensity bradley" axis="intensities">2</td>
<td headers="fluctuation bradley" axis="fluctuations">45</td>
<td headers="error bradley" axis="errormargins">35%</td>
</tr>
<tr>
<td headers="intensity bradley" axis="intensities">3</td>
<td headers="fluctuation bradley" axis="fluctuations">356</td>
<td headers="error bradley" axis="errormargins">12%</td>
</tr>
<tr>
<td headers="intensity bradley" axis="intensities">4</td>
<td headers="fluctuation bradley" axis="fluctuations">32</td>
<td headers="error bradley" axis="errormargins">11%</td>
</tr>
<tr>
<td headers="intensity bradley" axis="intensities">5</td>
<td headers="fluctuation bradley" axis="fluctuations">12</td>
<td headers="error bradley" axis="errormargins">2%</td>
</tr>
</tbody>
</table>

This table appears in Figure 56.11.

Figure 56.11. Grouping cells into axis categories doesn't affect the appearance of the data table in the browser, but the screen readers of the future will use the axis names to better understand the layout of your table.

[View full size image]