rspec/rules/S1102/html/rule.adoc

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. See https://www.w3.org/WAI/tutorials/tables/tips/[W3C WAI Web 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.


== Noncompliant Code Example

----
<table border="1">
  <caption>Contact Information</caption>
  <tr>
    <td></td>
    <th>Name</th>                                          <!-- Non-Compliant -->
    <th>Phone#</th>                                        <!-- Non-Compliant -->
    <th>City</th>                                          <!-- Non-Compliant -->
  </tr>
  <tr>
    <td>1.</td>
    <th>Joel Garner</th>                                   <!-- Non-Compliant -->
    <td>412-212-5421</td>
    <td>Pittsburgh</td>
  </tr>
  <tr>
    <td>2.</td>
    <th>Clive Lloyd</th>                                   <!-- Non-Compliant -->
    <td>410-306-1420</td>
    <td>Baltimore</td>
  </tr>
</table>
----


== Compliant Solution

----
<table border="1">
  <caption>Contact Information</caption>
  <tr>
    <td></td>
    <th scope="col">Name</th>                              <!-- Compliant -->
    <th scope="col">Phone#</th>                            <!-- Compliant -->
    <th scope="col">City</th>                              <!-- Compliant -->
  </tr>
  <tr>
    <td>1.</td>
    <th scope="row">Joel Garner</th>                       <!-- Compliant -->
    <td>412-212-5421</td>
    <td>Pittsburgh</td>
  </tr>
  <tr>
    <td>2.</td>
    <th scope="row">Clive Lloyd</th>                       <!-- Compliant -->
    <td>410-306-1420</td>
    <td>Baltimore</td>
  </tr>
</table>
----
or:

----
<table border="1">
  <caption>Contact Information</caption>
  <tr>
    <td></td>
    <th id="name">Name</th>                                <!-- Compliant -->
    <th id="phone">Phone#</th>                             <!-- Compliant -->
    <th id="city">City</th>                                <!-- Compliant -->
  </tr>
  <tr>
    <td>1.</td>
    <th id="person1" headers="name">Joel Garner</th>       <!-- Compliant -->
    <td headers="phone person1">412-212-5421</td>
    <td headers="city person1">Pittsburgh</td>
  </tr>
  <tr>
    <td>2.</td>
    <th id="person2" headers="name">Clive Lloyd</th>       <!-- Compliant -->
    <td headers="phone person2">410-306-1420</td>
    <td headers="city person2">Baltimore</td>
  </tr>
</table>
----


== 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/html.html#H43[WCAG2, H43] - Using id and headers attributes to associate data cells with header cells in data tables


ifdef::rspecator-view[]
== Comments And Links
(visible only on this page)

include::comments-and-links.adoc[]
endif::rspecator-view[]