焦点顺序需与视觉顺序一致
别名: Tab 顺序 · 焦点序列 · visual focus order
概念解释
眼睛扫过界面的路径，和焦点从一个控件跳到下一个的路径，是两套坐标系。焦点顺序（focus order）要求这两套坐标重合：从左到右、从上到下看见的下一个可操作对象，就是按 Tab 之后到达的对象。顺序对不上时，看得见的人会丢失空间模型，看不见的人会把「下一步」理解成错误的任务阶段。
它不管浮层打不打开、陷阱出不出得去。它只管：在当前这一屏可见的控件里，键盘走的队列是不是眼睛走的那条。
机制
视觉阅读在横向书写系统里按行推进，人用这个空间模型预期「下一个」。键盘没有空间，只有序列。序列默认来自文档源顺序；CSS 用 flex/grid 换了视觉位置、用 order 重排、用绝对定位把按钮钉到角落，源顺序并不跟着改。于是焦点在视觉上「往后跳」或「跳回已经看过的区域」。
tabindex 大于 0 会再插入第三条队列：先走所有正整数，再走源顺序里的其余项。页面因此出现「先跳到页脚再回到正文」这类无法用眼睛预测的路径。正整数 tabindex 不是加速，是另建一套与视觉无关的坐标系。
怎么研究
把页面按视觉分成带，从左上开始画预期序列，然后只按 Tab，把实际落点标在同一张图上。错位记为「跳号」：实际到达的是视觉上的第几号。
自变量：布局手段（源顺序、flex 换位、绝对定位、正 tabindex）。 因变量：错位数、用户报告的「我以为在这儿」误差。
屏幕阅读器浏览模式的读序是另一条序列，由结构决定，不要和 Tab 序列混成一次测量。这条只测焦点序列与视觉。
边界
从右到左的书写系统里，「与视觉一致」指该语言的阅读方向，不是强行左到右。网格和工具栏内部用方向键漫游时，Tab 只进出整件；内部顺序仍须与格子的视觉排列一致。刻意把「跳过重复区块」放在序列最前，是另一条目的入口，不叫顺序错误。打印样式或视觉上隐藏但仍可聚焦的项目会让两条坐标永远对不齐——那是隐藏策略的问题，不能靠再调 tabindex 补。
怎么落地
- 先按视觉阅读顺序写 DOM，再用样式排版；不要用 CSS
order或正tabindex另排一条键盘路径。 - 把
tabindex="0"留给需要进入序列的自定义控件；禁止tabindex="1"及以上。 - 验证：从地址栏 Tab 进页面，眼睛跟着焦点走。焦点跳到视觉上尚未经过、或已经经过的区域，这一条失败。