空按钮（无可见文本）必须通过 aria-label 提供清晰、简明的语义描述，以确保屏幕阅读器能准确传达其功能，这是 wcag 合规与现代 web 可访问性的基本要求。
在构建交互式 UI（如图标按钮、折叠控件、树形节点操作按钮等）时，开发者常使用无文字的
✅ 正确做法：始终为无可见文本的按钮添加 aria-label
该属性为辅助技术提供唯一的、程序化确定的标签，无需改变 DOM 结构或视觉呈现：
<!-- ✅ 推荐：语义明确，无障碍友好 --> <button type="button" aria-label="Expand node" class="node-toggle"> <svg viewBox="0 0 16 16"><use href="#icon-chevron-right" /></svg> </button> <button type="button" aria-label="Delete this item" class="action-btn danger"> <i class="fas fa-trash"></i> </button>
⚠️ 注意事项：
- ❌ 不要仅依赖 title 属性：它不被所有屏幕阅读器可靠支持，且仅在悬停时显示，对键盘/触摸用户无效；
- ❌ 避免 aria-labelledby 指向隐藏元素（如 display: none 或 visibility: hidden），因部分浏览器/AT 会忽略；若需复用文本，应使用 aria-labelledby 指向 aria-hidden="false" 的 .sr-only 元素（见下文）；
- ✅ 若按钮含图标+隐式文本（如 Sort ascending），推荐用 aria-labelledby 关联，但 aria-label 更轻量、更可控；
- ✅ 始终设置 type="button"：防止意外触发表单提交。
? 进阶提示（可选）：
当需要动态更新按钮含义（如切换“静音/取消静音”）时，应同步更新 aria-label 值，并配合 aria-pressed 或 aria-expanded 等状态属性增强语义：
const muteBtn = document.querySelector('#mute-toggle');
muteBtn.addEventListener('click', () => {
const isMuted = muteBtn.getAttribute('aria-pressed') === 'true';
muteBtn.setAttribute('aria-pressed', !isMuted);
muteBtn.setAttribute('aria-label', isMuted ? 'Mute audio' : 'Unmute audio');
});总之，aria-label 不是“可选优化”，而是空按钮可访问性的强制性基础。它成本极低、兼容性极佳（支持所有主流屏幕阅读器），且能显著提升残障用户的操作效率与尊严——在 JS 驱动的节点交互、管理后台或数据可视化界面中，这一实践尤为关键。
