【问题标题】：How and when would you be using tabIndex=0 on your Button element?您将如何以及何时在 Button 元素上使用 tabIndex=0？
【发布时间】：2020-05-13 17:21:01
【问题描述】：
我目前正在开发我的 React 应用程序，并尝试制作多个按钮，以便对 click 和 keydown 事件做出响应。浏览 Stack Overflow 和一些 YouTube 教程，我注意到他们一直在按钮上使用tabIndex=0 属性以及某种key 事件。我想知道为什么会这样？以及您将如何以及何时在您的 Button 元素上使用 tabIndex=0？
【问题讨论】：
标签：
javascript
dom
button
dom-events
keyboard-events
【解决方案1】：
tabindex 您可能已经发现，它允许元素接收键盘焦点，即通过按 Tab 导航。 tabIndex 的值是0 的原因是它不会改变tab 顺序，因此保持tab 顺序符合页面的逻辑流程
设置索引值大于1，定义了一个指定的tab顺序，这并不理想，因为：
- 无法通过重新排列内容中的元素来更改制表符顺序。
- 对于视障用户，屏幕阅读器将按照值的顺序读取带有
tabindex 的元素，与页面中视觉呈现的顺序相比，其顺序可能不同。
因此，在使用 tabindex 时，请确保将其值设置为 0。
【解决方案2】：
tabindex 用于键盘导航。例如对于使用屏幕阅读器的人。 tabindex=0 确定第一个元素将在您按下 tab 键后被聚焦。