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