屏幕阅读器，即当单击按钮时更改文本时，JAWS无法读取按钮的文本吗？

Question

I am facing one minor difficulty while making my software ARIA accessibility enabled. Any kind of help would be appreciated!

I have a div which works as a 'Edit' button with click event using jQuery. I am changing text of that button 'Save' on click event. Screen reader like JAWS reads "Edit button" when the focus comes to that button for the first time.

But I want JAWS to recognise the change happened after click event ie After click JAWS should read "Save button". Any help? (Note that even after click, focus stays on the same button)

HTML code for that div/button:

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

jQuery code to handle click event:

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

Answer 1

First: props for thinking of accessibility, and testing for it! But aria and its features are really meant to extend html for interactive things it can't natively handle. And html can totally handle a button. So use button here, please, and you can skip the role and aria-label .

Having the native semantics might be enough to make JAWS notice the change in text - not sure, but worth a try. If it doesn't, you could add aria-live="polite" or aria-live="assertive" to your button and that should cue the SR to announce when its contents change. (Which one to use depends on how pushy you want to be about informing your user - polite won't interrupt whatever they're doing, assertive will.)

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

Answer 2

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

If it's your expected behaviour, this is the answer to your question : as long as the focus stays on the element the screenreader won't re-read its data.

Use two buttons, show the "Save" button after clicking on "Edit" and hide the "edit" button.

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

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