Info and Relationships
Structure and relationships conveyed visually — headings, lists, table headers, form groupings — are also conveyed in the underlying markup, not just with CSS.
Why it matters
A sighted user infers structure from spacing, size, and position. A screen reader user only gets what's in the DOM: a heading styled to look like a paragraph, or a table with no <th>, reads as an undifferentiated wall of text.
Automatically detected
axe-core catches many structural mismatches (empty table headers, list items outside a <ul>/<ol>, form inputs without labels). Whether a heading hierarchy makes logical sense to a reader is a judgement call, not a rule.
Related axe-core rules: th-has-data-cells, list, definition-list, label
Fails
<div class="table">
<div class="row"><div class="cell">Plan</div><div class="cell">Price</div></div>
<div class="row"><div class="cell">Starter</div><div class="cell">$99</div></div>
</div>Visually this looks like a table, but there is no <table>, <th>, or scope attribute anywhere — a screen reader has no way to associate 'Starter' with the 'Plan' column.
Passes
<table>
<thead><tr><th scope="col">Plan</th><th scope="col">Price</th></tr></thead>
<tbody><tr><td>Starter</td><td>$99</td></tr></tbody>
</table>Real table markup with scoped headers. A screen reader can now announce 'Plan: Starter, Price: $99' when reading a cell.
Openwell finds violations like this one across your whole site, clusters them by the component that caused them, and generates a fix that's re-validated before you see it.
Scan your site free