We detected content that is missing tabular data markup

We detected content that is missing tabular data markup — rule summary

Field	Value
Rule code	Manual_Html_Table_Structure_Missing
WCAG conformance level	A
WCAG success criterion	4.1.2 Name, Role, Value
Must be fixed at source	No

Description

We detected content that appears to be tabular data but lacks proper HTML table markup. When data is presented in a grid-like format but does not use semantic table elements (table, table row, etc), screen reader users cannot navigate the relationships between data cells or understand the structure of the information. Proper table markup allows assistive technologies to announce row and column headers, enabling users to understand how data points relate to each other.

How to fix

Replace non-semantic layouts (like divs styled as grids) with proper HTML table markup when presenting tabular data. Use <table> for the container, <tr> for rows, <th> for headers with appropriate scope attributes, and <td> for data cells. Add appropriate ARIA attributes for complex tables.

<table>
  <caption>Monthly Sales Data</caption>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">January</th>
      <th scope="col">February</th>
      <th scope="col">March</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Widget A</th>
      <td>$1,234</td>
      <td>$2,345</td>
      <td>$3,456</td>
    </tr>
    <tr>
      <th scope="row">Widget B</th>
      <td>$4,567</td>
      <td>$5,678</td>
      <td>$6,789</td>
    </tr>
  </tbody>
</table>

For responsive designs, consider using CSS techniques that maintain the table semantics while adapting to different screen sizes, rather than not incorporating table markup entirely. Avoid using <div> elements styled with CSS grid or flexbox as a replacement for proper table markup when presenting tabular data.