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

端木艺晗提问于 2026-03-03 10:56:20 阅读 32

前端

我用 <div> 做了一个按钮，点击能触发功能，但用屏幕阅读器读不出来。我加了 role="button"，但好像还不够？按 Tab 键也聚焦不到它。

是不是还得加 tabindex？或者应该直接用 <button> 标签？我试过下面这样写，但不确定是否符合无障碍标准：

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

我来解答赞 5 收藏

反馈

1 条解答

Mc.翌岍 Lv1

你现在的写法确实不够。单纯加 role="button" 只是告诉屏幕阅读器这是个按钮，但浏览器默认不知道它应该能被键盘聚焦，也不知道按回车键或空格键该干嘛。

如果非要用 div，你得补全两个东西：一是加上 tabindex="0" 让它能被 Tab 键选中；二是监听键盘事件，模拟点击行为。代码大概是这样：

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



<script>

  function handleKey(e) {

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

      e.preventDefault();

      doSomething();

    }

  }

</script>

但说实话，为了这么个功能写这么多代码，维护起来还容易漏，完全没必要。建议改成原生的

2026-03-03 20:05