空按钮（无可见文本）必须通过 `aria-label` 提供明确的可访问性标签，否则会阻碍屏幕阅读器用户理解其功能；仅用 `
在构建交互式 UI（如树形节点、图标按钮、下拉触发器等）时，开发者常使用无文字的 <button> 元素配合 JavaScript 实现行为，例如：
<!-- ❌ 不推荐：完全空的按钮，无任何语义信息 --> <button type="button" class="node-toggle"></button> <!-- ❌ 仍不推荐：仅含图标，无辅助文本 --> <button type="button" class="icon-btn"> <svg aria-hidden="true"><use href="#icon-chevron-down"></use></svg> </button>
这类写法对视觉用户可能直观，但对依赖屏幕阅读器的用户而言，按钮将被朗读为“button”或“未命名按钮”，无法传达其实际作用（如“展开子节点”“排序列表”“删除此项”），直接违反 WCAG 4.1.2（名称-角色-值）原则。
✅ 正确做法是：始终为无可见文本的按钮设置 aria-label，提供简洁、动词导向的操作描述：
<!-- ✅ 推荐：语义清晰，支持无障碍 -->
<button type="button"
class="node-toggle"
aria-label="Expand child nodes">
</button>
<button type="button"
class="icon-btn"
aria-label="Sort results by date">
<svg aria-hidden="true"><use href="#icon-sort"></use></svg>
</button>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- aria-label 优先级高于按钮内文本，若同时存在，屏幕阅读器会忽略内部内容，因此避免在 aria-label 存在时冗余添加不可见文本（如 <span class="sr-only">Sort</span>）；
- 不要使用 title 属性替代 aria-label —— title 仅在悬停时显示，且多数屏幕阅读器默认不读取；
- 若按钮包含有意义的图标+可见文字（如 <button><i class="icon"></i> Save</button>），则无需 aria-label，文本本身已满足可访问性要求；
- 对于纯装饰性图标（如上例中 aria-hidden="true" 的 SVG），务必确保其不干扰语义结构。
总结：aria-label 不是“可选增强”，而是空按钮实现合规无障碍的强制性要求。它以最小侵入方式赋予按钮明确意图，是现代 Web 可访问性的基石实践之一。
