CODEWITHSUNDEEP
htmlaccessibilitywai-ariascreen-readersjaws-screen-reader
Rajasekar
Rajasekar

Reputation: 18978

How to restrict screen reader to not read a certain text?

Imagine, I have a <div> with aria-label as "Read this" (aria-label is added at runtime). Inside the <div>, I have a <span> with text "do not read this".

Now what Jaws is doing is, it reads both the text ("Read this" and "do not read this").

<div aria-label="Read this">
  <span>Do not read this</span>
</div>

The expectation is to only read "Read this". Is there anyway to restrict screen readers to force stop reading a text?

Upvotes: 7

Views: 9748

Answers (2)

user2634769
user2634769

Reputation: 1

works for JAWS 2018, chrome 72:

<div role="text" aria-label="Read this">
Do not read this
</div>

Upvotes: 0

Adam
Adam

Reputation: 18875

aria-hidden="true" is the thing you want

<div aria-label="Read this">
<span aria-hidden="true">Do not read this</span>
</div>

Note that not all screenreaders will read the aria-label on a div element and that it will result in a blank element

Upvotes: 9

Related Questions