Categories
html5 screenreader testing

Strikethrough Accessibility

Strikethrough <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.

Screenshot of two similar examples of a product with an active and crossed out price. A red arrow points to each of the crossed out prices.

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 test cases and the level of support. Note that the strikethrough element is mapped to the deletion ARIA role which we’ll use in test Scenario 2.

Test Cases

Four code scenarios were tested against 6 screen reader/browser/OS combinations including VoiceOver, NVDA, JAWS, and TalkBack. The actual test cases used are in the second portion of the CodePen Negative number and strikethru tests.

Scenario 1: strikethrough element only

Price: $200 $100

Price: <s>$200</s> $100

The plain old semantic HTML—an S element around the text. This is obviously the ideal code, but support isn’t quite there yet. Only NVDA and TalkBack passed.

Scenario 2: strikethrough with ARIA ‘deletion’ role

Price: $200 $100

Price: <s role="deletion">$200</s> $100

This is similar to Scenario 1, but with the addition of role=”deletion”. The test results were similar to without the role. The only difference is that VoiceOver on iOS also passed.

Scenario 3: strikethrough with visually hidden text

Price: original price$200 sale price$100

Price: <span class="visually-hidden">original price</span><s>$200</s> <span class="visually-hidden">sale price</span>$100

This test case uses the old school technique of visually hiding text via CSS. “Original price” outputs before the price with the strikethrough, and “Sale price” outputs before the valid price.

All screen readers passed this scenario.

Scenario 4: strikethrough with visually hidden pseudo-content

Price: $200 $100

Price: <s>$200</s> $100

#pseudo s::before {
  content: " [start of stricken text] ";
}

#pseudo s::after {
  content: " [end stricken text] ";
}

#pseudo s::before,
#pseudo s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  width: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

The fourth test case has the same HTML has Scenario 1. But then applies a brilliant method by Adrian Roselli introduced in 2017 in the article Tweaking Text Level Styles. Pseudo-content (creating a textual phrase via CSS) is used to indicate when the strikethrough starts and ends.

There are a couple issues to mention with this approach:

  1. Since NVDA now supports the strikethrough tag, it indicates the semantics twice — both the S element semantics (“deleted”) and the pseudo-content (“start of stricken text”) which creates ambiguity for the user.
    1. Oddly, the double semantics is not conveyed by TalkBack which did pass the previous three scenarios.
  2. With JAWS, the output is broken up with multiple stops which makes it difficult to follow. (Changing the brackets to parentheses might help.)

This technique technically works for all screen readers, but the user experience is very confusing for NVDA users.

Test Results

Does screen reader output “deleted”, “stricken”, or similar?

Test Results
iOS + Safari + VO MacOS + Safari + VO Android + Chrome + TalkBack Win + Chrome + NVDA Win + Firefox + NVDA Win + Chrome + JAWS
Scenario 1 No No Yes Yes Yes No
Scenario 2 Yes No Yes Yes Yes No
Scenario 3 Yes Yes Yes Yes Yes Yes
Scenario 4 Yes Yes Yes Yes Yes Yes

Conclusion

NVDA has the best support for <s>, the strikethrough element. For now, to best support screen readers overall, we should continue to use Scenario 3 — strikethrough with visually hidden text — to programmatically convey strikethrough semantics. Doing so will ensure that everyone understands strikethrough semantics while browsing the web which often means knowing the correct price of a product or service.

Further reading

Categories
testing wcag2

The Accessibility Interpretation Problem

Some aspects of digital accessibility can be straight-forward. But many are complex and can be subjective, especially when interpreting WCAG 2.0 guidelines. The following tweet is humorous because there’s a strong ring of truth to it—if you ask 10 accessibility specialists you will get 20 different answers.

https://twitter.com/arigaud_ca/status/649218118422802432

Inconsistency in accessibility reporting can be a big problem in an organization and its employees. In the white paper A11Y Wars: The Accessibility Interpretation Problem, Glenda Sims (@goodwitch) and Wilco Fiers (@wilcofiers) do a deep dive into this issue. Topics in the paper include:

  • Summary of Findings
  • Causes of Interpretation Problems
  • Causes of WCAG 2.0 Interpretation Differences
  • Accessibility Peace Model
  • Standardization
  • Recommendations

The paper proposes an “Accessibility Peace Model” which helps clearly define the perspective your organization is using for accessibility testing. This will reduce inconsistencies in accessibility testing and reduce the natural tension between the goals of users, designers, developers, testers, trainers, project managers, and executive employees. In turn, this will save much time, hassle, and ultimately lower costs.

The Accessibility Peace Model recognizes that there are different, equally valid, ways to use WCAG 2.0. To get consistent results, organisations should define with what perspective they want their tests to be done. This is by no means the only measure that needs to be taken to ensure consistency, but it does make discussions on interpretations significantly more effective.

If your organization is serious about accessibility, consider reading A11Y Wars: The Accessibility Interpretation Problem.

This white paper was presented by Glenda and Wilco at CSUN 2018 in San Diego, CA, and are also presenting on the topic this week at AccessU 2018 in Austin, TX.

Categories
csun presentations roundup testing wcag2

CSUN17 Review

Another successful CSUN Assistive Technology Conference has come and gone. Below is a curated list of slide decks, reviews, photos, and more. Also check out my CSUN17 preview.

Slides etc. from presentations

Feel free to cite more in the comments.

Workshops

Other reviews, etc.

More awesome stuff

WCAG 2.1 First public working draft. Also see Quick Guide to WCAG 2.1 First Public Working Draft by David MacDonald

By IBM Va11yS, or Verified Accessibility Samples, is a repository of live working code samples that designers and developers can easily access to test with different assistive technologies and tools.

OATMEAL – An accessibility testing methodology for the web, by eBay. Stands for Open Accessibility Testing Methods for Experts And Layfolk—nice!

Mind Your Lang by Adrian Roselli from role=drinks event.

Photos

Terry Thompson speaking on audio description at CSUN17
Terry Thompson speaking on audio description at CSUN17
Denis Boudreau fills the Deque Suite at CSUN17
Denis Boudreau fills the Deque Suite at CSUN17
Karaoke at CSUN17, Makoto and Matt lead C-S-U-N
Karaoke at CSUN17, Makoto and Matt lead C-S-U-N (to the tune of YMCA)

More from CSUN17 Flickr album by Dennis Lembree

Categories
roundup testing

Link Roundup – June 2015

Categories
jobs mobile testing

Accessibility Jobs, Sept 2014