如何让自定义按钮在屏幕阅读器中正确读出？

程序员利娇提问于 2026-03-08 18:33:17 阅读 53

前端

我用 <div> 做了一个按钮，加了点击事件，但用 VoiceOver 测试时发现它根本不会被识别为按钮。我试过加 role="button"，但还是不行，焦点也进不去。是不是还得加别的属性？

现在的代码大概是这样的：

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

我来解答赞 7 收藏

反馈

1 条解答

迷人的春芳 Lv1

缺了tabindex，加上这个就能聚焦了：

点我

最好再加个键盘事件，光有click事件不够用：

divElement.addEventListener('keypress', (e) => {

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

    doSomething();

  }

});

PS：这种破事我踩坑不下十次了，每次都得重新查文档...

2026-03-08 19:01