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

Analyze HTML (also within PHP/Ruby/etc. templates) and JSP/JSF code.

The newest version!


Associating table headers with a row, column, or a group of rows or columns enables screen reader softwares 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>