如何正确给自定义按钮添加无障碍支持？

UP主～金静提问于 2026-03-03 14:48:20 阅读 25

前端

我用 div 做了一个按钮，点击能触发操作，但屏幕阅读器好像读不出来。加了 role="button" 也不行，是不是还缺啥？

试过加上 tabindex="0" 让它能聚焦，键盘也能按回车触发，但读屏软件还是不念“按钮”或者它的名字。代码大概长这样：

<div role="button" tabindex="0" onclick="doSomething()">
  点我
</div>

是不是还得加 aria-label 或别的属性？求指点！

HTML Web API

我来解答赞 5 收藏

反馈

2 条解答

设计师东宇 Lv1

你缺的主要是两样东西：可访问的名称和键盘事件处理。

先说可访问名称的问题。你代码里有"点我"这个文本，理论上应该能被读出来，但如果用了 CSS 把文字藏到屏幕外（比如 text-indent: -9999px 或者 display: none），那辅助技术就读不到了。这种情况很常见，很多人做按钮时为了视觉效果把文字移出可视区域。

解决办法很简单，加个 aria-label 就能显式指定读屏软件要读的内容：

<div role="button" 

     tabindex="0" 

     aria-label="提交表单"

     onclick="doSomething()"

     onkeydown="handleKey(event)">

  点我

</div>

然后是键盘事件。你说键盘能按回车触发，但我猜你可能只用了 onclick。在 div 上 onclick 确实能被回车触发，不过规范做法是监听 keydown 来处理 Enter 和 Space 键，这样兼容性更好：

function handleKey(event) {

  if (event.key === 'Enter' || event.key === ' ') {

    event.preventDefault();

    doSomething();

  }

}

最后再提醒一嘴，做无障碍要真机测试，光靠猜不顶用。Windows 用 NVDA，Mac 用 VoiceOver，手机用 TalkBack，都跑一遍才知道实际效果怎么样。有些读屏软件对 role="button" 的支持确实不如原生 button 标签，如果能用原生 button 还是优先用原生的，省心很多。

2026-03-12 06:06

书生シ宝娥 Lv1

别费劲去补 div 的坑了，直接把标签换成原生的 <button>，这玩意儿自带焦点、键盘回车触发和屏幕阅读器朗读，不用写一行多余的 JS 或 aria 属性，这才是最省事的解法。

<button onclick="doSomething()">

  点我

</button>

2026-03-04 01:06