Web 可访问性名称（Accessibility Name） 基本定义 Web 可访问性名称是辅助技术（如屏幕阅读器）为用户识别和解释界面元素时使用的文本标签。它通常从元素的可见内容、属性（如 alt 、 aria-label ）或关联元素中提取，帮助残障用户理解元素的功能。例如，一个按钮的可见文本为“搜索”，但其可访问性名称可能是“搜索商品”。 名称的来源与优先级 可访问性名称遵循 ACCC 规则 （按优先级降序）： A ria-labelledby：通过 aria-labelledby 属性引用其他元素的文本内容。 C aption：表单控件的 <label> 关联文本。 C ontent：元素的可见文本内容（如按钮内的文字）。 C omputed：默认语义化标签（如 <input type="submit"> 的“提交”）。 若未显式定义，浏览器会按此规则自动计算名称。 关键属性与用法 aria-label ：直接定义名称，优先级高于可见文本（例如 <button aria-label="关闭弹窗">X</button> ）。 aria-labelledby ：引用页面中其他元素的 ID，组合多个文本（例如 <div id="desc">详情</div><button aria-labelledby="desc">展开</button> ）。 alt 属性：为图片提供替代文本，同时作为可访问性名称。 <label for> ：关联表单控件时，标签文本成为输入框的名称。 实际场景示例 图标按钮 ： 可见设计为“垃圾桶图标”，需添加 aria-label="删除文件" ，否则屏幕阅读器可能仅读作“按钮”。 复杂表格 ： 通过 aria-labelledby 将表头与单元格关联，例如 <td aria-labelledby="header1 row1"> ，确保读出的内容包含上下文。 表单验证 ： 错误提示需用 aria-describedby 关联到输入框，辅助技术会同时读出标签和错误信息。 测试与验证工具 浏览器开发者工具：检查元素的“Accessibility”面板，查看计算的名称。 屏幕阅读器测试：使用 NVDA、VoiceOver 等工具实际聆听输出。 自动化工具：如 axe-core、Lighthouse 审计可访问性名称的完整性。 常见问题与优化 冗余名称 ：避免同时使用 aria-label 和可见文本，可能导致重复播报。 动态内容更新 ：若名称变化，需触发 aria-live 区域或使用 aria-atomic 通知辅助技术。 语言适配 ：确保名称与页面语言一致，避免屏幕阅读器切换语言时发音错误。 通过规范定义可访问性名称，可显著提升视障用户对 Web 内容的操作效率与体验。