16f6c0aecf
Inline adoc files when they are included exactly once. Also fix language tags because this inlining gives us better information on what language the code is written in.
84 lines
2.0 KiB
Plaintext
84 lines
2.0 KiB
Plaintext
== Why is this an issue?
|
||
|
||
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
|
||
|
||
[source,html]
|
||
----
|
||
<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
|
||
|
||
[source,html]
|
||
----
|
||
<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"++``.
|
||
|
||
|
||
== Resources
|
||
|
||
* 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)
|
||
|
||
=== Message
|
||
|
||
Add "<th>" headers to this "<table>"
|
||
|
||
|
||
=== Highlighting
|
||
|
||
The opening <table> tag, without its content.
|
||
|
||
|
||
endif::env-github,rspecator-view[]
|