I'm trying to improve the accessibility of a button which tests a connection. If the connection is successful, the button text changes to 'Success'. If not, it changes to 'Not Working'. They look something like this:

<button aria-label="success">Success!</button>

<button aria-label="failure">Not Working</button>

I'm trying to find a way to alert the user of the content change of the button. So far, I've added aria-labels to read the 'success' or 'not working' title, but these are only read to the user if the user tabs/moves away from the button and then back onto it after the status has changed.

I've also tried wrapping the button's text in a <span> with a role="alert" in hopes that would notify the user that the text has changed, but no luck there either:

<button aria-label="failure"><span role="alert">Not Working</span></button>

I've also tried wrapping the button in a <div aria-live="polite"/>, but I have suspicion that this isn't working because no new elements are being added to the page, but rather the content of the elements has changed.

What's a good way to alert users of dynamically changed text content?

Thanks!

I'm trying to improve the accessibility of a button which tests a connection. If the connection is successful, the button text changes to 'Success'. If not, it changes to 'Not Working'. They look something like this:

<button aria-label="success">Success!</button>

<button aria-label="failure">Not Working</button>

I'm trying to find a way to alert the user of the content change of the button. So far, I've added aria-labels to read the 'success' or 'not working' title, but these are only read to the user if the user tabs/moves away from the button and then back onto it after the status has changed.

I've also tried wrapping the button's text in a <span> with a role="alert" in hopes that would notify the user that the text has changed, but no luck there either:

<button aria-label="failure"><span role="alert">Not Working</span></button>

I've also tried wrapping the button in a <div aria-live="polite"/>, but I have suspicion that this isn't working because no new elements are being added to the page, but rather the content of the elements has changed.

What's a good way to alert users of dynamically changed text content?

Thanks!

• javascript
• html
• accessibility

• 2 This button fails WCAG Success Criterion 2.5.3: Label in Name because the visible text ("Not working") is not present in the puted accessible name ("failure"). A speech control user will not be able to operate the button by saying "Click Not Working". There really isn't much point to the aria-label attribute here, it's just going to cause confusion. – andrewmacpherson Commented Aug 13, 2018 at 17:48

2 Answers 2

You were close with your attempts. You can have use aria-live and is the most appropriate solution. You don't have to add elements to the DOM for aria-live to work. Changing the text of an element is sufficient if you're using the default aria-relevant value. (If you don't specify aria-relevant, you get "additions text" as the default value.)

But you have to put aria-live on the element that is changing. In this case, the button itself. I tried the following and it worked just fine:

  <button onclick="myclick6()">change it</button>
  <button id='livebutton' aria-live="polite">Success!</button>

    function myclick6() {
      document.getElementById("livebutton").innerHTML = "Not Working";
    }

Just Create simple div with display none.

<div id="dynamicText" aria-hidden="true" aria-live="assertive" style="display:none"></div>

After that dynamically append the value inside the above div.

$('#dynamicText').html('Success'); Or $('#dynamicText').html('Not Working');