Uploaded image for project: 'Rules Repository'
  1. Rules Repository
  2. RSPEC-5258

Tables used for layout should not include semantic markup

    XMLWordPrintable

    Details

    • Message:
      Hide
      Remove this "<X>" element
      Remove this "Y" attribute
      Show
      Remove this "<X>" element Remove this "Y" attribute
    • Highlighting:
      Hide

      The forbidden opening tag, without its content, or the forbidden attribute

      Show
      The forbidden opening tag, without its content, or the forbidden attribute
    • Default Severity:
      Critical
    • Impact:
      High
    • Likelihood:
      Low
    • Default Quality Profiles:
      Sonar way
    • Targeted languages:
      HTML
    • Irrelevant for Languages:
      ABAP, APEX, C#, C, C++, Cobol, CSS, Flex, Go, Java, JavaScript, Kotlin, Objective-C, PHP, PL/I, PL/SQL, Python, RPG, Ruby, Rust, Scala, Solidity, Swift, T-SQL, TypeScript, VB.Net, VB6, XML
    • Remediation Function:
      Constant/Issue
    • Constant Cost:
      5min
    • Analysis Scope:
      Main Sources, Test Sources
    • WCAG2:
      WCAG2-1.3.1, WCAG2-F46

      Description

      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

      <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>
      

      See

      • WCAG2, 1.3.1 - Info and Relationships
      • WCAG2, F46 - Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              Unassigned Unassigned
              Reporter:
              nicolas.harraudeau Nicolas Harraudeau (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Dates

                Created:
                Updated: