The topic you requested is included in another documentation set. For convenience, it's displayed below. Choose Switch to see the topic in its original location.

Making tables accessible

[This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation]

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.

	Meals	Hotels	Transport	Subtotals
San Jose	65.02	224.00	90.00	379.02
San Diego	80.50	250.00	80.00	410.50
Los Angeles	74.00	300.00	100.00	474.00
Totals	219.52	774.00	270.00	1,263.52

HTML


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

	Meals	Hotels	Transport	Subtotals
San Jose
25-Aug-97	37.74	112.00	45.00	194.74
26-Aug-97	27.28	112.00	45.00	184.28
...
Totals	219.52	774.00	270.00	1,263.52

HTML


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

Making tables accessible

Related topics