如何解决 toast 上 "Have an accessible name" 的可访问性错误？

Question

在 toast（弹出通知）上解决此错误的正确方法是什么？例如名字？咏叹调标签？是描述通知中的内容还是组件是什么？

我正在使用 https://bootstrap-vue.org/docs/components/toast

这会呈现类似这样的东西

<div role="alert" aria-live="assertive" aria-atomic="true">
    <div tabindex="0">
        <button type="button" aria-label="Close">×</button>
        <div>
            <p>Some notification text</p>
        </div>
    </div>
</div>

Answer 1

这里有两种解决方法：

如果你有一个特定的 HTML 元素保存 toast 的标题，给元素一个 id 并使用 id 作为 parent elementNode 中 aria-labelledby 的值例如

<div aria-labelledby="title" role="alert" aria-live="assertive" aria-atomic="true">
  <h3 id="title">I am the title</h3>
  ...
</div>

您可以只在 parent 节点元素上使用 aria-label 属性，例如：

<div aria-label="Your subscription is about to expire" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

综上所述，它的作用是；它告诉 screen-reader pop-up 是什么，作为一种摘要，就像我们在添加标签时快速掌握输入字段的全部内容一样。

Answer 2

对于使用屏幕 reader 的用户，此提醒没有标题。通过标题，屏幕 reader 向用户宣布新内容的内容。

aria-labelledby 或 aria-describedby 可用于指向要用作警报标题的元素。

如果您不想添加可见的标题，只需创建一个不可见的标题并指向它即可。

h2{
font-size: 0px;
}

<h2>XXX</h2>

<div role="alert" aria-live="assertive" aria-atomic="true">
    <h2>Your title</h2>
    <div tabindex="0">
        <button type="button" aria-label="Close">×</button>
        <div>
            <p>Some notification text</p>
        </div>
    </div>
</div>

h2{
font-size: 0px;
}

如何解决 toast 上 "Have an accessible name" 的可访问性错误？

How can I resolve the accesibility error for "Have an accessible name" on a toast?

html

accessibility

toast