Keep content and structure separate from presentation
Two different things are going on in any page. Structural encoding says this is a heading, this is a list, these cells belong to that row. Presentational encoding says this is 18 pixels, dark blue, indented, bordered. G140 asks you to keep them apart, so the structure lives in elements that mean something and the appearance lives in styling that can be replaced. W3C is blunt about why. Presentation implies structure to a person looking at it and does not encode it well enough for assistive technology to work with. This is a sufficient technique at three rules, 1.3.1 Info and Relationships at Level A, 1.4.5 Images of Text at Level AA, and the stricter AAA version of the images rule. That reach is unusual, and it comes from one idea. Real text with styling on top can be re-presented. A picture of styled text cannot.
How we find it in an audit
The oldest test in the trade still works. Our reviewers turn off the site's stylesheets and read what is left. A page built this way still reads in order, with headings, lists and labels intact. A page whose meaning lived in the styling collapses into an undifferentiated run of text, and whatever disappeared is exactly what assistive technology never had.
How affected users experience it
Every assistive technology is a different presentation of the same content. A screen reader is the audio one, a braille display the tactile one, a user stylesheet the recolored one. When meaning is welded to a single visual rendering, through layout tables, indentation standing in for hierarchy, or text baked into an image, every other presentation receives the content with the meaning stripped out of it.
Passes vs. fails
Passes
Semantic HTML carries the structure and CSS carries the appearance, so with styles off the page still reads in order with headings, lists and labels intact.
Fails
Meaning lives in the styling, with layout tables for structure, indentation for hierarchy, and styled text as images. Remove the CSS and it collapses.
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
- HTML images contain no textNothing implements this yet
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 on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- 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 G140: Separating information and structure from presentation to enable different presentations. 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.