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

4
我正在尝试让屏幕阅读器读取已禁用的数字微调器/文本框的值,以使它们不能被编辑。这些框的值在上下文中非常重要,但是屏幕阅读器(在此情况下为JAWS)只将小部件的值读为“不可用”。我尝试将aria-required ='true'设置为无效。是否有其他方法可以让屏幕阅读器说出这些值?
<input id='exampleInput' disabled='true' aria-required='true'>1</input>

3
我认为你需要将它设为只读。 - Mike Cheel
我无法将元素设置为只读,因为这会干扰其他的 JavaScript。我尝试了 aria-readonly,但是 disabled 会覆盖它。 - Tui Popenoe
通常的解决方案是使用readonly而不是disabled(出于您提到的原因)。 - Mike Cheel
移动该值到一个隐藏输入框怎么样? - Mike Cheel
“readonly 的问题在于值将以表单的形式传递。” - 那么当表单提交时,将它们设置为 disabled - CBroe
显示剩余3条评论
2个回答

3

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

如果这会影响到您的JavaScript,则建议更改JavaScript代码,以便检查除了disabled属性之外的其他内容。

这可以通过使用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


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接