The <s> Element
As defined in the HTML Living Standard, the <s> element represents contents that are no longer accurate or no longer relevant.
Limited Edition SimpleAccess Sticker Pack: $25.00 Now $15.00!
<p>Buy our <s>obsolete</s> new product!</p>
View HTML Living Standard: The s element
S vs. DEL vs. CSS
Because these all result in a visual strike-through line, it is vital to choose the correct method based on meaning:
<s>: Content is no longer accurate or relevant (e.g., an old price, a sold-out status).<del>: Content has been removed as part of a document edit or correction.- CSS
text-decoration: Use purely for visual styling where no semantic change of relevance is intended.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
The Accessibility Gap: Most screen readers do not announce the presence of the <s> element by default. A blind user might hear "Price: twenty-five dollars fifteen dollars," which is highly confusing.
Solution: To satisfy SC 1.3.1, you should supplement the <s> tag with a hidden text alternative that explicitly states the status.
<p>
Price: <span class="sr-only">Was: </span><s>$25</s>
<span class="sr-only">Now: </span>$15
</p>
Understand SC 1.3.1: Info and Relationships
Usage Warnings
- Not for Deletions: Do not use
<s>when indicating document edits; use<del>and<ins>instead to provide a machine-readable audit trail. - Contrast: When text is struck through, it can become harder to read. Ensure that the text color still meets WCAG SC 1.4.3 contrast requirements against the background.
A11y Tip: High Contrast Mode
In some high-contrast modes, the strike-through line may disappear. Consider adding a secondary indicator (like a specific color or parenthetical text) to ensure the "no longer relevant" status is perceivable in all environments.