
空按钮(无可见文本)必须通过 aria-label 提供明确的无障碍描述,否则将导致屏幕阅读器无法识别其功能,严重损害可访问性;仅使用 `
在构建交互式 UI(如树形节点、图标操作按钮、下拉触发器等)时,开发者常使用无文字的
✅ 正确做法:始终为无文本按钮设置 aria-label
该属性为辅助技术提供唯一、准确、用户可理解的操作描述,且不破坏视觉设计:
⚠️ 注意事项:
- 不要依赖 title 属性替代 aria-label:title 仅在悬停时显示提示,对键盘用户和多数屏幕阅读器无效;
- 避免在按钮内放置纯装饰性文本(如 Sort):如答案中 Stack Overflow 链接所指出,即使 HTML 中存在看似“隐藏”的文本,若未通过 CSS 显式隐藏(如 aria-hidden="true" + visually-hidden 类),仍可能造成冗余或冲突朗读;
- 优先考虑含文本的按钮:若设计允许,直接使用带文本的按钮(如 )始终是最健壮、最无需额外 ARIA 的方案;
- 确保 aria-label 值具备动词性与上下文感:例如 "Collapse section" 比 "Collapse" 更明确,"Filter products by price" 比 "Filter" 更具信息量。
最后需强调:aria-label 并非“补救措施”,而是空按钮的必备属性。根据 W3C ARIA 实践指南与 WCAG 2.1 成功标准 4.1.2(名称-角色-值),所有交互控件必须具有可编程确定的名称(programmatically determinable name)——对空











