SuperAPI AI 工具集

aria-live-regions

前端与建站

查看项目

更新于 10-16 00:29

技能介绍

用途:当项目包含动态内容更新、状态消息、警报、通知、加载指示或任意 aria-live 用法时使用本技能,帮助屏幕阅读器用户在焦点不移动的情况下获知简明状态信息。它不做通用通知系统,也不替代可见内容、原生 HTML、焦点管理或控件的程序化状态。

主要能力:按情境选择机制——按钮展开收起更新 aria-expanded;标签页用 tabs 模式;模态框移动焦点;SPA 路由更新标题并移动焦点;表单错误用错误摘要加焦点管理;保存、购物车、筛选、搜索完成用 role="status";时间敏感重要条件用 role="alert";有序追加序列用 role="log"(需可访问名称)。

关键规则:role="status" 隐式 polite/atomic;role="alert" 隐式 assertive/atomic,不接收焦点、不要求响应关闭;不要在这些 role 上加冗余显式属性。aria-live 裸值仅在无合适 role 时用。aria-atomic 默认 false,整句有上下文时用 true。aria-relevant 默认 additions text。aria-busy 批量更新时设 true,完成后必须复位,含错误路径。

时序:不存在可靠的 50ms 等固定延迟;应先暴露稳定的 live region,再在后续事件中更新内容。不要清空后重插同文本;只播报快速序列的最终结果,忽略过期异步响应。

可见性与范围:仅在可见信息已存在且确需非视觉补充时用视觉隐藏区域,勿重复播报;播报期间不得对区域使用 display:none、visibility:hidden 或 aria-hidden;区域要窄、避免嵌套。

常见失败:一次操作中新建区域并写入消息、把 alert 用于普通确认、每个字段错误都加 role="alert"、播报整个结果列表、播报每个字符或百分比、异常后未复位 aria-busy、测试需覆盖最终 DOM 消息及错误与过期请求路径。