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

"<table>" tags should have a description

    Details

    • Message:
      Add a description to this table.
    • Default Severity:
      Minor
    • Impact:
      Low
    • Likelihood:
      Low
    • Default Quality Profiles:
      Sonar way
    • Legacy Key:
      TableWithoutCaptionCheck
    • Targeted languages:
      HTML
    • Covered 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
    • WCAG2:
      WCAG2-1.3.1, WCAG2-H39, WCAG2-H73

      Description

      In order to be accessible to visually impaired users, it is important that tables provides a description of its content before the data is accessed.

      The simplest way to do it, and also the one recommended by WCAG2 is to add a <caption> element inside the <table>.

      Other technics this rule accepts are:

      • adding a concise description via aria-label or aria-labelledby attributes in the <table>.
      • referencing a description element with an aria-describedby attribute in the <table>.
      • embedding the <table> inside a <figure> which also contains a <figcaption>.
      • adding a summary attribute to the <table> tag. However note that this attribute has been deprecated in HTML5.

      See W3C WAI Web Accessibility Tutorials for more information.

      This rule raises an issue when a <table> has neither of the previously mentioned description mechanisms.

      Noncompliant Code Example

      <table> <!-- Noncompliant -->
        ...
      <table>
      

      Compliant Solution

      Adding a <caption> element.

      <table>
        <caption>New York City Marathon Results 2013</caption>
        ...
      </table>
      

      Adding an aria-describedby attribute.

      <p id="mydesc">New York City Marathon Results 2013</p>
      <table aria-describedby="mydesc">
        ...
      </table>
      

      Embedding the table in a <figure> which also contains a <figcaption>.

      <figure>
        <figcaption>New York City Marathon Results 2013</figcaption>
        <table>
          ...
        </table>
      </figure>
      

      Adding a summary attribute.

      <table summary="New York City Marathon Results 2013">
        ...
      </table>
      

      Exceptions

      No issue will be raised on <table> used for layout purpose, i.e. when it contains a role attribute set to "presentation" or "none". Note that using <table> for layout purpose is a bad practice.

      No issue will be raised either on <table> containing an aria-hidden attribute set to "true".

      See

      • WCAG2, 1.3.1 - Info and Relationships
      • WCAG2, H39 - Using caption elements to associate data table captions with data tables

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                Unassigned
                Reporter:
                freddy.mallet Freddy Mallet (Inactive)
              • Votes:
                0 Vote for this issue
                Watchers:
                1 Start watching this issue

                Dates

                • Created:
                  Updated: