Strikethrough content

How to test a strikethrough content

Gherkin Condensed

Given that I am on a page with a strikethrough content

1 Keyboard for mobile & desktop

WHEN I use the arrow key to browse the content I SEE the content comes into view

2 Desktop screenreader

WHEN I use a desktop screenreader (NVDA, JAWS, VoiceOver) AND I use the arrow key to browse the content
- I HEAR The content makes sense and is in logical order

3 Mobile screenreader

WHEN I use a mobile screenreader (Talkback, VoiceOver) AND I swipe to browse the content
- I HEAR The content makes sense and is in logical order

1 Keyboard & screen reader actions

When I use	I see/hear
Arrow	Browses the content

2 Mobile screenreader gestures

When I use	I hear
Swipe	The content makes sense and is in logical order

3 Screenreader output for all devices

Reads	I hear
Name	The content makes sense and is in logical order

Developer notes

Do not use aria-label to add context. Some screenreaders will not read aria-label from non-interactive components.

Code examples

<p>Get a $10/mo discount with autopay</p>
<s class="h-bravo">
  <!-- Give context to the first number -->
  <span class="hidden">
    Original price:
  </span>
  $50
  <!-- Give context to the first number -->
  <span class="hidden">
    /mo
  </span>
</s>
<span class="h-bravo">
  <!-- Give context to the second number -->
  <span class="hidden">
    Price with $10 autopay discount
  </span>
  $40/mo
</span>

Get a $10/mo discount with autopay

~~Original price: $50 /mo~~ $40/mo