自定义按钮添加 tabindex 后为何仍无法用键盘操作？

检查元素是否可聚焦

自定义按钮默认可能无法通过键盘聚焦。在浏览器中，只有设置了 tabindex 属性的元素才能被键盘选中。对于自定义按钮，通常需要手动添加 tabindex=0 来使其进入默认聚焦顺序。如果元素没有这个属性，用户无法通过 Tab 键选中它，也就无法进行键盘交互。

可以通过在浏览器开发者工具中选中该元素，查看其 computed 样式或属性面板，确认是否存在 tabindex=0。对于链接或输入框等原生交互元素，浏览器通常会自动处理聚焦，但自定义的 div 或 span 元素必须显式声明 tabindex 才能被键盘访问。

仅仅添加 tabindex=0 并不足以让元素具备交互能力。根据键盘可访问性要求，可聚焦的元素必须具有交互语义，即用户对其操作应能产生某种变化。这意味着除了设置 tabindex，还需要为元素定义事件处理器，例如键盘按下事件。

如果只添加了 tabindex 而没有定义键盘事件处理逻辑，用户选中元素后按下回车或空格键可能不会触发任何动作。因此，在添加 tabindex 的同时，必须确保为元素绑定了相应的 onkeydown 事件，使键盘操作与鼠标点击产生相同的效果。

在设置 tabindex 时，应避免使用大于零的数值。大于零的 tabindex 会改变元素的默认聚焦顺序，使其在页面逻辑顺序之前被聚焦。这种人为打乱顺序的做法会给键盘用户带来困惑，因为视觉顺序与键盘聚焦顺序不一致。

最佳实践是保持 HTML 文档中元素的原始顺序，不使用 tabindex 重新排序。如果必须调整顺序，应通过 DOM 结构的调整来实现，而不是依赖 tabindex 的正数值。对于自定义按钮，通常只需要使用 tabindex=0 即可满足可聚焦需求，无需使用更高数值。

可聚焦元素在获得焦点时应当有明显的视觉反馈。浏览器默认为链接和输入框提供了聚焦样式，但自定义按钮需要开发者自行定义。可以使用 CSS 的 :focus 和 :focus-visible 伪类来设置聚焦时的样式，例如改变边框颜色或背景色。

如果自定义按钮在键盘选中时没有明显的样式变化，用户可能不知道当前焦点位置。因此，在实现键盘可访问性时，必须同时定义聚焦样式，确保键盘用户能够清晰地感知到当前操作的元素。这有助于提升整体的用户体验。这有助于提升整体的用户体验。