如何解决Toast组件出现的「Have an accessible name」可访问性错误

1. 属性选择规则 #

不要使用name属性设置可访问名称：name仅对表单控件、iframe等特定元素生效，对普通div元素无识别效果，无法被读屏器读取为可访问名。
正确的属性选择逻辑：

• 优先使用aria-labelledby：如果通知内容已经在DOM节点中存在，直接给内容节点设置唯一id，将aria-labelledby的值设置为该id即可，无需重复编写内容，维护成本更低。
• 特殊场景用aria-label：如果通知内容是纯动态生成、没有可关联的DOM内容节点，可以直接将通知文本传入aria-label属性。

2. 可访问名称的内容要求 #

可访问名称直接填写通知的实际业务内容即可，不需要描述“这是Toast组件”“这是弹出通知”这类信息：role="alert"的语义会被读屏器自动识别，会主动向用户播报这是通知类消息，额外添加组件相关描述反而会造成信息冗余。

3. 代码实现示例 #

修正后的渲染结构 #

<div role="alert" aria-live="assertive" aria-atomic="true" aria-labelledby="toast-content-001">
    <div tabindex="0">
        <button type="button" aria-label="Close">×</button>
        <div>
            <p id="toast-content-001">操作成功，您的设置已保存</p>
        </div>
    </div>
</div>

Bootstrap-Vue 组件调用写法 #

<template>
  <b-toast
    auto-hide-delay="3000"
    aria-labelledby="custom-toast-content"
  >
    <p id="custom-toast-content">登录过期，请重新验证身份</p>
  </b-toast>
</template>

内容的提问来源于stack exchange，提问作者DumbDevGirl42069