RE: how to code strikethroughs for a screen reader [SEC=UNCLASSIFIED]

Hi Char,

In HTML, the <del> tag is used to identify text that has been deleted from a document but retained to show the history of modifications made to the document.  Pair a <del> element with an <ins> element to identify the inserted text that replaced the deleted text.

For example:
<del>old text</del>
<div>
<ins>New text</ins>
</div>
<div>
<p style="text-decoration:line-through;"> Using style</p>
</div>

Will be displayed visually as

old text
New text
Using style

In NVDA, Settings > Document Formatting > Font Attributes property helps to announce strikethrough.
In desktop mode both NVDA and JAWS,  Insert + F (or relevant modifier key + F) announces the formatting information of the current text in both HTML and other word processors.

Below is the NVDA screen reader speech:

·       Deleted strikethrough  not underlined old text

·       Inserted no strikethrough  underlined New text

·       strikethrough  not underlined Using style

text-decoration:line-through is a CSS property and does not carry any semantic meaning  as inserted or deleted for screen readers.

To answer your question on conveying the intent, it depends on the context.
For example,

·       If it’s the price information, “Was $40 and save $20” is easier to understand than using strike through.

·       For a document or consultation review updates,  to convey that the text has changed, you can add a document modification legend similar to the one below.

For screen reader:
deleted indicates text removed.
inserted indicates updated text.

I recommend to try with different screen readers how the legend and the strike through works in different browser, AT combinations.

For visual user (and hide it using aria-hidden):
The red shaded striked-through mark-up  indicates deleted text, the green shaded mark-up with dashed underline indicates inserted text.

Hope this helps!

Regards,
Herin

From: Phill Jenkins [mailto:pjenkins@us.ibm.com]
Sent: Wednesday, 4 March 2020 10:34 AM
To: alands289@gmail.com; Char Easter <ceaster@seattletimes.com>
Cc: w3c-wai-ig@w3.org
Subject: Re: how to code strikethroughs for a screenreader

EXTERNAL EMAIL: Do not click any links or open any attachments unless you trust the sender and know the content is safe.




What?
generally, we should *not* be hacking things just for screen readers.
Did anyone ask the screen reader developers if they support strike-through? ask about super-script, sub-script, italics, etc. while you're asking.

If it isn't supported by the screen reader, then its a screen reader bug! that needs to be fixed / supported.

but I believe it is supported via a user setting. For example, See
JAWS Techniques for Examining Text Formatting<https://doccenter.freedomscientific.com/doccenter/doccenter/rs25c51746a0cc/2012-06-20_textformatting/02_textformatting.htm>

However, I'm not sure JAWS supports styling like "text-decoration:line-through" because it may not really be a text attribute.

From 2005, a thread said:
Now, with my settings on "attributes", my JAWS is also reading
"strikethrough".
If this is not clear, or what you get is not what you expected, please
consult your help for JAWS.
___________
Regards,
Phill Jenkins


[Inactive hide details for ---03/03/2020 05:08:32 PM---Char,   That is a very interesting question.   Here is what I do that wor]---03/03/2020 05:08:32 PM---Char, That is a very interesting question. Here is what I do that works great. On the product

From: <alands289@gmail.com>
To: Char Easter <ceaster@seattletimes.com>, "w3c-wai-ig@w3.org" <w3c-wai-ig@w3.org>
Date: 03/03/2020 05:08 PM
Subject: [EXTERNAL] 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<mailto:ceaster@seattletimes.com>
Sent: Tuesday, March 3, 2020 5:31 PM
To: w3c-wai-ig@w3.org<mailto:w3c-wai-ig@w3.org>
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: ceaster@seattletimes.com
m: 206.779.2427







*********************************************************************************
This e-mail message (along with any attachments) is intended only for the named addressee and could contain information that is confidential or privileged.  If you are not the intended recipient you are notified that any dissemination, copying or use of any of the information is prohibited.  Please notify us immediately by return e-mail if you are not the intended recipient and delete all copies of the original message and attachments.

This footnote also confirms that this message has been checked for computer viruses.

*********************************************************************************