RE: how to code strikethroughs for a screenreader

Char,

That is a very interesting question.

Here is what I do that works great.

On the product pages with strikethrough text, strikethrough text is not announced by screen readers. Therefore, non-visual users will not have communicated to them that the original price is no longer valid and thus “striked through”. The text will need further coding.

How is this a problem:

Non-visual users will not understand what the two different prices mean when the screen reader announces them. This may be during a read all of the page, a virtual read of the text or text announced from a link.

How to fix:

Add a span before the strike through amount with the words original price (or equivalent term). Have the span be your supported visuallyhidden class so it does not show on the screen.

<span class=""visuallyhidden"">Original price</span>

<span style=""text-decoration: line-through"">$70.00</span>

I hope this helps.

Alan Smith

From: Char Easter
Sent: Tuesday, March 3, 2020 5:31 PM
To: [email protected]
Subject: how to code strikethroughs for a screenreader

Hello,

Is there a way a screen reader can read a strikethrough on text so a screen reader user can interpret the meaning/intent?

Thanks,

Char Easter

UX Designer at The Seattle Times

p: 206.464.2945

e: [email protected]

m: 206.779.2427