Meaning carried by struck-through or inserted text must be announced

Rule emphasis-not-announced · Structure & semantics · impact moderate · Static + live

↩ Back to the rules index · WCAG cross-reference

Why it matters#

Most screen readers announce nothing at all for <del>, <ins> and <s>. On a product page that turns "was £80, now £60" into "£80 £60" — the user hears two prices with no idea which one they will pay. The visual line through the old price is the entire message, and it is not conveyed.

How to fix#

Add visually-hidden text inside the element that says what the change means ("Original price:", "Sale price:"), or give the element an aria-label, aria-labelledby or title. The hidden text has to stay in the accessibility tree: a span with a screen-reader-only class (sr-only, visually-hidden, screen-reader-text, or the EqualWeb widget’s INDhiddenText) counts; text removed with display: none or aria-hidden does not. role="presentation" on the element changes nothing — <del> announces no semantics to begin with. If the old value is decorative and the meaning is already stated elsewhere, hide the whole element with aria-hidden="true" instead.

Example#

<p><s>£80</s> £60</p>

<p><s><span class="sr-only">Original price</span>£80</s> <span class="sr-only">Sale price</span>£60</p>

Example#

<p><del role="presentation">£80</del> £60</p>

<p><del><span class="visually-hidden">Original price</span>£80</del> <span class="visually-hidden">Sale price</span>£60</p>

A presentation role removes nothing a screen reader was announcing; the hidden text is what makes the change audible.

WCAG success criteria#

1.3.1 Info and Relationships — Level A#

Structure and relationships conveyed visually (headings, lists, tables, labels, groups) must also be available programmatically.

Understanding 1.3.1

Standards#

This rule contributes to the following standards:

WCAG A EN 301 549

References#

• WCAG — Info and Relationships