aria-label 的作用对象是「看起来不像什么」的控件：一个只有放大镜图标的搜索按钮、一个纯图标导航，视觉用户能看懂，读屏用户只能听到「按钮」二字。此时加 aria-label=搜索，读屏软件就会把这串文字播报出来。核心原则是补充而非重复——按钮里已有文字就不要再写 label，否则会被重复朗读。
无障碍的优先级永远是：原生语义标签优先，aria 打补丁次之。能用 button 就别用 div 加 role=button；table已经有 th 就别再补 aria。真正需要 aria 的场景除了图标按钮，还有动态更新的区域（aria-live 把新消息播报出来）和自定义控件（用法与属性对照 WAI-ARIA 设计模式实现）。一个常见的黄金搭档是 aria-label 配合 visually-hidden 样式隐藏可见文字。
<style> .icon-btn { width: 40px; height: 40px; border-radius: 8px; border: 1px solid #4a9eff; background: #f0f7ff; font-size: 18px; cursor: pointer; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } </style> <button class="icon-btn" aria-label="搜索"> <span aria-hidden="true">🔍</span> <span class="sr-only">搜索</span> </button> <button class="icon-btn" aria-label="关闭菜单">✕</button> <nav aria-label="主导航"> <a href="#a">首页</a> <a href="#b">文章</a> </nav>