Mark up structure with semantic elements
Semantic markup means choosing elements for what the content is rather than for how it should look. A heading is a heading element. A list is a list, a table of data is a table, and the relationships between them live in the markup instead of in the styling. G115 is that instruction. W3C lists it as sufficient for 1.3.1 Info and Relationships at Level A, with a condition worth reading, that it counts together with the separate technique for marking emphasized or special text. The structural half is this one, the emphasis half is that one. There is no shortage of alternatives either. 1.3.1 carries more documented techniques than any other rule in WCAG, along with eleven recorded ways to fail it.
How we find it in an audit
Automated tools do real work here. They can see headings built out of styled divs, lists built out of line breaks, and layout tables, and they flag all of it. What they cannot judge is whether the structure the markup declares is the structure a reader sees. So our reviewers compare the rendered page against its outline and check that the two agree.
How affected users experience it
Every assistive technology reads structure, not appearance. Screen reader users jump by heading, pull up a list of headings to see the shape of a page, and move through tables by row and column. A heading that is only a large bold div appears in none of those lists, so the section it names is invisible to the way they navigate. The text is all still there. The map is missing.
Passes vs. fails
Passes
Titles use <h2>, lists use <ul> and <li>, and emphasis uses <em>, so the markup carries the structure the eye already sees.Fails
Section titles are <div class="heading">, lists are lines separated by <br>, and emphasis is a styled <span>.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 only alongside H49, so the pair is what passes and neither half does on its own.
- 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 G115: Using semantic elements to mark up structure. 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.