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.
169 lines
4.8 KiB
Plaintext
169 lines
4.8 KiB
Plaintext
== Why is this an issue?
|
||
|
||
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
|
||
|
||
[source,html]
|
||
----
|
||
<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
|
||
|
||
[source,html]
|
||
----
|
||
<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:
|
||
|
||
[source,html]
|
||
----
|
||
<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>
|
||
----
|
||
|
||
=== Exceptions
|
||
|
||
This rule is not applied in case of simple tables.
|
||
|
||
Tables are considered as such when the headers are either all in the first row, or all in the first column. The two conditions must not apply together.
|
||
|
||
Simple table example:
|
||
|
||
[source,html]
|
||
----
|
||
<table border="1">
|
||
<caption>Simple Table 1</caption>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Surname</th>
|
||
</tr>
|
||
<tr>
|
||
<td>John</td>
|
||
<td>Doe</td>
|
||
</tr>
|
||
</table>
|
||
<table border="1">
|
||
<caption>Simple Table 2</caption>
|
||
<tr>
|
||
<th>Name</th>
|
||
<td>John</td>
|
||
</tr>
|
||
<tr>
|
||
<th>Surname</th>
|
||
<td>Doe</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/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)
|
||
|
||
=== Message
|
||
|
||
Add either an 'id' or a 'scope' attribute to this <{0}> tag.
|
||
|
||
|
||
'''
|
||
== Comments And Links
|
||
(visible only on this page)
|
||
|
||
=== on 25 Jun 2013, 09:39:55 Dinesh Bolkensteyn wrote:
|
||
SQALE to be added
|
||
|
||
=== on 25 Jun 2013, 09:41:21 Dinesh Bolkensteyn wrote:
|
||
scope: \http://www.w3.org/TR/WCAG20-TECHS/H63.html
|
||
|
||
id: \http://www.w3.org/TR/WCAG20-TECHS/H43.html
|
||
|
||
=== on 8 Jul 2013, 18:17:48 Freddy Mallet wrote:
|
||
Is implemented by \http://jira.codehaus.org/browse/SONARPLUGINS-3013
|
||
|
||
endif::env-github,rspecator-view[]
|