用途:为无障碍的用户通知与反馈提供实现指导,自动在实现 toast、snackbar、通知、提醒、flash 消息、状态提示等时触发。
主要观点:明确指出 toast 存在显著无障碍问题,应避免使用。理由包括违反 WCAG:2.2.1 Timing Adjustable(自动消失阻碍阅读)、1.3.2 Meaningful Sequence(DOM 位置使提示与触发点脱节)、2.1.1 Keyboard(焦点管理复杂且常失效)、4.1.3 Status Messages(辅助技术播报具干扰性)。此外还有可用性问题:大屏上出现在视野之外、屏幕放大时可能不在放大区域内、多任务时因自动消失而错过消息、悬浮遮挡提交按钮等重要内容。
替代方案(按场景):简单操作成功——无需额外反馈,结果本身即反馈;复杂操作成功——使用持久横幅或渐进内容展示,如 <Banner v-if="bulkResult" variant="success">;操作失败——使用内联校验或横幅,如 <FormField :error="errors.email"> 与 <Banner v-if="submitError" variant="destructive">;表单提交成功——使用中间确认页或重定向加横幅,如 router.push({ name: 'item-detail', params: { id: newItem.id } });长时任务——持久横幅配合邮件或推送通知。
辅助技术播报时机:始终播报位置变化与导航、用户操作失败;有时播报必要的流式内容(如日志);避免播报非必要更新(在线状态、他人评论)。实现上使用 aria-live 区域,例如 <div aria-live="polite" aria-atomic="true" class="sr-only">。需要用户注意时使用对话框(打断式)。
限制:资料未提供收费、价格、平台或安装命令等信息。