IT Accessibility Curriculum and Resources

Standard 7:
Tables

• Standard 7.1 — All tables are required to have a SUMMARYattribute.
  

  • Comments: The summaryattribute is used to give a general overview of the table contents, purpose and structure for screen readers translating the table into speech or Braille.

  • HTML Elements Affected: <table>

  • Code Example:  <table width="100%" summary="this table displays columns of action, keystroke and comments">

• Standard 7.2 — Tables used solely for formatting will specify that purpose using a summary attribute (e.g., summary="format"or summary="for layout only".
  

  • Comments: Using this method allows the non-visual user to know that the table is not portraying relationships between/among the information contained within it, that the table has been used solely for visual formatting.

  • HTML Elements Affected:  <table>
  • Code Example:   <table summary="for layout only">
• Standard 7.3 — Tables with tabular data will use the scope attribute to identify both horizontal and vertical headings.>
  

  • Comments: The scope attribute specifies the set of data cells to which the current header cell applies.

    The scope attribute may be used in conjunction with or in lieu of the id attribute, or instead of the headers attribute, particularly for simple tables. When specified, this attribute must have one of the following values:

    • row:  The current cell provides header information for the rest of the row that contains it. (see also the section on table directionality).
    • col:  The current cell provides header information for the rest of the column that contains it.
    • rowgroup:  The header cell provides header information for the rest of the row group that contains it.
    • colgroup:  The header cell provides header information for the rest of the column group that contains it.
  • HTML Elements Affected: <td>, <th>
    

    Code Example:
    <table summary="for layout only.">
<tr>
<th scope="col">Action</th>
<th scope="col">Keystroke</th>
<th scope="col">Comments</th>
</tr>
<tr>
<td>Play</td>
<td>Space bar</td>
<td>>To play</td>
</tr>
</table>

    Link to rendering of code example

• Standard 7.4 — Row and column headers will be identified for data tables.
  

  • Comments: Use the <th>element to indicate row and column headers. If you are working in a complex data table, also include the idattribute with the headersattribute to provide context for each table cell.

  • HTML Elements Affected: <td>, <th>
  • Code Example:
    <table width="100%" style="border-style:solid; border-width:1px; " SUMMARY="CSEA Salary Schedule effective April 2, 2003. 13 columns and 6 rows (includes 1 header row).">
<caption>CSEA Salary Schedule Effective April 2, 2003</caption>
<tr valign="bottom">
<th scope="col" ID="c1">SG</th>
<th scope="col" ID="c2">HR</th>
<th scope="col" ID="c3">STEP 1</th>
<th scope="col" ID="c4">STEP 2</th>
<th scope="col" ID="c5">STEP 3</th>
<th scope="col" ID="c6">STEP 4</th>
<th scope="col" ID="c7">STEP 5</th>
<th scope="col" ID="c8">STEP 6</th>
<th scope="col" ID="c9">JR</th>
<th scope="col" ID="c10">INCR</th>
<th scope="col" ID="c11">LS1</th>
<th scope="col" ID="c12">LS2</th>
<th scope="col" ID="c13">LONG<br>INCR</th>
</tr>
<tr>
<th scope="row" align="right" id="r1" headers="c1">1</th>
<td align="right" headers="r1 c2">17141</td>
<td align="right" headers="r1 c3">17744</td>
<td align="right" headers="r1 c4">18347</td>
<td align="right" headers="r1 c5">18950</td>
<td align="right" headers="r1 c6">19553</td>
<td align="right" headers="r1 c7">20156</td>
<td align="right" headers="r1 c8">20759</td>
<td align="right" headers="r1 c9">21362</td>
<td align="right" headers="r1 c10">603</td>
<td align="right" headers="r1 c11">22112</td>
<td align="right" headers="r1 c12">22862</td>
<td align="right" headers="r1 c13">750</td>
</tr>
<tr>
<th scope="row" align="right" id="r2" headers="c1">2</th>
<td align="right" headers="r2 c2">17825</td>
<td align="right" headers="r2 c3">18457</td>
<td align="right" headers="r2 c4">19089</td>
<td align="right" headers="r2 c5">19721</td>
<td align="right" headers="r2 c6">20353</td>
<td align="right" headers="r2 c7">20985</td>
<td align="right" headers="r2 c8">21617</td>
<td align="right" headers="r2 c9">22249</td>
<td align="right" headers="r2 c10">632</td>
<td align="right" headers="r2 c11">22999</td>
<td align="right" headers="r2 c12">23749</td>
<td align="right" headers="r2 c13">750</td>
</tr>
<tr>
<th scope="row" align="right" id="r3" headers="c1">3</th>
<td align="right" headers="r3 c2">18751</td>
<td align="right" headers="r3 c3">19412</td>
<td align="right" headers="r3 c4">20073</td>
<td align="right" headers="r3 c5">20734</td>
<td align="right" headers="r3 c6">21395</td>
<td align="right" headers="r3 c7">22056</td>
<td align="right" headers="r3 c8">22717</td>
<td align="right" headers="r3 c9">23378</td>
<td align="right" headers="r3 c10">661</td>
<td align="right" headers="r3 c11">24128</td>
<td align="right" headers="r3 c12">24878</td>
<td align="right" headers="r3 c13">750</td>
</tr>
<tr>
<th scope="row" align="right" id="r4" headers="c1">4</th>
<td align="right" headers="r4 c2">19602</td>
<td align="right" headers="r4 c3">20302</td>
<td align="right" headers="r4 c4">21002</td>
<td align="right" headers="r4 c5">21702</td>
<td align="right" headers="r4 c6">22402</td>
<td align="right" headers="r4 c7">23102</td>
<td align="right" headers="r4 c8">23802</td>
<td align="right" headers="r4 c9">24502</td>
<td align="right" headers="r4 c10">700</td>
<td align="right" headers="r4 c11">25252</td>
<td align="right" headers="r4 c12">26002</td>
<td align="right" headers="r4 c13">750</td>
</tr>
<tr>
<th scope="row" align="right" id="r5" headers="c1">5</th>
<td align="right" headers="r5 c2">20575</td>
<td align="right" headers="r5 c3">21308</td>
<td align="right" headers="r5 c4">22041</td>
<td align="right" headers="r5 c5">22774</td>
<td align="right" headers="r5 c6">23507</td>
<td align="right" headers="r5 c7">24240</td>
<td align="right" headers="r5 c8">24973</td>
<td align="right" headers="r5 c9">25706</td>
<td align="right" headers="r5 c10">733</td>
<td align="right" headers="r5 c11">26456</td>
<td align="right" headers="r5 c12">27206</td>
<td align="right" headers="r5 c13">750</td>
</tr>
</table>


    Link to rendering of code example

Back to the Standard Examples