屏幕 reader 即，当单击该按钮时更改文本时，JAWS 不会读取该按钮的文本？

Question

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

我有一个 div，它作为 'Edit' 按钮使用 jQuery 来点击事件。我在单击事件中更改该按钮 'Save' 的文本。当焦点第一次出现在该按钮上时，屏幕 reader 就像 JAWS 读取 "Edit button"。

但我希望 JAWS 识别点击事件后发生的变化，即点击后 JAWS 应该读取 "Save button"。有什么帮助吗？（请注意，即使在点击后，焦点仍停留在同一个按钮上）

HTML 代码 div/button:

<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

首先：思考可访问性的道具，并对其进行测试！但是 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>

Answer 2

(Note that even after click, focus stays on the same button)

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

使用两个按钮，点击"Edit"后显示"Save"按钮，隐藏"edit"按钮。

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

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

屏幕 reader 即，当单击该按钮时更改文本时，JAWS 不会读取该按钮的文本？

Screen reader i.e. JAWS doesn't read text of a button when text is changed on click of that button?

jquery

accessibility

wai-aria

uiaccessibility

jaws-screen-reader