F48Documented failure WCAG 1.3.1 Level A Partly scanner-detectable

Do not publish data tables as preformatted text

F48 is a documented failure under the info and relationships rule, and it is the narrowest one in this family. Tabular data inside a pre element keeps the look of a table and none of what a table is. No cells, no headers, no relationship between a value and the thing it measures. The condition is stated in two halves and the second gets dropped. The relationships are lost if the reader cannot see the screen, and also if the visual presentation changes significantly, which is exactly what happens at larger text sizes or in a narrower window. The alignment holding it together is only true at one width. The repair is table markup, which the same content usually converts to in minutes.

How we find it in an audit

The published test is two steps. Find the pre elements, then look at whether what is inside them is tabular. Searching for column-aligned runs of spaces sounds cleverer, and it misses the tables drawn with tabs and the ones drawn with box characters, both of which are common in content converted from documentation. So we read every pre element on the site rather than pattern matching inside them.

How affected users experience it

Preformatted text gets read as prose, because that is what it is. "Quarter Revenue Growth Q1 dollar 1.2 M 4 percent Q2 dollar 1.4 M 9 percent" arrives as one line, and the listener has to remember the header row and count positions to pair each number with what it measures. Two columns is doable. Five columns and twelve rows is a memory test nobody should be set, and there is no command to ask which column this is, because there are no columns.

Passes vs. fails

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

Passes

<table>
  <tr><th scope="col">Quarter</th><th scope="col">Revenue</th><th scope="col">Growth</th></tr>
  <tr><td>Q1</td><td>$1.2M</td><td>4%</td></tr>
  <tr><td>Q2</td><td>$1.4M</td><td>9%</td></tr>
</table>

Fails

<pre>
Quarter   Revenue   Growth
Q1        $1.2M     4%
Q2        $1.4M     9%
</pre>

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 F48: Failure of Success Criterion 1.3.1 due to using the pre element to markup tabular information. 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.