Is there a way to prevent a screenreader from repeating information in a 'show more' situation?

Question

Background: We receive information in a very specific way from various connectors, and then we spit out that information via our interface, with specific branding. Because of that, we don't have control over what information we get.

Ideally we would have a short summary and a long summary, but instead we have to pull from the long summary to create the short summary.

We had two options - one was doing a "... View More" for the short summary and "Con't from Above..." for the long summary. But the option we settled on is simply repeating the ~500 characters of text (~200 for mobile) when they jump down to the full summary. This does mean that the user will have to re-read what they just read; in the case of a screenreader, it will reread the entire paragraph out loud, and someone who is blind can't "scan for where they left off."

Here is an example

I guess my question is, how inaccessible is this? Both to sighted users and users with visual impairments? We don't have a ton of options here.

Answer 1

Why not use aria-hidden? See here : https://www.w3.org/TR/wai-aria-1.1/#aria-hidden

You could wrap the content you don't want the non-sighted user to hear by using aria-hidden. So whenever the user jumps down to that part the screen reader will skip over this part.

That way sighted users can just skip to the part they haven't read yet and non-sighted users using screen readers will skip to the first paragraph after the section you have identified as aria-hidden.

Answer 2

From a pure accessibility perspective (WCAG), you are ok. Your text is accessible. Your question is really more about "user experience", which is a fantastic thing to ask when combined with accessibility. That means you're looking at more than just "checking off a box" on the accessibility list and want to make the experience delightful for everyone.

One thing to keep in mind for your "view more" link, make sure there's an aria-describedby attribute on the link so that if a screen reader user just tabs through all the links, or brings up the dialog displaying all the links, they don't just hear "view more" and not know its context. I can give more tips on how to implement that if needed.

I would also spell out "continued" instead of "con't", but you might have just shortened that in describing your problem because the full word appears on your screenshot.

Another possibility might be to have two links to the continued description. One is as you have it now in the screenshot. I'm guessing the "view more" link moves your focus to the "continued summary" section (which, grammatically isn't quite correct - the summary isn't "continuing" because you are repeating the first part again - it's really the "full" summary).

You could have a second visually-hidden link (for screen reader users) that moves the focus to the full summary and positions the focus in the middle of the paragraph where the previous short summary ended. The drawback with that is that there will be a visually hidden tab stop that some keyboard users might notice. That is, they'll tab to "view more", see an outline or some visible focus indicator around the link, then tab again and the focus seems to disappear from the screen (because it's on the hidden link), and then tab again and the focus appears on the next focusable object (the "info" link under your first call to action).

If you try this "hidden" link, you may want to do some quick usability tests to see if it makes sense.

Your visible link could be "read full summary" and the hidden link could be "continue reading the full summary". It's a subtle difference that you might have to tweak with a content or design expert. Or maybe having both links visible might be good for everyone.

Or your "view more" could expand the current summary rather than taking you to another place on the page. That's kind of what I expect with a "view more" link.

Answer 3

The easiest thing you can do is making your "view more" link point to the rest of the text (not to the start of the text).

<div class="summary">Beginnning of summary <a href="#rest">view full summary</a></div>

<!-- other things -->

<div class="summary_rest">Beginnning of summary 
    <a id="rest" tabindex="-1"></a> This is the rest of the text</div>

This way a screenreader user when clicking "view full summary" will not read twice the same text.

A repetition will still occur when reading the full page, but this is something you can't avoid. For instance, an user with low vision using both a software magnifier and a screenreader must be able to make its screenreader read what appears on the screen. No matter if it has already been read. This is perfectly unavoidable.

For the exact same reason, never use hidden accessibility links which won't benefit to users using screen magnifier.

But you can make some improvements : if you can make a new paragraph, and, as already suggested by @slugolicious, indicate more clearly the headings of the different parts, like "Abstract summary" and "Full summary" instead of "Summary", and "continued summary".