re announce a <p> under aria-live even if the text is same

Question

I am implementing a search box. One of the scenarios is that the total count of results must be announced. To achieve this I put the <p> tag inside of an aria-live region, and it announces it as expected.

Expected scenario:

User types a string --> hits enter --> results appear and string is announced.

The edge case is if the user hits enter twice.

If the user presses enter again without any changes, nothing is updated since the count is still the same and nothing is announced.

I tried using this on enter click:

if (document.getElementById("header")) {
  const currentText: string = document.getElementById("header").innerHTML;
  document.getElementById("search-header").innerHTML = "";
  document.getElementById("search-header").innerHTML = currentText;
}

But, it still did not announce.

Is there another way to accomplish this?

Answer 1

I faced the same issue. I modified the string with the addition of period, in the end, if the same string is added again to the aira-live div.

I compared the new text value with the existing one in tag, if the value is same then I added period (.) to the incoming string.

if (msg == $(".aria-live-div").text()){
    msg = msg + "."
}

Answer 2

I ran into a similar situation recently. You've already implemented half of the solution (resetting the innerHTML to an empty string, then setting it to the currentText). The other half of the solution is to set the aria-relevant attribute to all.

By default the aria-relevant attribute is set to additions text, but that leaves out the removed option. Since you need the screen reader to pickup the change to an empty string (when you remove the text), you need to set the attribute to all (which is the same as additions text removed).

As a best practice the aria-relevant attribute should normally be left alone, but I haven't found another way to get the screen reader to make the same announcement twice.

In your case I would also add the aria-live property directly to the element with an id="search-header". It should look something like this:

<h6 id="search-header" aria-live="polite" role="status" aria-relevant="all">
  X items found
</h6>

You can read more about the aria-relevant attribute here.

And, there's more information about aria-live regions here.

Answer 3

You can use this in addition

document.getElementById("search-header").setAttribute('aria-label', text)