信息发布→ 登录 注册 退出

HTML 中空按钮的无障碍最佳实践:正确使用 aria-label 属性

发布时间:2026-01-02

点击量:

空按钮(无可见文本)必须通过 `aria-label` 提供明确的可访问性标签,否则会阻碍屏幕阅读器用户理解其功能;仅用 `

在构建交互式 UI(如树形节点、图标按钮、下拉触发器等)时,开发者常使用无文字的





这类写法对视觉用户可能直观,但对依赖屏幕阅读器的用户而言,按钮将被朗读为“button”或“未命名按钮”,无法传达其实际作用(如“展开子节点”“排序列表”“删除此项”),直接违反 WCAG 4.1.2(名称-角色-值)原则。

✅ 正确做法是:始终为无可见文本的按钮设置 aria-label,提供简洁、动词导向的操作描述:




⚠️ 注意事项:

  • aria-label 优先级高于按钮内文本,若同时存在,屏幕阅读器会忽略内部内容,因此避免在 aria-label 存在时冗余添加不可见文本(如 Sort
  • 不要使用 title 属性替代 aria-label —— title 仅在悬停时显示,且多数屏幕阅读器默认不读取;
  • 若按钮包含有意义的图标+可见文字(如 ),则无需 aria-label,文本本身已满足可访问性要求;
  • 对于纯装饰性图标(如上例中 aria-hidden="true" 的 SVG),务必确保其不干扰语义结构。

总结:aria-label 不是“可选增强”,而是空按钮实现合规无障碍的强制性要求。它以最小侵入方式赋予按钮明确意图,是现代 Web 可访问性的基石实践之一。

标签:# javascript  # java  # html  # node  # svg  
在线客服
服务热线

服务热线

4008888355

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!