1

We expect the screen reader to announce "an item is closed" after the node is closed. Interestingly, NVDA on Chrome announces it properly, while Android and iOS Voice Over fail to announce this message.

Here's typescript code:

@HostListener('keydown.tab', ['$event'])
removeFilterMsg() {
    const $message = document.createElement('span');
    $message.classList.add('RemoveFilter');
    $message.setAttribute('aria-live', 'assertive');
    $message.setAttribute('display', 'none');
    window.setTimeout(() => {
        $message.innerHTML = "Filter item is removed";
    }, 100);
    document.body.appendChild($message);
}

The html code that triggers the above function is:

<button attr.aria-label="School Name" class="active-node" title="School Name">
 School Name
<span style="color:white;font-size:20px;cursor:pointer;" aria-hidden="true" (click)="removeFilterMsg()"></span>
</button>

and this code will generate a span section at the bottom of the body.

<span class="RemoveFilter" aria-live="assertive" display="none">Filter item is removed</span>

Does anyone know what is the issue?

superninja
  • 3,114
  • 7
  • 30
  • 63

1 Answers1

2

You are not using aria-live correctly. I wrote a fairly lengthy answer about aria-live recently. You can see it at Snackbars not read by screen reader when triggered from a dialog

Essentially, you need an element with aria-live on your page at load time. aria-live is not intended to be a dynamic attribute nor to be added to your DOM dynamically. Chrome is being nice and announcing the newly added live region but you're getting lucky hearing it.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • 1
    I see, thank you for the answer! What should I change the aria-live to? – superninja Oct 29 '21 at 19:07
  • 2
    That's described in the other answer. Make sure you have an empty `
    ` in your DOM when the page is loaded. When the user clicks on close, inject "Filter item is removed" into that `
    `. I would also recommend using `aria-atomic` in case your live region can be injected with various types of messages. `aria-atomic` will cause the entire text to be read instead of just the text that changed. You can see more about `aria-atomic` in my answer to https://stackoverflow.com/questions/69737344/how-to-announce-new-content-after-show-more-button-is-clicked/69741469#69741469
     – slugolicious Oct 29 '21 at 19:16