How do I hide a 'show more' button from a screen reader?

Question

I have a banner on my webpage with some truncated text and a 'show more' button that sighted users can click on to get the full text. I wanted to include the full text (but visually hidden) on the page and hide the show more button for screen readers so that they don't have to do an extra click for what is essentially a visual, space saving layout.

At first glance aria-hidden="true" seems like the right way to do this but this is not for focusable elements. I could remove it from the tab-index using tabindex="-1" but I want the button to be focusable for sighted users.

How can I achieve this?

Answer 1

The simple answer is that you can't do what you want but it's a nice thought to consider it. Because you can't query whether a screen reader is running, you can't really adjust the page. If you want a button for sighted users to click on to see more text, it has to be keyboard focusable (WCAG 2.1.1) and must announce the name of the button (WCAG 4.1.2). There's not a way to hide the button from screen reader users that wouldn't affect sighted users too.

You are correct that both aria-hidden and tabindex="-1" would cause issues for some users.

Two alternatives are just to make the "show more" interface work the same for all users and don't worry about having the full text for screen reader users unless they select "show more". Yes, a screen reader user isn't limited by screen real estate and the full text could be there for them rather than requiring the button, but it's ok to have the same UX for all users. But again, it's nice that you are thinking about the experience for a screen reader user.

The other alternative is to have the full text for screen reader users and a visibly hidden label on the "show more" button that says the button is mainly for sighted users to show the full text so the screen reader user can ignore it. Roughly, it could look something like this:

<p aria=hidden="true">Lorem ipsum dolor...<p>
<p class="sr-only">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<button aria-describedby="foo">
  show more
</button>
<span class="sr-only" id="foo">expands the full text for sighted users but the full text is already there for screen readers</span>

Answer 2

I think there's a slight assumption here that screen reader users don't need to have the full text expanded on the page as sighted users do. While there are ways you could convey the hidden text to screen readers (using aria-describedby for instance), this wouldn't allow screen reader users to navigate the full text using the virtual cursor.

For example, when I use a screen reader to read a body of text, I may want to skip a few words or paragraphs, or perhaps I may want to jump to a word I don't recognise to read it character by character. I can't do this unless the text is visible to the screen reader and the virtual cursor can navigate to it.

My solution for this would be to use aria-describedby or hidden text to convey to screen reader users that there is a "Show more" button, and then keep the "Show more" accessible (i.e. don't use tabindex="-1" on the button and don't use aria-hidden). Perhaps you can ensure that focus moves to the full text body when the user presses the "Show more" button.