F46: Failure of Success Criterion 1.3.1 due to using th elements, caption elements, or non-empty summary attributes in layout tables

The objective of this technique is to describe a failure that occurs when a table used only for layout includes either th elements, a summary attribute, or a caption element. This is a failure because it uses structural (or semantic) markup only for presentation. The intent of the HTML table element is to present data.

Although not commonly used in a layout table, the following structural markup would also be failures of Success Criterion 1.3.1 if used in a layout table:

headers attributes
scope attributes

Assistive technologies use the structure of an HTML table to present data to the user in a logical manner. The th element is used to mark the column and row headers of the table. A screen reader uses the information in th elements to speak the header information that changes as the user navigates the table. The summary attribute on the table element provides a textual description of the table that describes its purpose and function. Assistive technologies make the summary attribute information available to users. The caption element is part of the table and identifies the table.

Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML table elements and to conform to the coding practice of separating presentation from content. When a table is used for layout purposes the th element should not be used. Since the table is not presenting data there is no need to mark any cells as column or row headers. Likewise, there is no need for an additional description of a table which is only used to layout content. Do not include a summary attribute and do not use the summary attribute to describe the table as, for instance, "layout table". When spoken, this information does not provide value and will only distract users navigating the content via a screen reader. Empty summary attributes are acceptable on layout tables, but not recommended.

Examples

Failure Example 1

Here is a simple example that uses a table to layout content in a three column format. The navigation bar is in the left column, the main content in the middle column, and an additional sidebar is on the right. At the top is a page title. The example marks the page title as <th>, and provides a summary attribute indicating that the table is a layout table.

 <table summary="layout table">
 <tr>
   <th colspan=3>Page Title</th>
 </tr>
 <tr>
   <td><div>navigation content</div></td>
   <td><div>main content</div></td>
   <td><div>right sidebar content</div></td>
 </tr>
 <tr>
   <td colspan=3>footer</td>
 </tr>
 </table>

Resources

No resources available for this technique.

Related Techniques

Tests

Procedure

Examine the source code of the HTML document for the table element
If the table is used only to visually lay out elements within the content
1. Check that the table does not contain any th elements.
2. Check that the table element does not contain a non-empty summary attribute.
3. Check that the table element does not contain a caption element.

Expected Results

If any check above is false, then this failure condition applies and the content fails the Success Criterion.

F46: Failure of Success Criterion 1.3.1 due to using `th` elements, `caption` elements, or non-empty `summary` attributes in layout tables