javascript - 如何告诉屏幕阅读器阅读切换元素

标签 javascript html toggle accessibility wai-aria

我没有在 DOM 中添加/删除我的不同部分,我只是用 aria-hidden="true" 隐藏它们, 并在确定的情况下取消隐藏它们 <a>单击切换。

原因是性能和更简单的 noscript 回退。 DOM 中的顺序不是问题出现的顺序。

结果是一个二元问题树(是/否问题),用户可以在其中从一个问题点击到下一个问题。

现在什么是让屏幕阅读器阅读某个部分或至少在取消隐藏后继续阅读下一个部分的好解决方案?

有没有办法用 live-region ?屏幕阅读器会读取其中未隐藏的元素吗?我以为aria-current可能合适吗?或者它更像是一个 aria-expanded申请?

感谢您的帮助!

最佳答案

ARIA live regions毫无疑问是处理此类问题的正确方法。

通过在 HTML 元素上使用 aria-live 属性,辅助技术将在这些区域之一的内容发生更改时收到警报。您对属性值的选择将指定宣布更改的速度(立即或在下一个适当的机会)。最常见的实现通常是 aria-live="polite"

此页面概述了一些用于实现实时区域的非常有用(和创新)的技术:https://terrillthompson.com/tests/aria/live-scores.html

关于javascript - 如何告诉屏幕阅读器阅读切换元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47271443/

相关文章:

jquery - 表格在 Firefox 中的 jQuery.toggle() 之后留下边距

javascript - 我的 Chart.js Canvas 在 hide() 函数后消失

javascript - 提交表单时隐藏 DIV

javascript - Bootstrap 下拉列表在初始 ajax 表单提交后不起作用

javascript - Sidr.js 相当于没有 jQuery 的 AngularJS

javascript - 在 Angular JS 中使用 HTML 版本控制渲染动态 UI

javascript - 创建一个 div 表格

javascript - 包含 ng-model 和 ng-repeat 后切换开关不切换

javascript - 我可以决定调用不存在的对象方法时会发生什么吗?

javascript - RegEx 测试方法在应该为 true 时返回 false