VoiceOver转子与非可制表位元素的焦点问题及开发优化咨询

1. 此情况是否为设计如此？是否属于问题？ #

这是VoiceOver的默认设计逻辑，不属于软件bug。

VoiceOver的转子导航体系和浏览器原生Tab焦点体系是相互独立的：转子是屏幕阅读器专属的内容结构导航工具，用于快速定位标题、列表、区块等非交互元素；而原生Tab焦点仅针对可交互控件（如按钮、链接、表单输入框），这些控件默认带有隐式tabindex或需要显式设置。只有当元素属于Tab流范畴（即带有tabindex≥0或本身是可交互元素）时，VoiceOver才会在转子选中该元素时同步移动原生焦点——这是因为这类元素本身就允许被键盘聚焦。

这种设计从技术逻辑上是合理的，但对依赖转子导航后用Tab键继续浏览的用户来说，会带来体验割裂感。

2. 开发者应采用何种最佳技术提升体验？ #

以下是针对该场景的实用开发方案：

• 给非交互结构元素（如标题）添加tabindex="-1"：这个值允许元素通过编程方式被聚焦，但不会加入正常的Tab流（用户按Tab键不会停在这些元素上，避免打乱导航顺序）。当用户通过转子选中该元素时，可监听相关事件调用element.focus()，实现焦点同步。
• 禁止给标题设置tabindex≥0：这类设置会将标题强行加入Tab流，导致键盘用户按Tab时频繁停在标题上，严重降低导航效率。
• 配合aria-current="location"：当焦点移动到目标标题时，临时添加该属性，让屏幕阅读器明确告知用户当前所处的页面位置，强化导航感知。
• 优化滚动体验：调用focus()后，可通过element.scrollIntoView({ behavior: 'smooth', block: 'start' })实现平滑滚动，避免页面突兀跳转。
• 实际环境测试：务必在VoiceOver真机环境下验证交互逻辑，确保焦点同步不影响其他屏幕阅读器或普通键盘导航的正常使用。

内容的提问来源于stack exchange，提问作者Daniel Macak