屏幕阅读器，即 JAWS 在单击该按钮时更改文本时不读取该按钮的文本？答案

【问题标题】：Screen reader i.e. JAWS doesn't read text of a button when text is changed on click of that button?屏幕阅读器，即 JAWS 在单击该按钮时更改文本时不读取该按钮的文本？
【发布时间】：2017-07-04 20:32:17
【问题描述】：

在启用我的软件 ARIA 可访问性时，我遇到了一个小困难。任何形式的帮助将不胜感激！

我有一个使用 jQuery 的带有单击事件的“编辑”按钮的 div。我正在点击事件中更改该按钮“保存”的文本。像 JAWS 这样的屏幕阅读器会在焦点第一次到达该按钮时读取“编辑按钮”。

但我希望 JAWS 能够识别单击事件后发生的更改，即单击 JAWS 后应显示“保存按钮”。有什么帮助吗？（请注意，即使点击后，焦点仍停留在同一个按钮上）

该 div/按钮的 HTML 代码：

<div role="button" class="js-btn" aria-label="Edit">Edit</div>

处理点击事件的jQuery代码：

$(document).on("click",".js-btn",function(e){
    $(this).innerHTML("Save");
    $(this).attr("aria-label","Save");
});

【问题讨论】：

我不确定这是否会专门解决问题，但请使用button 按钮！浏览器和辅助技术根据语义附加了各种原生行为和样式，虽然你可以用 aria 模拟它，但这绝对是最后的手段。 <button class="js-btn">Edit</button>。不需要 aria-label 或角色。
尝试添加 aria-live="polite"

标签： jquery accessibility wai-aria uiaccessibility jaws-screen-reader

【解决方案1】：

首先：考虑可访问性并对其进行测试的道具！但是aria 和它的特性实际上是为了扩展 html 来处理它本身无法处理的交互式事物。而html完全可以处理一个按钮。所以请在这里使用button，你可以跳过role和aria-label。

拥有本机语义可能足以让 JAWS 注意到文本的变化 - 不确定，但值得一试。如果没有，您可以将 aria-live="polite" 或 aria-live="assertive" 添加到您的 button 中，这应该会提示 SR 在其内容更改时宣布。（使用哪一个取决于您想要通知用户的程度——polite 不会打断他们正在做的任何事情，assertive 会。）

<button aria-live="polite" class="js-btn">Edit</button>

【讨论】：

【解决方案2】：

（请注意，即使点击后，焦点仍停留在同一个按钮上）

如果这是您的预期行为，这就是您问题的答案：只要焦点停留在元素上，屏幕阅读器就不会重新读取其数据。

使用两个按钮，点击“编辑”后显示“保存”按钮，隐藏“编辑”按钮。

<button id="edit">Edit</div>
<button id="save" class="hidden">Save</div>

$("#edit").on("click", function() {
    $(this).hide();
    $("#save").removeClass("hidden").focus();
});

【讨论】：

我决定使用两个不同的按钮并更改可见性和焦点，并且成功了！谢谢