iOS Voice Over和Android无法在Span标签中公告文本

我们希望在节点关闭后，屏幕阅读器会宣布"；项已关闭"；。有趣的是，Chrome上的NVDA正确地宣布了这一消息，而Android和iOS Voice Over却没有宣布这一消息。

以下是打字代码：

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

触发上述函数的html代码为：

<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>

并且此代码将在正文底部生成跨区部分。

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

有人知道问题出在哪里吗？

---

解决方案

您没有正确使用aria-live。我最近写了一篇很长的关于aria-live的回答。您可以在Snackbars not read by screen reader when triggered from a dialog

查看

实质上，您需要在加载时间时页面上有一个aria-live元素。aria-live既不是动态属性，也不是动态添加到DOM中。Chrome很友好，宣布了新添加的活动区域，但你听到这个消息就很幸运了。