问题描述
我想动态隐藏这个主干视图。同时，当它隐藏时，屏幕阅读器不应阅读此文本。然而，它仍在阅读它。我不确定它为什么这样做。请帮忙！
这是主干视图上的代码。我有另一个子主干视图组件，它将通过 id 附加到此视图。当它满足条件 (isTrue) 时，此视图将在视觉上和屏幕阅读器上隐藏。
<div id="id_of_the_view" {{#if isTrue}} aria-hidden="true" style="display: none;" {{else}} class="otherClasses" {{/if}}></div>
不幸的是，当页面重新呈现时，屏幕阅读器仍然可以从子主干视图中读取加载标题文本和正文文本。如果你有任何线索，请帮忙！！提前致谢！
解决方法
如果您打算通过 CSS display:none 可视化隐藏元素，那么您不需要 aria-hidden。视觉上隐藏的元素会从辅助功能树中移除，从而对屏幕阅读器隐藏。
你有 jsfiddle 或类似的例子可以尝试吗？我一直使用 CSS 隐藏元素，屏幕阅读器无法访问它们。