Making tables accessible

Applies to Windows and Windows Phone

The main purpose of the table tag is to represent data that has more than one dimension. In addition, the table tag is often used for page layout, although that is no longer recommended.

For tables that represent multidimensional data, it is important to provide enough accessibility information to help users understand the data. The accessibility information includes the following.

  • An accessible name provided by a caption tag in the table.
  • An accessible description provided by the summary attribute.
  • Optionally, table headers that use th tags with the scope and headers attributes, as described later in this topic.

The following example shows a table followed by the HTML code that created it.

MealsHotelsTransportSubtotals
San Jose65.02224.0090.00379.02
San Diego80.50250.0080.00410.50
Los Angeles74.00300.00100.00474.00
Totals219.52774.00270.001,263.52

 


<p id="tableDesc">This table describes the travel expenses broken by ...</p>
<table border="1" aria-describedby="tableDesc">
   <caption>Travel Expense Report</caption>
   <thead>
     <tr>
       <th></th>
       <th>Meals</th>
       <th>Hotels</th>
       <th>Transport</th>
       <th>Subtotals</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <th>San Jose</th>
       <td>65.02</td>
       <td>224.00</td>
       <td>90.00</td>
       <td>379.02</td>
     </tr>
     ...
   </tbody>
</table>

Use the scope and headers attributes to better define the relationship between cells and headers. Use the scope attribute in a th tag to further define the purpose of the header. Use the headers attribute in corresponding td tags in complex tables if multiple headers apply to a single cell.

MealsHotelsTransportSubtotals
San Jose
25-Aug-9737.74112.0045.00194.74
26-Aug-9727.28112.0045.00184.28
...
Totals219.52774.00270.001,263.52

 


<table border="1">
   <caption>Travel Expense Report</caption>
   <thead>
      <tr>
         <th></th>
         <th id="c2">Meals</th>
         <th id="c3">Hotels</th>
         <th id="c4">Transport</th>
         <th id="c5">Subtotals</td>
      </tr>
   </thead>
   <tbody>
	...
      <tr><td id="r2" colspan="5">San Jose</td></tr>
      <tr>
         <td id="r3" >25-Aug-97</td>
         <td headers="c2 r2 r3">37.74</td>
         <td headers="c3 r2 r3">112.00</td>
         <td headers="c4 r2 r3">45.00</td>
         <td headers="c5 r2 r3">1,263.52</td>
      </tr>
	...
   </tbody>
</table>

Note  The platform and Narrator do not expose the headers attribute, but some third-party screen readers or assistive technology tools might use this information by looking directly into the Document Object Model (DOM).

Related topics

Meeting basic accessibility requirements

 

 

Show:
© 2014 Microsoft