rspec/rules/S5256/html/rule.adoc

Assistive technologies, such as screen readers, use ``++<th>++`` headers to provide some context when users navigates a table. Without it the user gets rapidly lost in the flow of data.


Headers should be properly associated with the corresponding ``++<td>++`` cells by using either a ``++scope++`` attribute or ``++headers++`` and ``++id++`` attributes. See https://www.w3.org/WAI/tutorials/tables/tips/[W3C WAI Web Accessibility Tutorials] for more information.


This rule raises an issue whenever a ``++<table>++`` does not contain any ``++<th>++`` elements.

== Noncompliant Code Example

----
<table> <!-- Noncompliant -->
  <tr>
    <td>Name</td>
    <td>Age</td>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Alice Doe</td>
    <td>54</td>
  </tr>
</table>
----

== Compliant Solution

----
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Age</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>24</td>
  </tr>
  <tr>
    <td>Alice Doe</td>
    <td>54</td>
  </tr>
</table>
----

== Exceptions

No issue will be raised on <table> used for layout purpose, i.e. when it contains a ``++role++`` attribute set to ``++"presentation"++`` or ``++"none"++``. Note that https://www.w3schools.com/html/html_layout.asp[using <table> for layout purpose is a bad practice].


No issue will be raised on <table> containing an ``++aria-hidden++`` attribute set to ``++"true"++``.

== See

* 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/H51[WCAG2, H51] - Using table markup to present tabular information