WEB DESIGN GARAGE [Electronic resources] نسخه متنی

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>
<!-- This table doesn't have a foot section, which is completely fine. You don't need to
specify every possible group in every table. Just include the ones you need. -->
<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>

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

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.

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