How to write an accessible price tag for e-commerces

Understanding when to use <del> and <s> HTML tags

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 to role="deletion" (see HTML-AAM <del> mapping and Core-AAM deletion role map).
• <s> maps to role="deletion" (see HTML-AAM <s> mapping and Core-AAM deletion role map).
• <ins> maps to role="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.

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:

  /* 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:

  /* 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:

  .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

• MDN Web Docs: <del> Element
• MDN Web Docs: <ins> Element
• MDN Web Docs: <s> Element

Disclaimer on MDN's Pseudo-Element Solution:
Clarification on MDN's Pseudo-Element Solution: MDN suggests using CSS generated content (::before / ::after) to announce which text was deleted and which text was inserted. However, I opted for another also valid solution. According to my tests, using visually hidden DOM nodes is much more reliable and stable to ensure a clear context.