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

【问题标题】：How to get a screen reader to read a disabled element using aria?如何让屏幕阅读器使用 aria 读取禁用的元素？
【发布时间】：2014-03-05 20:38:20
【问题描述】：

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

例如：

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

【问题讨论】：

我认为您需要将其设置为只读。
我无法将元素设置为只读，因为这会干扰其他 javascript。我尝试了 aria-readonly，但 disabled 取代了它。
我能想到的唯一其他选择是使用 javascript 取消对输入的更改。
这与输入的变化无关，只是输入框的值（在示例中为'1'）没有被读取。
通常解决方案是使用只读而不是禁用（出于您提到的原因）。

标签： html wai-aria

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我最近遇到了类似的问题，我的解决方案是为所有禁用的按钮使用一些信息性文本，这些信息性文本只能由屏幕阅读器查看。我使用了一个按钮元素，所以它仍然在选项卡顺序中保留一个位置，所以如果屏幕阅读器用户正在通过将被宣布的表单进行选项卡，则需要实现一些代码以在实际输入后从 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

【讨论】：