错误字段需在视口内可见
别名: 错误滚入视口 · scroll into view · error visibility
概念解释
焦点在字段上，不等于人看得见它。粘性顶栏、移动键盘、底部工具条、错误文案把输入顶出屏幕，都会让「当前项」落在视口外。视口内可见指：出错的标签、输入本身和紧挨着的错误说明同时出现在未被遮挡的可视区域里，人不用猜焦点在哪。这条谈的是几何可见，不是该把焦点程序化到哪一项，也不是红和灰能不能区分错误。汇总区在顶部可见，也不等于字段自己可见。
机制
视口是一块被浏览器、系统键盘和产品自建的粘性层共同切割的矩形。focus() 默认只保证元素进入滚动容器，不保证它没被 position: sticky 的 56 像素顶栏盖住，更不保证手机上半屏幕的键盘把输入推到键盘后面。人看见一条空白或只看见半个框，会以为系统没反应，于是再点提交。第二层是三件套同时在场：只露出输入框、标签在折线之上、错误文案在折线之下，人无法把「这是哪一项、错在哪」一次看全，修正变成记忆题。可见的标准不是 caret 闪一下，而是标签 + 控件 + 错误说明的外接矩形落在安全区内。滚动动画过长或被用户的「减少动效」关掉时，若最终位置仍被挡，动画成功也等于失败。
怎么研究
在带粘性导航、带虚拟键盘、带底部横幅的页面上提交失败，测量错误三件套有多少像素落在未被遮挡区域。
自变量：粘性顶栏高度、是否弹出系统键盘、滚动对齐方式（顶端齐平 / 留出顶栏垫）、错误文案在字段上还是下。 因变量：标签、输入、错误文案各自被遮挡的像素、人报告「看不见要改的框」的比率、重复提交次数。
桌面实验室会漏掉键盘遮挡。必须用真机弹出键盘。不要用「scrollIntoView 被调用了」当成功——调用与可见不是一回事。
边界
极长的错误说明无法与输入同时进视口，应把说明压到两行内、其余放展开，而不是为了塞进说明把输入顶走。分栏布局里字段在右栏、视口滚动的是左栏，滚错容器会让字段永远在屏外。放大到 200% 或使用屏幕放大镜的用户，「可见」相对的是他们的放大窗口，不是布局视口；此时焦点指示比整块三件套更关键，但仍不能让输入落在放大窗口外。打印预览没有交互视口，这条不适用。
怎么落地
- 提交失败并定位到错误项之后，滚动该字段所在的真实滚动容器，使标签、输入和错误说明都进入未被粘性层和系统键盘遮挡的安全区；顶端对齐时预留粘性顶栏的高度。
- 移动端在键盘弹出后再测一次位置，必要时把字段滚到键盘上方而不是页面物理顶端。
- 错误说明紧贴字段，控制在两行之內的可见摘要，避免长文案把输入挤出视口。
- 验证：打开粘性顶栏，把首错放在页顶；提交后截屏，检查标签是否被顶栏切开。真机弹出键盘再提交一次，检查输入是否在键盘上方完整可见。把错误文案写到四行，看输入是否被顶出；压到两行后复测三件套是否同屏。