如何让屏幕阅读器使用 aria 读取禁用的元素

Question

我正在尝试让屏幕阅读器读取已禁用的数字微调器/文本框的值，以便它们不可编辑。这些框的值在上下文中很重要，但屏幕阅读器（在本例中为 JAWS）仅将小部件的值读取为"不可用"。我尝试将 aria-required='true' 设置为没有这样的运气。有没有其他方法可以让屏幕阅读器说出这些值？

前任：

<input id='exampleInput' disabled='true' aria-required='true'>1</input>

Answer 1

在这里使用只读属性是正确的选项。

如果这会弄乱你的JavaScript，那么我建议更改你的JavaScript，以便它会检查除禁用属性以外的其他内容。

这可以通过使用 Css 类或添加新属性来完成，或者您可以向 DOM 对象添加新字段并使用它。

Answer 2

我最近遇到了类似的问题，我的解决方案是对所有禁用的按钮使用一些信息文本，这只能由屏幕阅读器查看。我使用了一个按钮元素，因此它仍然保留在 Tab 键顺序中的位置，因此，如果屏幕阅读器用户正在通过 Tab 键宣布的表单，则需要实现一些代码，以便在启用实际输入后从 DOM 中删除元素。

当使用NVDA进行测试时，隐藏元素宣布为"数据值转到此处元素已禁用"，显然，您可以使用所需的任何文本。

.HTML

<input type="text" name="myDisabledElement" disabled="disabled">
<button aria-disabled=”true” class="sr-only">
     data value goes here element disabled
</button>

.CSS

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

你可以在这里看到抽象动作：http://codepen.io/chris-hore/pen/LEKyeM