E2.22.1load-time autofocus interruption设计研究

页面加载即聚焦会打断屏幕阅读器的顺序播报

别名: 自动聚焦打断读屏 · autofocus on load · 跳过页标题

概念解释

页面一打开就把焦点丢进某个输入框,屏幕阅读器会从那一格开始讲,前面的标题、说明、错误摘要被跳过。这叫加载时自动聚焦打断(load-time autofocus interruption)。视力完好的用户也许正想直接打字;依赖顺序播报的人失去了「这是什么页」的开头。它管的是进入页面时的播报顺序,不是弹层里该不该接走焦点,也不是输入中途被抢走。

机制

读屏器把 DOM 顺序当成故事线:先文档标题,再主标题,再导语,才到第一个控件。autofocus 或脚本在 load 时 focus() 把插入点塞进故事中间,虚拟光标和浏览模式被拽进编辑模式,前面的节点等于没发生。键盘用户若还想听说明,得 Shift+Tab 往回爬,而许多实现并不把说明放在焦点序里,爬也爬不到。打断在「这一页只有一个槽、人人都知道要填」时代价小;在设置页、带长说明的申请表、刚显示过错误的刷新上代价大——错误文本往往在槽前面,焦点已经在槽里,错误没被读到。

怎么研究

用读屏器打开带与不带加载自动聚焦的同一页,记录文档标题、主标题、说明、第一个字段被读到的顺序和是否被跳过。自变量:autofocus 属性对脚本延迟聚焦、错误摘要的位置。因变量:任务开始前能否复述本页目的、错误是否被听见。视力完好的对照组测「第一键是否立刻能打」——两边的因变量不同,不要用后者的速度优势否定前者的顺序损失。刷新带校验错误的页是必测条件。

边界

真正的单字段工具(弹出的查找条、独立登录页只有密码)自动聚焦常常是对的,打断的前文几乎没有。单页应用路由切换不是「整页 load」,但仍会触发同样的焦点塞入,应当成同一种打断。浏览器自己的地址栏、插件也可能在 load 时抢焦点,作者侧的 autofocus 会和它们打架。减少自动聚焦不等于永远不聚焦,弹层打开是另一条规则。

怎么落地

  • 不要在普通多字段页的加载时使用 autofocus 或立刻 focus()
  • 让读屏器从文档和主标题开始;需要立刻更正的错误用页顶摘要承接焦点,而不是落到某一个槽里。
  • 单字段、目的明确的工具页才把加载聚焦当作例外。
  • 验证:用读屏器打开页面,在未按任何键前听完开头。标题和说明被跳过、直接进入「编辑框」,加载聚焦就在打断顺序。再带着服务端错误刷新一次。

延伸

  • 同组E2.22.2 自动聚焦适合唯一且明确的首要输入框 · E2.22.3 弹层打开后应主动移交焦点,关闭后应归还 · E2.22.4 非用户触发的焦点跳转会打断正在进行的输入
  • 相邻E2.01 单行输入框 · E4.10 模态对话框
  • 站内检索load-time autofocus interruption · screen reader order · autofocus

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E2.22.1