javascript - 以编程方式设置 JAWS 光标焦点

标签 javascript focus usability wai-aria jaws-screen-reader

我正在开发一个需要通过 JAWS 访问的 Web 应用程序。有一个要求,即需要关注新打开的对话框才能由 JAWS 宣布。我实现了这个,并且在没有 JAWS 的情况下它也能正常工作:对话框的第一个元素具有焦点。使用 JAWS+IE 测试此网站显示该元素已获得焦点,但盲文查看器显示不同的内容(页面标题的一部分)并且也正在阅读。

据我了解,这意味着PC的光标是正确的,但JAWS的光标放错了位置。

有什么方法可以使用 JavaScript 影响 JAWS 光标的位置吗?

最佳答案

使用 JAWS 进行测试时,您不仅需要看屏幕,还需要听 JAWS 所说的内容。如果您需要测试来提供可靠的结果,请花时间深入了解 JAWS。

创建可访问对话框的最佳方法是:

  • 确保对话框标题具有 ID 属性。
  • 如果对话框有一条短信,请确保它也有一个 ID 属性。
  • 将容器的 Angular 色指定为“dialog”,并将 tabindex 指定为“-1”。
  • 确保容器的 ARIA-LABELLEDBY 属性包含标题 ID。
  • 确保容器的 ARIA-DESCRIBEDBY 属性包含短信 ID(如果有)。
  • 当对话框打开时,将焦点发送到容器。

如果您严格遵循此模式,您的对话框将与 JAWS 和其他 AT 完美配合。

简单的例子:

<div id="dlg_discard" tabindex="-1" role="dialog" aria-labelledby="dialog_heading" aria-describedby="dialog_message">
<h1 id="dialog_heading">Discard changes?</h1>
<p id="dialog_message">Are you sure you want to discard your changes?</p>
<button>Yes</button> <button>No</button>
</div>

...以及使对话框可见的 jQuery ...

$("#dlg_discard").show().focus();

关于javascript - 以编程方式设置 JAWS 光标焦点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30867367/

相关文章:

javascript - 在 IE 中,如何找到 <select> 元素中 <option> 元素的坐标?

Javascript、Chrome 无法识别函数外部的变量

c# - 后台按键监听器

java - 当 Button 获得焦点时更改图标

usability - Web 应用程序中具有多列的表

usability - 多级网格的 UI 设计模式

javascript - 防止 Scala 不必要地转义 XML 中的双引号

Javascript上传文件大小

html - 专注于粘性条强制页面中的输入以滚动到顶部

java - "Google Maps for Mobile"上的滚动如何工作?