74 lines
1.8 KiB
Plaintext
74 lines
1.8 KiB
Plaintext
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
|
||
|
||
ifdef::env-github,rspecator-view[]
|
||
|
||
'''
|
||
== Implementation Specification
|
||
(visible only on this page)
|
||
|
||
include::message.adoc[]
|
||
|
||
include::highlighting.adoc[]
|
||
|
||
endif::env-github,rspecator-view[]
|