# Semantic use of and tags: How to write an accessible price tag for e-commerces > In this article, I will explain the key differences between and tags, when to use each of them and how to write semantic and accessible price tags for e-commerces. I will also give you some tips on how to make your price tags discoverable by AI agents. *By Micaela Avigliano — Frontend & Accessibility Engineer · Published Jun 2, 2026* [Read the original on micaavigliano.com](https://micaavigliano.com/en/blog/semantic-del-s-tags) --- ## [Understanding when to use `` and `` HTML tags](#understanding-when-to-use-del-and-s-html-tags) Differences between `` and `` tags. Learn when to use each tag. | Comparative Feature | `` element | `` 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 ``). | Outdated information, deprecation notices, old prices, or sold-out items. | | Accessible Code Pattern | ## Code block ``` The meeting is on previous date: Monday new date: Wednesday. ``` | ## Code block ``` Original price: $100.00 ``` | | Visible representation | The meeting is on previous date: ~Monday~ new date: Wednesday | Original price: ~$100.00~ New price: $34.99 | | 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"](#implicit-aria-mapping-roledeletion-and-roleinsertion) The `` and `` tags map to the accessibility role of `deletion` (and `` 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](#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: - **``** maps to `role="deletion"` (see [HTML-AAM `` mapping](https://www.w3.org/TR/html-aam-1.0/#el-del) and [Core-AAM deletion role map](https://www.w3.org/TR/core-aam-1.2/#role-map-deletion)). - **``** maps to `role="deletion"` (see [HTML-AAM `` mapping](https://www.w3.org/TR/html-aam-1.0/#el-s) and [Core-AAM deletion role map](https://www.w3.org/TR/core-aam-1.2/#role-map-deletion)). - **``** maps to `role="insertion"` (see [HTML-AAM `` mapping](https://www.w3.org/TR/html-aam-1.0/#el-ins) and [Core-AAM insertion role map](https://www.w3.org/TR/core-aam-1.2/#role-map-insertion)). 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](#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 previous date: Monday new date: Wednesday. ``` 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](#css-styling-tips) You can customize the visual representation of ``, ``, and `` 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 `` and ``](#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 ``](#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](#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](#resources-and-documentation) - [MDN Web Docs: `` Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/del) - [MDN Web Docs: `` Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ins) - [MDN Web Docs: `` Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/s) > **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-only` class is the only way to ensure context labels are read consistently on all devices.