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

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

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

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

使用两个按钮，显示＆＃34; Save＆＃34;单击＆＃34;编辑＆＃34;并隐藏＆＃34;编辑＆＃34;按钮。

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

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

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

2 个答案: