117 lines
3.8 KiB
Plaintext
117 lines
3.8 KiB
Plaintext
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::env-github,rspecator-view[]
|
||
|
||
'''
|
||
== Implementation Specification
|
||
(visible only on this page)
|
||
|
||
include::message.adoc[]
|
||
|
||
'''
|
||
== Comments And Links
|
||
(visible only on this page)
|
||
|
||
include::comments-and-links.adoc[]
|
||
endif::env-github,rspecator-view[]
|