Use real heading tags, not styled bold text
A section title has to be a real h1 to h6 element. Styling a div to look big and bold produces pixels and nothing else, because the outline screen readers navigate by is built from the tags. W3C lists H42 as sufficient for 1.3.1 Info and Relationships, in the sense of taking a relationship the design already shows and making it available to software too. The test runs both ways, and that is the half most people miss. Heading markup has to be used where the content is a heading, and it must not be used where the content is not one. So styling a price as an h3 to make it look important fails the same technique that missing headings fail. Be careful what you claim about level order, as well. H42 asks for the appropriate level and stops there. The stronger advice about never skipping from h1 to h4 belongs to H69, where W3C phrases it as encouragement rather than a requirement. We still write it up, because it breaks the outline a reader is using, not because this technique forbids it.
How we find it in an audit
We pull the heading outline on every audited page and hold it next to what a sighted visitor sees. Sections that are obviously sections on screen and missing from the outline become findings. So do the ones running the other way, where a pull quote or a price has been marked as a heading to make it bigger. Both views go into the report side by side, because the gap between them is the finding.
How affected users experience it
Screen reader users skim by jumping heading to heading, which is what your eyes do down a page of section titles, only out loud and one at a time. On a page whose headings are styled divs that shortcut returns nothing at all, so the only route left is listening to the whole page from the top. The reverse hurts as well. An outline stuffed with things that are not headings reads like a table of contents for some other document.
Passes vs. fails
Passes
<h2>Shipping</h2>
<p class="big-price">$49</p>Fails
<div class="section-title">Shipping</div>
<h3 class="big-price">$49</h3>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
Other ways to satisfy this rule
52 guides on this site are filed under 1.3.1 Info and Relationships. W3C lists this one as sufficient for that rule when used for making information and relationships conveyed through presentation programmatically determinable, so the condition is part of the test rather than a footnote to 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 H42: Using h1-h6 to identify headings. 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.