aria-flowto 不能可靠改变屏幕阅读器的实际阅读顺序，多数主流屏幕阅读器（NVDA、JAWS、VoiceOver）会忽略它，或仅在极有限条件下触发。W3C 已明确将其标记为“已弃用”，不应作为控制阅读流的方案。
为什么 aria-flowto 基本失效
它依赖屏幕阅读器主动识别并跳转到目标元素，但现实是：
- NVDA（2022 年起）默认完全不处理
aria-flowto - JAWS 需开启“高级模式”且仅支持 ID 引用（不支持空格分隔多 ID），实际兼容性极差
- VoiceOver 在 Safari 中基本不响应，在 Chrome + VoiceOver 组合下行为不稳定
- 浏览器本身不改变 DOM 遍历顺序或焦点流，仅靠 ARIA 属性无法绕过原生可访问性树结构
真正可控的替代方案：用 tabindex + 逻辑顺序调整
屏幕阅读器（尤其在“虚拟光标”或“阅读模式”下）通常跟随 DOM 顺序，而键盘焦点顺序则受 tabindex 控制。二者一致时体验最稳：
- 确保语义化 HTML 结构本身符合逻辑流（例如把操作按钮放在表单底部，而非 DOM 顶部）
- 对需要提前被读取但位置靠后的元素，用
tabindex="-1"并配合 JS 在适当时机.focus()（仅适用于模态框、实时更新区域等明确上下文） - 避免
tabindex="0"滥用——它会把非交互元素加入 Tab 键序列，破坏预期焦点流
示例：一个需先读“结果摘要”再回看“输入设置”的面板
立即学习“前端免费学习笔记（深入）”；
<div aria-labelledby="summary-title"> <h2 id="summary-title">分析结果</h2> <p>共匹配 3 条记录…</p> </div> <form> <label>关键词</label> <input type="text" /> <button type="submit">搜索</button> </form>
→ 正确做法是把 <div> 放在 <form> 前面；若因 CSS 布局必须后置，则用 CSS order 或 flex-direction: column-reverse 调整视觉顺序，**不改动 DOM 顺序**。
当真要强制跳转时：用 aria-activedescendant + 列表管理
适用于动态列表（如自动补全、树形控件），由 JS 主动控制当前活跃项，比 aria-flowto 兼容性好得多：
- 容器设
role="listbox"和aria-activedescendant="id-of-item" - 子项设
role="option"和唯一id - JS 更新
aria-activedescendant值，并确保对应元素有tabindex="-1" - 注意同步处理键盘导航（
ArrowDown/Home/End）和屏幕阅读器 announce
这属于“可控的、有明确交互契约”的模式，不是靠属性“声明式跳转”。
真正影响阅读顺序的是 DOM 顺序、CSS 视觉流（flex/grid 的 order）、以及是否用了 display: contents 等会剥离语义的样式——aria-flowto 是个早已失效的捷径，别在它上面浪费调试时间。
