org.sonar.l10n.web.rules.Web.TableHeaderHasIdOrScopeCheck.html Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of sonar-web-plugin Show documentation

Enables scanning of HTML, and JSP/JSF files.

There is a newer version: 2.6.0.1053

Associating table headers with a row, column, or a group of rows or columns enables screen readers to announce the header prior to the data. This
considerably increases the accessibility of tables to visually impaired users.
Noncompliant Code Example
<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
<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:
<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>