HTML空按钮无障碍属性选择：aria-label与button哪个更优？

结论很明确：必须用原生<button>元素配合aria-label（或aria-labelledby），绝对不要用<div>、<span>这类非按钮标签模拟空按钮。

具体原因和细节：

• 原生button自带完整的无障碍属性：屏幕阅读器会自动识别这是可交互按钮，Tab键能正常聚焦，Enter/空格键可以触发点击操作——这些都是键盘用户和辅助技术用户的核心需求，不用手动写额外代码补全。如果用非button标签模拟，得手动加tabindex="0"、监听键盘事件，很容易遗漏细节，导致部分用户无法操作。
• aria-label是给无文本按钮补全语义的关键：比如纯图标按钮、仅用符号（如×、+）的按钮，视觉上用户能看懂，但屏幕阅读器读不出来。加aria-label后，辅助技术会读取标签内容，告诉用户这个按钮的实际功能（例：<button aria-label="关闭设置面板">×</button>）。如果没有这个属性，屏幕阅读器只会读“按钮”，用户完全不知道它的作用。
• 无障碍社区的共识：WCAG（网页内容无障碍指南）明确要求，可交互元素优先使用语义化标签，而非用ARIA去修补非语义元素的缺陷。主流的无障碍测试工具（如axe、Lighthouse）都会把“用非button元素模拟按钮”标记为严重问题，因为这直接影响了键盘和屏幕阅读器用户的体验。

内容的提问来源于stack exchange，提问作者user20859084