• Success Criterion 1.3.1
  • Conformance level A
  • W3C reference F43

Structural HTML Tags Used Purely for Visual Styling

1.3.1 — Info and Relationships

Scenario

Setting

A fashion e-commerce site's checkout page

What’s wrong

Structural markup is used for looks, not meaning (e.g., blockquote just to indent, a heading tag just for big text) — screen readers announce false structure.

Example 

<h3>$128.00</h3>
<blockquote>Free shipping on orders over $100</blockquote>

Why it matters

A screen reader user browsing checkout by heading hears the price announced as a section title, breaking the page's real outline.

How to test

Inspect suspect structural tags (e.g., blockquote used only for indentation): check the Accessibility Tree — if the tag implies meaning that isn't actually there, it fails.

How to fix

Pick tags for what they mean, then use CSS for how they look; a heading always claims to be a section title.

<p class="price-large">$128.00</p>
<p class="shipping-note">Free shipping on orders over $100</p>

Outcome

A shopper scanning headings on checkout finds real section titles like Order Summary instead of a stray price.

Who is affected

Screen reader users who jump by headings or blockquote landmarks are misled about the page's actual structure.

Learn more

Related scenarios