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.
63 lines
1.8 KiB
Plaintext
63 lines
1.8 KiB
Plaintext
== Why is this an issue?
|
||
|
||
Tables used for layout should not include semantic markup, such as ``++<th>++`` elements, as it can confuse assistive technologies. At best this information is ignored by screen readers and makes the code less maintainable. However it can also confuse some screen readers and reduce the web page accessibility.
|
||
|
||
|
||
This rule raises an issue when a ``++<table>++`` element containing the ``++role++`` attribute set to ``++"presentation"++`` or ``++"none"++`` also contains any of:
|
||
|
||
* a ``++<caption>++`` element
|
||
* a ``++<th>++`` element
|
||
* a non-empty ``++summary++`` attribute
|
||
* an ``++<td>++`` element with a ``++headers++`` or ``++scope++`` attribute
|
||
|
||
|
||
=== Noncompliant code example
|
||
|
||
[source,html]
|
||
----
|
||
<table role="presentation" summary="bla"> <!-- Noncompliant -->
|
||
<caption>People</caption> <!-- Noncompliant -->
|
||
<tr>
|
||
<td></td>
|
||
<th>Name</th> <!-- Noncompliant -->
|
||
<th id="myid1">Age</th> <!-- Noncompliant -->
|
||
</tr>
|
||
<tr>
|
||
<td scope="row">1</td> <!-- Noncompliant -->
|
||
<td>John Doe</td>
|
||
<td>24</td>
|
||
</tr>
|
||
<tr>
|
||
<td id="myid2">2</td>
|
||
<td headers="myid1 myid2">Alice Doe</td> <!-- Noncompliant -->
|
||
<td>54</td>
|
||
</tr>
|
||
</table>
|
||
----
|
||
|
||
|
||
== 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/F46.html[WCAG2, F46] - Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables
|
||
|
||
ifdef::env-github,rspecator-view[]
|
||
|
||
'''
|
||
== Implementation Specification
|
||
(visible only on this page)
|
||
|
||
=== Message
|
||
|
||
Remove this "<X>" element
|
||
|
||
Remove this "Y" attribute
|
||
|
||
|
||
=== Highlighting
|
||
|
||
The forbidden opening tag, without its content, or the forbidden attribute
|
||
|
||
|
||
endif::env-github,rspecator-view[]
|