fb5ed78cc6
* Add javascript to rule S5260 * JS-6 Add rspec for S5260 --------- Co-authored-by: zglicz <zglicz@users.noreply.github.com> Co-authored-by: Michal Zgliczynski <michal.zgliczynski@sonarsource.com>
56 lines
1.7 KiB
Plaintext
56 lines
1.7 KiB
Plaintext
== Why is this an issue?
|
||
|
||
If a ``++<td>++`` cell has a ``++headers++`` attribute, it should reference only IDs of headers in the same column and row.
|
||
|
||
|
||
Note that it is usually better to use ``++scope++`` attributes of ``++<th>++`` headers instead of ``++headers++`` attribute. ``++headers++`` attribute requires you to list every corresponding ``++<th>++`` header's ``++id++``, which is error-prone and makes the code less maintainable. See https://www.w3.org/WAI/tutorials/tables/tips/[W3C WAI Web Accessibility Tutorials] for more information.
|
||
|
||
|
||
If your table is too complex, it might be better to split it into multiple small tables as it improves both readability and maintainability.
|
||
|
||
|
||
This rule raises an issue when the ``++headers++`` attribute of a ``++<td>++`` cell contains IDs which don't belong to a header in the same row or column.
|
||
|
||
|
||
=== Noncompliant code example
|
||
|
||
[source,html]
|
||
----
|
||
<table border="1">
|
||
<caption>
|
||
Rental price
|
||
</caption>
|
||
<thead>
|
||
<tr>
|
||
<td></td>
|
||
<th id="small" scope="col">
|
||
Small car
|
||
</th>
|
||
<th id="big" scope="col">
|
||
Big Car
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<th id="paris" class="span" colspan="3" scope="colgroup">
|
||
Paris
|
||
</th>
|
||
</tr>
|
||
<tr>
|
||
<th headers="paris" id="day1">
|
||
1 day
|
||
</th>
|
||
<td headers="paris day1 big"> <!-- Noncompliant, referencing the column "big" instead of "small" -->
|
||
11 euros
|
||
</td>
|
||
<td headers="berlin day1 big"> <!-- Noncompliant, there is no header with id "berlin" -->
|
||
50 euros
|
||
</td>
|
||
</tr>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
----
|
||
|