Is there a way to prevent a screen reader from reading text collapsed by a view less button

Question

I am working on a view more/view less button for comments in a forum app using angular, javascript and css. When the card is collapsed, only the first two lines of text will appear and the rest will be hidden. The problem is that a screen reader will still read the hidden text when the card is collapsed. I am using the NVDA screen reader.

The button should expand the card whenever a user clicks view more and collapse it when the user clicks view less. I have done this by using creating a viewMore Boolean variable and a button that changes the value from true to false and vice-verse on click. There are also two css classes that that make the overflow visible or invisible depending on the value of the Boolean. So the css should look something like this:

.viewLess {
    overflow: hidden;
}

.viewMore {
    overflow: visible;
    height: auto;
  }

The button is working fine, but the issue is that a screen reader will still read the hidden overflow text beyond the first two visible lines whenever the card is collapsed. Is there a way to stop a screen reader from reading the hidden overflow text when a card is collapsed, but still have it read the whole card when expanded? Thanks!

Edit: I have added two images showing the basic card and button without styling.

Collapsed Expanded

Answer 1

You'll want to learn more about ARIA attributes. In this case the easiest thing you could do is use aria-hidden="true" on the element when it's collapsed, and use JavaScript to switch it to aria-hidden="false" when it's open.

The best attributes will depend on your actual use case, however. You may want to look into the <details> and <summary> elements. This is the best way to handle collapsible content natively. This will be particularly helpful if you haven't learned any JavaScript yet.

To be clear, you'll want to make sure the elements and ARIA attributes you use are the best ones for your scenario, so it's good to do research on this.

Answer 2

As given in andrilla's answer, you should first consider using <details>/<summary> for your collapsable/expandable UI element.

This is standard, meaning that it's guaranteed to be working, accessible and consist in (almost) all past, present or future devices. These elements are around for several years now, so there shouldn't be many incompatible devices, if still any.

However, if you don't want, or can't use <details>/<summary>, the next thing to do isn't playing with aria-hidden. Here are a few reasons to not do it:

• There are screen readers which hide the contents as soon as the aria-hidden attribute is present, regardless of the value
• It's dangerous to play with aria-hidden, because you can easily create problematic situations. For example, forget to remove aria-hidden and end up with an hidden element that can take focus. You won't build something robust.
• The first rule of ARIA says that you should only use it if you really need to, meaning only if you don't have any better solution. And in fact there does have a better solution.

In fact, if you can't or don't want to use the standard elements <details>/<summary>, the next thing to do is to play with CSS display or visibility attributes. CSS display and visibility attributes are among the very few that are considered by screen readers.

The standard ensures that an element with CSS display:none or visibility:hidden is hidden, or otherwise said not displayed, unreachable, not read, regardless of the way the content is rendered to the user, be it on the screen, read by a screen reader, displayed on a braille display, etc. So this is definitely what you should use.

An element with display:none or visibility:hidden is automatically removed from focus order, so the kind of thing like an hidden element that can still have focus will never happen.