移动端自定义组件仅添加 tabindex 为何无法被键盘操作
仅仅为自定义组件添加 tabindex 属性并不能使其具备键盘操作能力，必须同时定义键盘事件处理程序。
确认组件是否具备交互语义
自定义组件通常使用 div 或 span 等非交互元素实现，这类元素默认不具备交互语义。根据资料，如果元素可以通过键盘聚焦，它应该具备交互语义，即用户应该能够对其执行操作并产生某种变化。仅仅添加 tabindex 属性并不能赋予元素交互能力，必须确保元素能够响应用户的操作。对于自定义组件，需要明确其交互功能，例如点击触发跳转或提交表单。
在排查时，应确认自定义组件是否绑定了点击事件处理程序。如果元素没有定义 onclick 事件处理程序，即使它可以被聚焦，用户也无法通过点击或键盘操作产生预期的变化。资料指出，大多数交互元素默认是可聚焦的，但自定义元素需要通过添加 tabindex=0 属性使其可聚焦，同时必须定义适当的事件处理程序来使其可操作。
添加键盘事件处理程序
为了让自定义组件能够通过键盘操作，除了添加 tabindex 属性外，还需要定义键盘事件处理程序。资料强调，如果用户可以通过触摸或指向设备与元素交互，那么该元素也应该支持通过键盘交互。这意味着如果为触摸或点击事件定义了处理程序，就必须为键盘事件（如 keydown）定义相应的处理程序。
在实现时，可以在元素上添加 onkeydown 事件处理程序，并在其中执行与点击事件相同的操作。例如，当用户按下回车键或空格键时，触发与点击相同的逻辑。资料建议，事件处理程序应使键盘交互与触摸交互的效果相同。通过这种方式，自定义组件才能完全支持键盘操作，满足键盘可访问性的要求。
验证键盘操作是否生效
完成上述修改后，需要验证自定义组件是否能够通过键盘正常操作。首先，使用 Tab 键将焦点移动到自定义组件上，确认组件是否能够接收焦点。其次，按下回车键或空格键，检查组件是否触发了预期的交互效果，例如页面跳转或表单提交。如果焦点无法移动到组件上，可能是 tabindex 属性未正确设置或元素被其他属性阻止了聚焦。
如果组件能够接收焦点但按下键盘按键后没有反应，说明键盘事件处理程序可能未正确绑定或逻辑有误。此时应检查代码中的事件处理程序是否正确执行，并确保其逻辑与触摸事件处理程序一致。通过逐步验证，可以确认自定义组件是否完全支持键盘操作，从而满足可访问性标准。
避免使用 tabindex 的正数值
在为自定义组件添加 tabindex 属性时，应避免使用大于零的值。资料指出，tabindex 的正数值会将元素置于默认焦点顺序之前，这可能导致键盘焦点顺序与页面的逻辑顺序不一致，从而给仅使用键盘的用户造成混淆。更好的策略是构建 HTML 文档，使可聚焦元素按照逻辑顺序排列，而不需要使用正 tabindex 值来重新排序。
对于自定义组件，如果其逻辑顺序已经符合文档结构，应使用 tabindex=0 属性将其加入默认焦点顺序。如果必须调整焦点顺序，应优先通过修改 HTML 结构来实现，而不是依赖 tabindex 的正数值。这样可以确保键盘导航的直观性和一致性，提升用户体验。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。