自定义按钮组件如何正确支持键盘访问和屏幕阅读器？

翌耀酱~ 提问于 2026-03-02 10:53:19 阅读 40

组件

我写了个自定义的按钮组件，用div模拟的，但发现Tab键没法聚焦，屏幕阅读器也读不出它是按钮。加了role=”button”还是不行，是不是还缺啥？

下面是我现在的代码：

<div
  role="button"
  tabindex="0"
  onclick="handleClick()"
  class="custom-btn"
>
  点我
</div>

可访问性自定义组件

我来解答赞 10 收藏

反馈

1 条解答

彩云 Dev Lv1

兄弟，能直接用原生 <button> 标签就别折腾 <div> 模拟，原生标签自带各种无障碍属性，省心多了，何必给自己找坑跳。

不过既然你已经写了，问题其实很简单。原生按钮按回车和空格键都能触发点击事件，但 <div> 哪怕加了 role="button"，浏览器也不会自动给它绑定键盘事件。光加 tabindex="0" 只能让它获得焦点，想触发点击还得靠 JS 手动补逻辑。

你得加个 onkeydown 事件监听，判断是不是回车键或者空格键，然后手动触发点击。空格键还得阻止一下默认行为，不然页面会往下滚动。

给你改好的代码：

<div

  role="button"

  tabindex="0"

  onclick="handleClick()"

  onkeydown="handleKeyDown(event)"

  class="custom-btn"

>

  点我

</div>



<script>

  function handleKeyDown(event) {

    // 检测是否是回车键(Enter)或空格键(Space)

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

      event.preventDefault(); // 阻止空格键滚动页面

      handleClick();

    }

  }

</script>

这样改完，键盘能聚焦也能敲回车触发了，屏幕阅读器也能识别这是个按钮。以后要是做古腾堡块或者主题设置面板，尽量还是用 <button>，省得还要写一堆补丁代码。

2026-03-02 10:58