jquery - 当单击按钮时文本发生更改时，屏幕阅读器(即 JAWS)不会读取该按钮的文本？

Question

在启用我的软件 ARIA 辅助功能时，我遇到了一个小困难。任何形式的帮助将不胜感激!

我有一个 div，它用作使用 jQuery 的单击事件的“编辑”按钮。我正在更改点击事件中“保存”按钮的文本。当焦点第一次到达该按​​钮时，像 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");
});

Answer 1

第一:考虑可访问性并对其进行测试的 Prop !但是aria它的功能实际上是为了扩展 html 来处理它本身无法处理的交互式事物。 html 完全可以处理按钮。所以使用 button请在这里，您可以跳过 role和aria-label 。

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

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