无障碍名称计算演示 - 元素的可访问名称来源

可访问名称是辅助技术（如屏幕阅读器）用来标识和描述UI元素的文本字符串。它不一定可见，但对无障碍体验至关重要。例如，一个关闭按钮的可访问名称可能是"关闭对话框"，即使按钮上只显示一个"×"图标。ARIA规范（Accname 1.2）定义了一套严格的算法来计算元素的可访问名称。

aria-label 直接为元素指定一个文本字符串作为可访问名称，适合简单场景。aria-labelledby 通过引用页面中其他元素的ID来获取名称，可以引用多个元素（用空格分隔），文本会自动连接。后者更灵活，支持多语言、动态更新，且引用的元素可以是隐藏的。优先级上，aria-labelledby 高于 aria-label。

按照ARIA规范（从高到低）：
1️⃣ aria-labelledby — 引用其他元素文本
2️⃣ aria-label — 直接指定的标签文本
3️⃣ 原生HTML语义 — 如<label>关联、alt属性、placeholder等
4️⃣ 子元素文本内容 — 按钮、链接等容器元素的内部文本
5️⃣ title 属性 — 最后的回退选项
本工具按此顺序逐步检查并展示结果。

可以，但不推荐作为唯一名称来源。placeholder 在输入框为空时可见，一旦用户开始输入就消失，且通常颜色较浅、对比度不足。在ARIA名称计算中，placeholder 优先级低于关联的 <label>。最佳实践始终是使用可见的 <label> 元素或 aria-label。

常见原因：①元素上同时存在更高优先级的 aria-labelledby；②元素角色（role）不支持可访问名称（如 role="presentation"）；③ aria-label 被设置在了一个无语义的 <div> 或 <span> 上，但没有赋予有效的 role（如 role="button"）；④拼写错误或属性值被动态覆盖。

aria-labelledby 引用的元素即使被隐藏（通过 hidden 属性、display:none 或 aria-hidden="true"），其文本仍然会被用作可访问名称。这是一种常见技巧：将描述性文本隐藏在视觉外，但供屏幕阅读器使用。但注意，直接作为子元素的隐藏文本通常不会被纳入名称计算。

有。故意设置 aria-label=""（空字符串）表示该元素有意没有名称，辅助技术通常会忽略它。这与完全没有设置任何名称属性不同——后者会触发回退机制。空名称常用于纯装饰性元素或不应被屏幕阅读器朗读的冗余控件。

使用浏览器开发者工具：Chrome/Edge的无障碍面板（Elements → Accessibility）可以查看元素的计算名称；Firefox的无障碍检查器同样强大。也可以使用屏幕阅读器（如NVDA、VoiceOver）实际测试。本工具帮助您理解名称的来源，与浏览器工具互补。

role="presentation" 或 role="none" 会移除元素的语义，其自身不参与名称计算（但子元素内容仍可贡献给父元素）。某些 role（如 role="button"）允许名称来自子元素内容；而某些 role（如 role="textbox"）则期望名称来自标签。正确的 role 设置是无障碍设计的基础。