用途
该技能针对使用 role='tree'、role='treeitem' 和 role='group' 构建的自定义树形控件,确保每个树节点(treeitem)都具有可访问名称。树形控件用于表示层级数据,常见于文件浏览器、嵌套导航菜单、组织架构图等场景。屏幕阅读器在聚焦每个 treeitem 时会播报其名称、层级和位置,例如“src, collapsed, level 1, 1 of 3”。如果名称为空或过于笼统(如“folder”“item”),盲人用户将无法区分各个节点,也无法自信地在层级中导航。macOS 上的 VoiceOver 使用该名称填充转子,NVDA 则在用户用方向键浏览树时朗读它。
主要能力
- 检查所有 role='treeitem' 元素的可访问名称,通过 accname 计算规则依次检查 aria-labelledby、aria-label、可见文本内容,标记名称为空或仅含空白字符的 treeitem。
- 检查带有子节点的 treeitem 是否设置了 aria-expanded='true' 或 'false'(而非缺失)。
- 提供修复指导:若可见文本具有描述性则无需修改;若可见文本含糊(如仅有图标无文字),添加 aria-label='描述性名称';若条目包含多个文本部分(如文件名加文件大小),使用 aria-labelledby 引用最具描述性元素的 id;对于可展开的 treeitem,确保 aria-expanded 存在并在展开/折叠时切换。
- 提供代码审查指导,检查渲染后的标记和交互状态,标记违反规则的元素、角色、标签、焦点行为或键盘交互,并说明如何通过浏览器可访问性工具或辅助技术验证修复。
使用方式
该技能以规则形式提供,包含快速参考、检查步骤、修复步骤和解释说明。检查时,先找到所有 role='treeitem' 元素,对每个元素按 accname 计算规则确定其可访问名称,标记名称为空或仅含空白字符的条目,同时检查有子节点的 treeitem 是否设置了 aria-expanded。修复时根据具体情况选择保留可见文本、添加 aria-label、使用 aria-labelledby 或补充 aria-expanded。完整实现细节、代码示例和框架特定指导见 references/rule.md。
适用场景
适用于使用 WAI-ARIA 树形控件模式构建的自定义树形组件,包括文件浏览器、嵌套导航菜单、组织架构图等层级数据展示界面。
限制
该技能聚焦于 treeitem 的可访问名称和展开状态,不涉及树形控件的其他方面(如键盘交互、焦点管理、aria-level、aria-setsize、aria-posinset 等)的完整实现。具体框架的实现细节需参考 references/rule.md。