iOS 旁白和 Android 无法在 Span 标记中播报文本

Question

我们希望屏幕 reader 在节点关闭后宣布“一个项目已关闭”。有趣的是，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 部分。

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

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

Answer 1

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

看到它

基本上，您需要在 加载时间 时在您的页面上添加一个带有 aria-live 的元素。 aria-live 既不是动态属性，也不是动态添加到您的 DOM 中。 Chrome 很高兴宣布新添加的直播区域，但你听到它已经很幸运了。

iOS 旁白和 Android 无法在 Span 标记中播报文本

iOS Voice Over and Android Fail to Announce Text In Span Tag

html

typescript

accessibility

voiceover

screen-readers