使用带有 aria-live="assertive" 的单独状态 div 来处理屏幕阅读器的 toast 消息内容

Question

我正在尝试在 Angular 中使 toast 消息组件可访问（以符合 WCAG 2.1 AA 标准）。 toast 消息有 4 种类型（成功、警告、错误、信息），每种类型都有一条动态消息。

toast组件的html是这样的，

toast.component.html

<div  aria-live="assertive" class="toast-wrapper toast-error">
    <span id="toast_heading">{{toast.heading}}</span>
    <sapn id="toast_message">{{toast.message}}</span>
</div>

app.component.html

<app-component>
    <toast-component *ngIf="showToast"></toast-component>
</app-component>

toast 的可见性由

showToast

变量控制，并且不会同时显示多个 toast 组件。 Toasts 也设置为在 3 秒后自动隐藏（我被告知从可访问性的角度来看这不是一件好事）。

但是我在显示祝酒词时使用的屏幕阅读器 (NVDA) 没有读取祝酒词（在 chrome 中，没有在其他浏览器中测试）。

搜索后，我发现当网页加载时必须存在

aria-live

属性才能让某些屏幕阅读器读取它，并且由于

toast-component

仅在需要吐司时生成，所以它不是正在被屏幕阅读器阅读。

我还找到了这个网页https://terrillthompson.com/tests/aria/live-scores.html在“游戏3”示例中，作者使用了单独的状态

div

来读取分数并设置

 role="presentation"

记分牌。

我在我的应用程序中是这样实现的：

toast.component.html

<div role="presentation" class="toast-wrapper toast-error">
   <span id="toast_heading">{{toast.heading}}</span>
   <sapn id="toast_message">{{toast.message}}</span>
</div>

app.component.html

<app-component>
    <div aria-live="assertive" class="visiually-hidden" id="assertive_div">
        {{toast.heading}} - {{toast.message}}
    </div>
    <toast-component *ngIf="showToast"></toast-component>
</app-component>

现在，当我触发吐司消息时，屏幕阅读器正在读取它，例如：“错误 - 无法删除所选用户”，“成功 - 已保存 15 条记录”。

我现在的问题是这种方法有一个单独的

div

供屏幕阅读器阅读为可接受的 toast 消息，而不是通过实际的 toast 组件阅读它？

另外，有什么需要改进的地方吗？

Answer 1

直播区域确实应该存在于页面上，而不是动态添加。

见我的回答关于现场区域。

有一个单独的

<div>

来包含将要宣布的实时文本并没有什么错，但我尽量避免这样做，主要是从编码效率的角度来看。如果我可以让它与一个文本块一起工作，我不喜欢重复的文本块。

其他一些事情，我建议使用

polite

而不是

assertive

用于实时区域。 Assertive 应保留用于绝对必须宣布的关键消息。几乎在所有情况下都应该使用礼貌。

吐司也设置为在 3 秒后自动隐藏（我被告知从可访问性的角度来看这不是一件好事）。

我同意这会导致可访问性问题。它会失败2.2.1 时间可调.

Toast 消息通常不是很好的用户体验。如果您真的想使用它们，请为不重要的消息制作 then，这样即使用户看不到它们也没什么大不了的。通常最好有一个消息区域出现并且 not 自动消失但是有一个 X-close 按钮。