Is it possible to block a screen reader for certain text?

Question

I have some text on screen describing the button next to it. The button also has a aria-label on it with a much more descriptive indication of what it does.

Visually impaired users do not need to read the on-screen text as the aria-label holds the full context of the button's functionality.

Is there a method for indicating that the onscreen text should not be read by screen readers? All it does is add confusion to the visually impaired people viewing my page.

Thanks!!

Answer 1

You can use aria-hidden on the button to achieve this.

<button aria-label="...">
  <span aria-hidden="true">Some text</span>
</button>

From the docs :

Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree. This can be used for hiding duplicated content such as such as repeated text to improve the experience for assistive technology users