CODEWITHSUNDEEP
jqueryaccessibilitywai-ariauiaccessibilityjaws-screen-reader
Aagam Jhaveri
Aagam Jhaveri

Reputation: 234

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

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 i.e. 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");
});

Upvotes: 1

Views: 5041

Answers (2)

Adam
Adam

Reputation: 18855

(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();
});

Upvotes: 2

jack
jack

Reputation: 2914

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>

Upvotes: 4

Related Questions