Do not fake structure with styled text
F2 is a documented failure and it is the most cited one in accessibility reporting, because it is what every bold paragraph standing in for a heading gets written up as. Landing here means somebody found the pattern on your site. It is not a fix you can apply. The failure is a change in the look of text carrying meaning with no markup behind it. Headings are the common case and not the whole of it. Emphasis marked only by italics, a quotation marked only by an indent, a warning marked only by red, all sit inside F2. So does the half most summaries drop, which is an image of text carrying structural information without the semantic markup that would say so. The repair is the element that means what the styling was trying to say, and then whatever styling you like on top of it.
How we find it in an audit
We pull the heading outline of your page and hold it next to the screen. Gaps in the outline are where a styled paragraph is pretending. Then we read the rest of the page for the quieter cases, emphasis and quotations and anything whose meaning is carried by how it looks. Automated tools can shortlist candidates by font size and weight, which is genuinely useful and never conclusive. Whether something functions as a heading is a question about the content rather than the CSS.
How affected users experience it
Screen reader users pull up a list of a page's headings and navigate by it, the way a sighted reader uses the shape of a page to find their place. Where the headings are styled paragraphs, that list is short or empty. What is left is one wall of undifferentiated text to be read from the top, in order, with no way to skip to the section they came for. On a long support article that is the difference between two minutes and twenty.
Passes vs. fails
Passes
<h2 class="section-title">Shipping policy</h2>
<!-- A real heading now, and the class can still style it however you like. -->Fails
<p class="section-title">Shipping policy</p>
<!-- .section-title { font-size: 1.5em; font-weight: bold } -->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 F2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text. 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.