DEV Community

Mica
Mica

Posted on • Originally published at micaavigliano.com

Semantic use of <del> and <s> tags: How to write an accessible price tag for e-commerces

#html #webdev #frontend #a11y

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 The meeting is on <span class="sr-only">previous date: </span><del>Monday</del> <span class="sr-only">new date: </span><ins>Wednesday</ins>. <span class="sr-only">Original price: </span><s>$100.00</s>
Visible Representation The meeting is on Monday Wednesday $100.00 $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"

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:

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.

The meeting is on <span class="sr-only">previous date: </span><del>Monday</del> <span class="sr-only">new date: </span><ins>Wednesday</ins>.
Enter fullscreen mode Exit fullscreen mode

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:

  /* 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;
  }
Enter fullscreen mode Exit fullscreen mode

Customizing <ins>

To style insertions:

  /* 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;
  }
Enter fullscreen mode Exit fullscreen mode

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:

  .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;
  }
Enter fullscreen mode Exit fullscreen mode

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-only class is the only way to ensure context labels are read consistently on all devices.

Top comments (0)