Menu
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?
885
To hide an element to screen readers (and child elements), simply add the aria-hidden="true" attribute.
Typically, a screen reader will start at the top of a website or document and read any text (including alternate text for images). Some screen readers allow the user to preview information, like the navigation bar or all the headings on a page, and skip the user to the desired section of the page.
Screen readers generally ignore anything with display: none, therefore it is not read out to screen readers. There are various ways of having things hidden visually or non-visually, so we'll run through the cases and techniques for each.
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
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
