Accessible Name 与 Labeling 规则在组件可访问性中的实践

概述Accessible Name 决定了辅助技术如何称呼一个控件。通过正确的标签与 ARIA 属性，可确保按钮、输入、图标等组件被准确识别与操作。关键参数与概念优先级：可见文本 > `aria-labelledby` > `aria-label`；避免同时设置产生冲突。描述扩展：`aria-describedby` 提供附加说明，不影响可访问名称。结构化标签：`<label for>` / 包裹输入可建立稳定关联。实践示例<label for="email">邮箱</label> <input id="email" type="email" aria-describedby="tip"> <small id="tip">我们仅用于登录与通知，不会用于营销。</small> <!-- 图标按钮：无可见文本时使用 aria-label --> <button aria-label="打开设置"> <svg aria-hidden="true" focusable="false" viewBox="0 0 24 24"><!-- icon --></svg> </button> <!-- 复杂标题：使用 aria-labelledby 聚合名称来源 --> <h2 id="dlg-title">删除项目</h2> <dialog aria-labelledby="dlg-title"> <!-- 内容 --> </dialog> 验证方法屏幕阅读器：NVDA/VoiceOver 读取名称与描述是否符合预期；控件顺序与焦点可达性正常。冲突检测：同时存在 `aria-label` 与可见文本时，确认名称计算规则优先级。国际化：名称与描述应可本地化；避免硬编码英文与拼音。注意事项避免用 `title` 属性作为主要名称来源；其可访问性与可见性较弱。图标仅作装饰时使用 `aria-hidden="true"` 并避免聚焦。组件库集成时统一 Labeling 规范，减少重复与冲突。