SuperAPI AI 工具集

accessible-notifications

前端与建站

查看项目

更新于 10-16 08:23

技能介绍

用途

该技能用于指导开发者实现无障碍的用户通知与反馈。资料明确说明,当涉及 Toast、Snackbar、通知、警报、Flash 消息、状态提示等实现时,会自动触发该技能。其核心立场是:Toast 提示存在严重的无障碍隐患,应当避免使用,并改用资料中列出的替代方案。

主要能力

技能首先解释了 Toast 为何存在问题,分为两类:

WCAG 违规

  • 2.2.1 时间可调(A):自动消失会阻止用户阅读内容。
  • 1.3.2 有意义的顺序(A):DOM 中的位置使 Toast 与触发它的元素脱节。
  • 2.1.1 键盘(A):焦点管理复杂且经常出错。
  • 4.1.3 状态消息(AA):辅助技术的播报会造成干扰。

可用性问题

  • 大尺寸显示器:Toast 出现在用户视野之外。
  • 屏幕放大:Toast 可能位于放大区域之外。
  • 多任务:自动消失导致消息被错过。
  • 阻塞界面:浮在提交按钮等重要内容之上。

使用方式

技能按场景给出替代方案:

  • 简单操作成功:无需额外反馈,成功本身即反馈。资料示例为创建 issue 后 issue 出现在列表中,不需要 Toast。
  • 复杂操作成功:使用持久横幅或渐进式内容展示。示例为 <Banner v-if="bulkResult" variant="success">,显示创建数量并提供查看全部链接。
  • 操作失败(错误):使用内联校验或横幅。表单用 <FormField :error="errors.email">,系统错误用 <Banner v-if="submitError" variant="destructive">。
  • 表单提交成功:使用中间确认页或重定向加横幅。示例为 <ConfirmationPage v-if="submitted"> 显示参考编号,或通过 router.push 跳转到结果页。
  • 长时间任务:使用持久横幅加其他渠道(邮件、推送通知)。示例为 <Banner v-if="taskComplete" variant="success"> 提供下载链接。

辅助技术播报时机

  • 始终播报:位置变化、导航。
  • 始终播报:用户操作失败(校验、错误)。
  • 有时播报:必要的流式内容(日志)。
  • 避免播报:非必要更新(在线状态指示、他人评论)。

实现方式:对必须播报的动态内容使用 aria-live 区域,示例为 <div aria-live="polite" aria-atomic="true" class="sr-only">{{ statusMessage }}</div>。

适用场景

适用于前端界面中涉及用户反馈与状态通知的设计与开发,尤其是需要满足无障碍标准的项目。

限制

资料未提供该技能的具体安装命令、依赖要求、支持的框架版本或平台信息,这些内容暂未提供。