javascript - 如何强制 Mac 屏幕阅读器自动读取 div 中的标题文本？

Question

所以我有一个 SPA Angular 1.5 应用程序，当用户导航到新页面时，有时该页面没有任何自动聚焦的输入，例如，它只是一个祝贺页面，表示用户注册成功。我已经能够通过执行

提出一个稍微有点hacky的解决方案

$('.注册确认').attr("tabIndex", 0).focus();

所以屏幕阅读器会自动读出注册确认div中的文本，但随后我还必须防止CSS中的蓝色轮廓脱离焦点

.注册确认{ ＆:重点 { 轮廓:0；//移除焦点上的 webkit 注入(inject)轮廓 } }

有没有更简单的方法来做到这一点？也许有 aria 属性？

Answer 1

是的，停止这样做 - 根本没有很好的可访问性，特别是因为你现在因为弄乱了焦点指示器而让我感到困惑。 ARIA Angular 色是处理此问题的正确方法:

• 如果您尝试报告错误，则应该得到 ARIA role="alert" ，屏幕阅读器会立即宣布该内容，并且具有侵入性，因此不应随意使用。
• 要报告成功或其他进度，您可以使用 ARIA role="status" ;但是，仍然不要滥用它。例如，如果用户通过后续步骤跳转到成功注册屏幕，则将其应用于除简单的“恭喜”以外的任何内容都是不合适的。

我建议查看 ARIA 最佳实践文档以了解各种示例用途。