Associating ``++<table>++`` headers, i.e. ``++<th>++`` elements, with their ``++<td>++`` cells enables screen readers to announce the header prior to the data. This considerably increases the accessibility of tables to visually impaired users.
There are two ways of doing it:
* Adding a ``++scope++`` attribute to ``++<th>++`` headers.
* Adding an ``++id++`` attribute to ``++<th>++`` headers and a ``++headers++`` attribute to every ``++<td>++`` element.
It is recommended to add ``++scope++`` attributes to ``++<th>++`` headers whenever possible. Use ``++<th id="...">++`` and ``++<td headers="...">++`` only when ``++<th scope="...">++`` is not capable of associating cells to their headers. This happens for very complex tables which have headers splitting the data in multiple subtables. Seehttps://www.w3.org/WAI/tutorials/tables/tips/[W3C WAIWeb Accessibility Tutorials]for more information.
Note that complex tables can often be split into multiple smaller tables, which improves the user experience.
This rule raises an issue when a ``++<th>++`` element has neither ``++id++`` nor ``++scope++`` attributes set.
This rule is not applied in case of simple tables.
Tables are considered as such when the headers are either all in the first row, or all in the first column. The two conditions must not apply together.
* https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0#qr-content-structure-separation-programmatic[WCAG2, 1.3.1]-Info and Relationships
* https://www.w3.org/TR/WCAG20-TECHS/html.html#H43[WCAG2, H43] - Using id and headers attributes to associate data cells with header cells in data tables
