Do not style table headers instead of marking them up
The top row is bold and grey and it is built from ordinary data cells, so it looks like a header and is not one. F91 is the failure technique for that, which makes a match a defect rather than a method. Headers in the wrong cells count too, because the technique is about marking headers up correctly rather than only about leaving them out. Four mechanisms satisfy it. Header cells written as th, scope on those th elements where a table carries more than one row or column of headers, headers and id pairs, or the ARIA rowheader and columnheader roles. That last route is the only one open to a grid built out of div elements, which is what most data-grid components produce.
How we find it in an audit
A scanner spots a table whose first row holds no th at all, which is the crude version and also the common one. The rest takes a person, because a table can be full of th elements sitting in the wrong cells and no validator has an opinion about that. Our reviewers read the table the way a screen reader moves through it, one cell at a time in both directions, and check that the header announced with each value is the header a sighted reader would pair it with. Grids built from div elements get checked against the ARIA roles instead, since there is no th to look for.
How affected users experience it
Moving across a row, a screen-reader user expects the column header to come with each value, because that is what turns 42 into Age 42. Without the markup they hear bare numbers and have to count columns to work out what each one means, in their head, while reading. Two columns in, that is irritating. Nine columns in it is a wall, and the honest response for most people is to abandon the table and hunt for the same figures somewhere else on the site.
Passes vs. fails
Passes
<tr><th scope="col">Region</th><th scope="col">Sales</th></tr>Fails
<tr><td class="hdr">Region</td><td class="hdr">Sales</td></tr>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.
- ARIA11sufficientAdd landmarks so users can skip around
- ARIA12sufficientUse role=heading when h1-h6 is impossible
- ARIA13sufficientName repeated landmarks so they are distinguishable
- ARIA16sufficientName controls from visible text with aria-labelledby
- ARIA17sufficientGroup related form fields with ARIA roles
- ARIA20sufficientMark leftover page areas with role=region
This guide is our interpretation of W3C technique F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers. 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.