HTML Tables

For data tables to be accessible, they must be programmatically parsable by assistive technologies like screen readers. This is achieved by using specific HTML elements to define the table's structure and the relationships between header and data cells.

A basic, accessible table must include the following components:

• <caption>: Defines the table's title. It is the primary identifier used by screen readers to announce the table's purpose.
• <thead>: A container for the table's column headers.
• <tbody>: A container for the table's data rows.
• <th> with scope: Header cells. The scope attribute is critical for accessibility.
  • scope="col" specifies that the cell is a header for a column.
  • scope="row" specifies that the cell is a header for a row.

The following code demonstrates a simple, accessible table structure incorporating these elements.

<table>
  <caption>Quarterly Sales Data</caption>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Q1 Sales</th>
      <th scope="col">Q2 Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Widget A</th>
      <td>$150,000</td>
      <td>$175,000</td>
    </tr>
    <tr>
      <th scope="row">Widget B</th>
      <td>$200,000</td>
      <td>$220,000</td>
    </tr>
  </tbody>
</table>

While minor variations exist, this fundamental structure provides the necessary semantic information for assistive technologies to correctly interpret and navigate table data.