移动端自定义按钮无法用键盘操作？检查 tabindex 属性
移动端自定义按钮无法用键盘操作时，应检查是否添加了 tabindex=0 属性，确保元素可被 Tab 键聚焦。
检查元素是否添加了 tabindex=0 属性
如果用户可以通过触摸或鼠标点击某个元素，那么该元素必须能够通过键盘聚焦。可以通过在 HTML 标签上添加 tabindex=0 属性来实现这一点。该属性会将元素添加到可以通过按 Tab 键聚焦的元素列表中，其顺序由 HTML 文档中的元素顺序决定。对于自定义组件，必须手动添加此属性，否则浏览器默认不会将其视为可聚焦元素。
在移动端网页中，部分自定义按钮或交互区域可能仅绑定了点击事件，而未设置键盘交互能力。此时，仅添加 tabindex=0 属性是不够的，还需要确保该元素在获得焦点后能被激活。如果元素本身没有交互语义，仅添加 tabindex=0 会导致无法通过键盘完成操作。因此，必须确保元素既可聚焦，又具备可交互的语义。
为可聚焦元素定义键盘事件处理程序
仅仅使元素可聚焦是不够的，还必须确保它能够通过键盘被激活。如果代码中已经为触摸或点击事件定义了处理程序，那么必须同时为键盘事件（如 keydown 或 keyup）定义相应的处理程序。键盘事件处理程序应实现与触摸或点击处理程序相同的功能，以确保用户无论使用何种输入方式，都能获得一致的交互体验。
例如，如果点击按钮会触发一个弹窗，那么当用户按下 Enter 键或空格键时，键盘事件处理程序也应触发相同的弹窗逻辑。如果未定义键盘事件处理程序，即使元素可以通过 Tab 键聚焦，用户也无法通过键盘完成交互。这会导致键盘用户无法使用该功能，从而违反了可访问性的基本原则。
为可聚焦元素添加可见的焦点样式
任何能够接收键盘焦点的元素都应具有可见的样式，以指示当前元素已被聚焦。可以使用 CSS 中的 :focus 和 :focus-visible 伪类来实现这一点。浏览器默认为链接和输入字段等标准可聚焦元素提供了特殊的样式，但对于自定义组件，开发者必须手动定义这些样式。
如果未定义焦点样式，键盘用户在通过 Tab 键切换焦点时可能无法直观地看到当前选中的元素。这会降低用户体验，特别是在移动端或小屏幕设备上，视觉反馈尤为重要。因此，确保自定义组件在获得焦点时有明显的视觉指示，是提升可访问性的关键步骤。
验证键盘交互是否正常工作
完成上述设置后，可以通过以下步骤验证键盘交互是否正常工作。首先，使用 Tab 键在页面中移动焦点，检查自定义组件是否能够被选中。其次，在组件获得焦点后，按下 Enter 键或空格键，检查是否触发了预期的交互动作。最后，观察组件在获得焦点时的视觉样式，确认焦点指示是否清晰可见。
如果通过键盘无法选中组件，或选中后无法触发交互，可能是由于 tabindex 属性未正确设置、键盘事件处理程序缺失或焦点样式未定义。逐一排查这些问题，可以确保自定义组件在移动端和桌面端都能提供一致且可访问的交互体验。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。