Data tables may only be used to present tabular data. Data tables must include table headers, which are associated with the correct table cells. Descriptive text for data tables must be programmatically associated.
Tabular data is content organized into rows and columns. Specifically, rows usually represent one item or thing, and columns represent attributes or qualities for each row item. Any tabular data must utilize a data table.
Data tables, as far as accessibility testing is concerned, are tables where table headers are utilized.
Locating data tables can be achieved through Siteimprove, with the "Find Data Tables" policy in the Policy or Accessibility > Accessibility Policies menus.
For each instance of tabular data on the page
Ensure that the data is organized as a data table.
Ideally, this means using a <table> tag, with <th> tags for headers.
Although HIGHLY NOT recommended, it is also permissible to utilize ARIA on non table tags, but careful consideration must be made to ensure ALL required aria roles are applied and that assistive technology can interact with the table similarly to any other native HTML table. (Read: MDN reference)
Ensure that table headers exist on at least one axis
Ensure that table headers where you have multiple axes are properly scoped (using the scope attribute on the <th> tag)
In any scenario where a table has a description available to the user, that description must be associated with the table. (For instance any text that is used as a "title" for the table, or a short description of the table's purpose.)
Text used to entitle the table should be a <caption> tag.
Text used to describe the table's purpose should be a <summary> tag.
<caption> and <summary> tags are not mandatory where the table's purpose can be understood from the existing table headers without needing additional context.
