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 https://stackoverflow.com/questions/69681110/snackbars-not-read-by-screen-reader-when-triggered-from-a-dialog/69683620#69683620

本质上，你需要一个元素aria-live在您的页面上加载时间. aria-live不打算成为动态属性，也不打算动态添加到 DOM 中。 Chrome 很友善地宣布了新添加的实时区域，但你很幸运能听到它。