Semantic use of <del> and <s> tags: How to write an accessible price tag for e-commerces
Understanding when to use <del> and <s> HTML tags
| Comparative Feature | <del> element | <s> element |
|---|---|---|
| Semantic Definition | Represents a range of text that has been deleted from a document. | Represents content that is no longer accurate, correct, or relevant. |
| Use Case | Document edits, tracked changes, or visual/structural revisions (often paired with <ins>). | Outdated information, deprecation notices, old prices, or sold-out items. |
| Accessible Code Pattern | Code block | Code block |
| Visible representation | The meeting is on previous date: | Original price: |
| Unique Attributes | cite (URL pointing to the explanation of the deletion) datetime (date/time of the deletion) | None |
| Default Browser Style | Renders with a visual line-through strikethrough | Renders with a visual line-through strikethrough |
Implicit ARIA Mapping: role="deletion" and role="insertion"
The <del> and <s> tags map to the accessibility role of deletion (and <ins> to insertion). Sighted users see these as struck through or underlined, but screen reader support for announcing these changes is inconsistent.
Understanding the Accessibility Tree Mapping
Under the W3C Accessibility API Mappings, these tags are programmatically mapped to specific accessibility roles that browsers expose to the OS accessibility tree:
<del>maps torole="deletion"(see HTML-AAM<del>mapping and Core-AAM deletion role map).<s>maps torole="deletion"(see HTML-AAM<s>mapping and Core-AAM deletion role map).<ins>maps torole="insertion"(see HTML-AAM<ins>mapping and Core-AAM insertion role map).
These mappings instruct the browser's accessibility engine on how to expose the semantics to assistive technology. However, screen reader support is inconsistent:
- Natively Announced:
- VoiceOver + Safari (iOS)
- NVDA + Firefox
- TalkBack + Chrome
- Not Announced:
- NVDA + Chrome
- TalkBack + Firefox
- VoiceOver + Safari (macOS)
How we provide context for combinations without native support on the Accessibility Tree
To make up for the lack of support, we should add a visually hidden text (e.g., using a .sr-only class) to provide more context about what is happening with the information.
Code block
The meeting is on <span class="sr-only">previous date: </span><del>Monday</del> <span class="sr-only">new date: </span><ins>Wednesday</ins>.By framing the visually hidden text as natural contextual descriptors (e.g., "previous date:" and "new date:"), the output will be more coherent and meaningful across all assistive technologies. It is recommended to avoid redundant labels like "deletion" and "insertion".
- On unsupported systems: Announces "previous date: Monday, new date: Wednesday". The semantic change is fully communicated through the descriptive context.
- On supported systems: Announces "previous date: deletion, Monday, new date: insertion, Wednesday". This reads as a coherent, descriptive sentence without redundant verbal stuttering.
CSS Styling Tips
You can customize the visual representation of <del>, <s>, and <ins> tags to match your design system using standard CSS text-decoration properties, as well as define a utility class to hide screen-reader context labels.
Customizing <del> and <s>
To style deletions and strikethroughs:
Code block
/* Customize individually */
s, del {
text-decoration-line: line-through;
text-decoration-color: #e06c75; /* Change line color */
text-decoration-style: wavy; /* double, dashed, wavy, solid */
text-decoration-thickness: 1.5px; /* Change line thickness */
}
/* Or use the shorthand syntax */
s, del {
text-decoration: line-through #e06c75 wavy 1.5px;
}Customizing <ins>
To style insertions:
Code block
/* Customize individually */
ins {
text-decoration-line: underline;
text-decoration-color: #98c379; /* Change line color */
text-decoration-style: wavy; /* double, dashed, wavy, solid */
text-decoration-thickness: 1.5px; /* Change line thickness */
}
/* Or use the shorthand syntax */
ins {
text-decoration: underline #98c379 wavy 1.5px;
}Visual Hiding Utility
To hide descriptive contextual labels (like "previous date:") from visual users while keeping them accessible to screen readers, implement a standard visually-hidden CSS class:
Code block
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}Resources and Documentation
Disclaimer on MDN's Pseudo-Element Solution: MDN suggests using CSS generated content (
::before/::after) to announce insertion and deletion states. However, I have deliberately avoided this approach. Some browser and screen reader combinations omit CSS pseudo-selectors/pseudo-elements from the accessibility tree entirely, making them unreliable. Using concrete, visually hidden DOM nodes with an.sr-onlyclass is the only way to ensure context labels are read consistently on all devices.