视觉重排会造成顺序错乱
别名: 视觉与源顺序分叉 · CSS 重排乱序 · visual reorder mismatch
概念解释
姓名框在左、地址框在右，源里却先写地址。明眼人按画面从左读到右，读屏按树先念地址。两套顺序一开始就在讲两个故事。视觉重排造成错乱指的就是这份分叉：用 order、反向 flex、绝对定位、网格摆放把画面排成一套先后，结构仍是另一套，听到的序列被拆乱。
结构决定播报，是原因。这里锁的是症状：画面一搬家、树不跟着搬时，辅助技术用户拿到的不是「另一种排版」，是被打乱的意义。
机制
绘制和结构是两套投影。flex order、row-reverse、grid 指定区域、float、绝对坐标都只改绘制。视觉阅读沿空间走（从起始到末尾、从上到下）；播报沿树走。分叉一旦出现，听到的相邻两项在画面上可能隔着整栏，画面上相邻的两项在听力里可能隔着三个无关节点。
错乱的伤害不均。把装饰性徽章视觉上提前、树里仍在后面，通常只是啰嗦。把「同意条款」画在提交按钮上方、树里却放在按钮后面，人会先听到提交再听到条款，因果反了。促销条用 order: -1 提到视觉顶、树里仍在主内容之后，听的人会在文章中途突然撞上广告语，像插播。
怎么研究
做两份除视觉顺序外完全相同的页面：一份源与视觉一致，一份用 order 或绝对定位把视觉改掉。请读屏用户完成同一任务，比较：听到的步骤名单、是否操作了视觉上的「上一件」、主观「顺序乱了」的报告。自变量：是否视觉重排、重排跨越的区域大小。因变量：序列与任务顺序的 Kendall 距离、错误操作、完成时间。
把 CSS 关掉再听一遍，是便宜的自检：若关掉样式后顺序反而更通顺，说明通顺全靠绘制，结构是乱的。
边界
响应式下主内容与导航换列，只要树始终是同一份内容优先清单，视觉搬家不算这条所说的错乱——错的是连树一起改、或只用 order 在某一宽度撒谎。从左到右 / 从右到左的镜像改变的是行内方向，不是「先标题后正文」的逻辑。用户自己在阅读器里跳过导航，不是重排。画布类界面没有一份稳定视觉阅读，这条弱。
怎么落地
- 把
order、反向主轴、绝对定位当成会制造第二套阅读顺序的工具。出现时必须用读屏把听到的名单走一遍，不能只看画面。 - 视觉上的「第一」应当是树上的第一。若设计需要某一宽度把侧栏画到另一边，用网格放位置，不要在源里对调节点，也不要只在这一宽度上改
order。 - 验证：同一页，开样式听一遍，关样式听一遍。两份名单应当相同，且都等于你给明眼人讲的步骤。哪一项只在开样式时换位，就是视觉重排在撒谎。把对应的
order/ 绝对定位删掉后再听，名单应重合。