我正在努力使复杂的Web应用程序可访问 . 我现在正在处理的这篇文章涉及获得带有验证的表单字段，以便与屏幕阅读器很好地协作 .
整体结构是一个输入标签（#input-with-validation），带有控制验证的javascript . 根据输入的验证状态显示或隐藏单独的div（＃validation-error） .
我使用role =“alert”和aria-live =“assertive”的组合，在Windows上的Chrome，Firefox和IE中与JAWS一致 .
我正在寻找在OS X上使用Voiceover（Chrome / Firefox / Safari或其中任意组合）的正确方法 . 当#input-with-validation具有焦点时，行为应该是每个按键上的行为，如果存在验证错误，则从＃validation-error向用户读取完整的验证错误消息 .
它不应该从#input-with-validation改变焦点 . 我们可以使用wai-aria属性的任意组合，或以我们认为合适的任何方式更改结构 .
或者，是否有一种方法可以进行javascript调用，告诉Voiceover“现在阅读此文本”？这几乎解决了每一个问题 .
我们希望让互联网成为每个人都可以访问的地方，但它们肯定不是那么简单 . 谢谢你的帮助！
注意：我们的页面是一个主要用React编写的复杂Web应用程序 .
1 回答
在努力使所有用户组都可以访问页面时，您必须记住的一件事是，您可能选择使用几乎所有控件的早期阶段 . 这包括浏览器，小部件库，屏幕阅读器;真的是整个工具集 .
如果您测试并发现给定的ARIA功能不起作用，您可能不得不放弃某个浏览器/ AT组合 . 确保检查其他人是否有类似的问题支持您为您编写代码的人提出的索赔 .
我认为你在这里有正确的解决方案，我可能会做同样的事情 - 将验证消息放在一个自信的aria-live区域，并在某些东西关闭时将验证消息发送到这些区域 .
我找到了this bit of testing但是我可以在这个领域做很多工作 .