如何解决将 aria-hidden 标签动态添加到主干视图
我想动态隐藏这个主干视图。同时,当它隐藏时,屏幕阅读器不应阅读此文本。然而,它仍在阅读它。我不确定它为什么这样做。请帮忙!
这是主干视图上的代码。我有另一个子主干视图组件,它将通过 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 隐藏元素,屏幕阅读器无法访问它们。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。