时间戳

首页 > 解决方案 > 如何解决 toast 上“有一个可访问的名称”的可访问性错误？

html - 如何解决 toast 上“有一个可访问的名称”的可访问性错误？

问题描述

在吐司（弹出通知）上解决此错误的正确方法是什么？例如名字？aria-labelledby? 是描述通知中的内容还是组件是什么？

我正在使用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>

标签： htmlaccessibilitytoast

解决方案

以下是解决它的两种方法：

  1. 如果您有一个包含 toast 标题的特定 HTML 元素，请给该元素一个 id 并使用该 id 作为aria-labelledby父 elementNode 中的值，例如
<div aria-labelledby="title" role="alert" aria-live="assertive" aria-atomic="true">
  <h3 id="title">I am the title</h3>
  ...
</div>
  1. 您可以只使用aria-label父节点元素上的属性，例如：
<div aria-label="Your subscription is about to expire" role="alert" aria-live="assertive" aria-atomic="true">
  ...
</div>

总之，它的作用是；它以一种摘要的形式告诉屏幕阅读器弹出窗口的内容，就像我们在添加标签时快速掌握输入字段的全部内容一样。

推荐阅读