"<table>" tags should have a description

Web:TableWithoutCaptionCheck

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. However note that this attribute has been deprecated in HTML5.

<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