Dynamically add aria-hidden label to a backbone view

Question

I want to dynamically hide this backbone view. At the same time, when it's hidden, screen reader shouldn't read this text. However, it is still reading it. I'm not sure why it is doing this. Please help!

This is a code on backbone view. I have another child backbone view component that will be attached to this view by id. When it meets the condition (isTrue), this view will be hidden visually and on Screen Reader.

<div id="id_of_the_view" {{#if isTrue}} aria-hidden="true" style="display: none;" {{else}} class="otherClasses" {{/if}}></div>

Unfortunately Screen Reader can still read load the header text and body text from child backbone view when the page is re-rendered. If you have any clues, please help!! Thanks in advance!

Answer 1

If you are going to hide the element visually via CSS display:none then you don't need aria-hidden. Visually hidden elements are removed from the accessibility tree and thus hidden from screen readers.

Do you have a jsfiddle or similar example to try? I hide elements all the time with CSS and the screen reader can't access them.