th
elements,
caption
elements, or non-empty summary
attributes in
layout tablesSee Understanding Techniques for WCAG Success Criteria for important information about the usage of these informative techniques and how they relate to the normative WCAG 2.0 success criteria. The Applicability section explains the scope of the technique, and the presence of techniques for a specific technology does not imply that the technology can be used in all situations to create content that meets WCAG 2.0.
HTML and XHTML
This failure relates to:
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 and XHTML table elements 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 or XHTML 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.
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.
Example Code:
<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>
No resources available for this technique.
Examine the source code of the HTML or XHTML document for the
table
element
If the table is used only to visually lay out elements within the content
Check that the table does not contain any th
elements.
Check that the table
element does not
contain a non-empty summary attribute.
Check that the table
element does not
contain a caption
element.
If any check above is false, then this failure condition applies and the content fails the Success Criterion.