Data tables include semantic markup

A data table with <td> elements in the header row instead of <th> elements loses its entire semantic structure for screen readers. Without <th scope="col"> headers, screen readers announce cell content without any column or row context — a user navigating a pricing comparison table hears '49, 99, 199' with no indication of which tier each price belongs to. WCAG 2.2 SC 1.3.1 (Info and Relationships) requires that relationships conveyed visually (like column header to data cell) be available programmatically. Section 508 2018 Refresh 502.3.5 covers information and relationships. Complex tables with both row and column headers require scope="col", scope="row", and in multi-header scenarios, headers attributes on data cells referencing multiple id values.

Replace <td> header rows with <th> elements carrying scope attributes. Add a <caption> describing the table's content. In React/TSX components that render tables:

<table>
  <caption>Monthly subscription pricing by plan</caption>
  <thead>
    <tr>
      <th scope="col">Plan</th>
      <th scope="col">Price / month</th>
      <th scope="col">Storage</th>
      <th scope="col">Users</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Starter</th>  {/* Row header */}
      <td>$9</td>
      <td>10 GB</td>
      <td>3</td>
    </tr>
    <tr>
      <th scope="row">Pro</th>
      <td>$29</td>
      <td>100 GB</td>
      <td>Unlimited</td>
    </tr>
  </tbody>
</table>

For complex tables where a cell is described by both a column and a row header, use id on each header and headers on the data cell:

<th id="q1" scope="col">Q1</th>
<th id="revenue" scope="row">Revenue</th>
<td headers="q1 revenue">$120,000</td>

Search for <table> elements in your component library. Ensure data tables (src/components/ui/table.tsx or similar) emit <th> with scope in <thead> rows.