Strikethrough Accessibility – Web Axe

By admin

Strikethrough
PERSON

<s> is an HTML element to indicate text that is crossed out – usually indicated visually with a line through the middle of the text. The W3C definition is:

The s element represents contents that are no longer accurate or no longer relevant.

On e-commerce websites, a strikethrough element is often used to indicate a price is no longer valid and often has a reduced price next to it.

The problem is that most screen readers don’t output the strikethrough semantics. This can be very problematic to the blind user since they won’t know which price is valid. Most in-line semantic elements such as <em> and <mark> are not conveyed to screen readers actually. For more on that, reference the article Screen Readers support for text level HTML semantics by TPGi.

Let’s examine

four
CARDINAL

test cases and the level of support. Note that the strikethrough element is mapped to the deletion

ARIA
PERSON

role which we’ll use in test Scenario

2
CARDINAL

.

Test Cases


Four
CARDINAL

code scenarios were tested against

6
CARDINAL

screen reader/browser/OS combinations including VoiceOver,

NVDA
ORG

,

JAWS
ORG

, and TalkBack. The actual test cases used are in the

second
ORDINAL

portion of the CodePen Negative number and

strikethru
ORG

tests.