question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Summary list action links visually hidden text are read out without spaces in screen readers

See original GitHub issue

What

This is a report from a screen reader user:

https://design-system.service.gov.uk/components/summary-list/

You use visually hidden text to give your links unique and descriptive names. Unfortunately, you often omit the space between the words. This can make the names harder to recognize when speech synthesizers mispronounce the combined word. For example:

“Open this summary listexample in a new window” “Changename” “Changedate of birth” “Changecontact information” “Changecontact details”

I believe that I missed this as audibly it sounds correct to me, but I imagine depending on how you have your screen reader configured, for example how fast you have words announced, it could make it hard to understand.

I’ve managed to reproduce this issue in NVDA + Firefox and used the ‘speech viewer’ tool to see what the user has found.

The user has also let us know that the following combinations have the same issue, which suggests that it’s an issue with most screen readers:

Orca 3.28.0 with Mozilla Firefox 70.0.1 on Ubuntu Mate 18.04 NVDA 2019.2.1 with Mozilla Firefox 70.0.1 on Microsoft Windows 10 NVDA with Google Chrome 78.0.39 on Microsoft Windows 10. JAWS 2019.1809.28 with Mozilla Firefox 70.0.1 on Microsoft Windows 10 JAWS 2019.1809.28 with Google Chrome 78.0.39 on Microsoft Windows 10.

Recommend that we consider testing with tools like ‘speech viewer’ in the future to help catch issues like this.

I tried a quick fix by adding   instead of a space character, and that seemed to resolve this issue, but we’d want to test this across screen readers.

I will also raise an issue in the design system website for the related issues there.

Who needs to know about this

Developers

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:16 (12 by maintainers)

github_iconTop GitHub Comments

1reaction
NickColleycommented, Feb 14, 2020

Had a chat with Ollie.

We’re going to try to make reduced test cases to raise bugs with the assistive technology vendors as the accessibility tree is correct, this process may also help us learn more about the underlying issues and also the vendors themselves may be able to give us advice if they’ve seen this sort of issue before.

0reactions
lfdebruxcommented, Aug 13, 2021

Thanks for sending that over @ladine-cook, that was very useful.

It looks like again they were seeing this issue with JAWS (versions 18 and 19), although I’m not sure whether it was with Firefox or IE11.

I can reproduce the issue using the check your answers pattern example in AssistivLabs with JAWS 2021.2103.174 and Firefox or Chrome, but not with JAWS and IE11.

It’s a bit of a shame that nothing has moved on the issue we raised with JAWS https://github.com/FreedomScientific/VFO-standards-support/issues/372, I’ve leave a message on the issue to see if we can’t get this fixed upstream.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Links - Usability & Web Accessibility - Yale University
Combine Adjacent Links into a Single Link; Hidden Link Text ... In that case, a screen reader may only read the link text...
Read more >
How to Hide Text from Screen Readers | Pluralsight
To hide text from a screen reader and display it visually, use the aria-hidden attribute and set it to true. To hide text...
Read more >
Screen Readers and details/summary - Accessible Culture
Links nested in the summary are not present in Browse Mode, nor are they to be found in the screen reader's links list...
Read more >
Technique C7:Using CSS to hide a portion of the link text - W3C
This technique to hide link text has been advocated by some screen reader users and corporate Web authors. It has proved effective on...
Read more >
CSS in Action - Invisible Content Just for Screen Reader Users
These styles will hide content from all users. The content is removed from the visual flow of the page and is ignored by...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found