Categories
screenreader survey webaim

WebAIM Screen Reader User Survey 10

Results of the 10th WebAIM Screen Reader User Survey are now published (Feb 22, 2024). Thank you WebAIM for continuing this valuable research and other research such as the WebAIM Million and the Survey of Web Accessibility Practitioners.

Highlights

As with previous surveys, WebAIM announced the results in a blog post containing notable items which include:

  • JAWS remains the highest reported primary desktop/laptop screen reader at 40.5% of respondents, though usage dropped compared to NVDA which is now the primary screen reader for 37.7% of respondents. VoiceOver usage remains relatively stable at 9.7%.
  • JAWS with Chrome, NVDA with Chrome, JAWS with Edge, and NVDA with Firefox are the most common screen reader/browser combinations.
  • 91.3% of respondents use a screen reader on a mobile device, with VoiceOver being the most popular by far at 70.6%.
  • Only 34.6% of respondents indicated that web accessibility has improved over the last year, a decrease from 39.3% in 2021.
  • Navigating through headings on a page remains by far the most common (71.6%) method of exploring page content. Heading levels (heading 1, heading 2, etc.) are reported as being very useful.

Self Describing

Not code-related, but another interesting noted item in the survey involves the trend of people describing their visual appearance to user at the beginning of a presentation (such as “I’m a dark haired white woman in my 40s wearing glasses and black lipstick”).

68.2% of respondents indicate that individuals should not describe what they look like during a virtual meeting or webinar.

My suggestion is to refrain from doing so.

Problematic Items

The most problematic items reported by screen reader users are as follows. WebAIM states the items are “largely unchanged over the last 14 years”.

  1. CAPTCHA – images presenting text used to verify that you are a human user
  2. Interactive elements like menus, tabs, and dialogs do not behave as expected
  3. Links or buttons that do not make sense
  4. Screens or parts of screens that change unexpectedly
  5. Lack of keyboard accessibility
  6. Images with missing or improper descriptions (alt text)
  7. Complex or difficult forms
  8. Missing or improper headings
  9. Too many links or navigation items
  10. Complex data tables
  11. Inaccessible or missing search functionality
  12. Lack of “skip to main content” or “skip navigation” links

WebAIM web accessibility in mind

Categories
jobs

Digital Accessibility Jobs, Jan 2024

Here’s a list of some recent job openings in digital accessibility — some great opportunities around the world!

U.S.

Jobs written on newspaper viewed thru magnifying glass

Categories
conference event

Upcoming Accessibility Events (2024)

Mark your calendar! Here are some terrific digital accessibility events coming up in 2024. Please add any good ones that I missed in the comments.

calendar icon says upcoming events

Categories
management

Your MVP Must Be Accessible

Your Minimum Viable Product (MVP) Must Be Accessible.

Full stop.

Related:

White bold letters M-V-P over a blue diamond over a dark blue background.

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