• Success Criterion 1.3.1
  • Conformance level A

Price Strikethrough Shown Only Visually, Not in the Markup

1.3.1 — Info and Relationships

Scenario

Setting

A food-delivery app's order-tracking screen

What’s wrong

Semantics conveyed by strike-through/highlight (e.g., old vs — sale price) with no markup (inserted/deleted-text code (del/ins)/text).

Example 

<p><span style="text-decoration:line-through">$18.99</span> <span>$14.99</span></p>

Why it matters

A screen reader user hears "18.99, 14.99" with no idea the first price is crossed out as old and the second is the discount.

How to test

Inspect elements styled to look emphasized/structural (bold price, indented note) in DevTools: if there's no matching semantic tag (strong, blockquote) behind the style, it fails.

How to fix

The del and ins elements carry the old-versus-new meaning into the accessibility tree, not just the visual line.

<p><del>$18.99</del> <ins>$14.99</ins></p>

Outcome

A customer hears was $18.99, now $14.99 announced clearly as the discount it represents.

Who is affected

Screen reader users checking an order's price can't tell which figure is original and which is discounted.

Learn more

Related scenarios