F46Documented failure WCAG 1.3.1 Level A Partly scanner-detectable

Never put th or caption in a layout table

F46 is a documented failure under the info and relationships rule, and it is the case F43 carves out of itself. A layout table is not a violation. A layout table wearing data semantics is. Header cells, a caption, or a summary attribute with something in it all announce a relationship the table does not have. The summary detail is worth stating precisely, because the failure names a non-empty summary. An empty one passes, though nobody recommends it. Two more attributes fail the same way and are rarely mentioned, headers and scope, and scope is the one a template engine adds on its own. There is one instruction here that is easy to get backward. Do not describe the table at all. A summary reading layout table is spoken aloud, tells the listener nothing they can use, and gets in the way of the content.

How we find it in an audit

We find the tables, decide which are laying out a page rather than presenting data, then look inside those for the things that should not be there. Header cells, a caption, a non-empty summary, headers, scope, and a header row pretending to be a page banner. Automated tools can list tables and their attributes, which is most of the mechanical work. Whether a table is layout or data is a judgment about the content, and the whole finding rests on it.

How affected users experience it

Screen readers switch into table mode when they meet a table carrying data semantics, and table mode changes everything. The reader is told how many rows and columns there are, header cells get announced with each data cell, and the reading commands change. Applied to a page layout that means being told the site has three columns and two rows, then hearing "Navigation, Links" and "Main content, Article" as though they were readings from a dataset. The information is real. The framing is a fiction the markup invented.

Passes vs. fails

Passes: headings exist in the code. Fails: one flat wall of text.

Passes

<div class="layout">
  <nav>Links</nav>
  <main>Article</main>
</div>
<!-- A layout table with no th, no caption and no summary would also pass. -->

Fails

<table>
  <caption>Page layout</caption>
  <tr><th>Navigation</th><th>Main content</th></tr>
  <tr><td>Links</td><td>Article</td></tr>
</table>

How this gets tested

The W3C publishes test rules that define what a checker looks for here.

ARIA attribute is defined in WAI-ARIAA tool can check this
ARIA state or property has valid valueA tool can check this
Element with role attribute has required states and propertiesA tool can check this
Form field has non-empty accessible nameA tool can check this
Headers attribute specified on a cell refers to cells in the same table elementA tool can check this
Role attribute has valid valueA tool can check this
ARIA global properties not used where prohibitedA tool can check this
ARIA required context roleA tool can check this
ARIA required owned elementsA tool can check this
ARIA state or property is permittedA tool can check this
Table header cell has assigned cellsA tool can check this

The other techniques filed under this rule

52 guides on this site are filed under 1.3.1 Info and Relationships. W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.

This guide is our interpretation of W3C technique F46: Failure of Success Criterion 1.3.1 due to using th elements, … layout tables. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.