J5.12.1live region设计研究

页面内容在无导航跳转的情况下更新时,需要主动通知辅助技术

别名: 动态通知 · status message · 无跳转更新

概念解释

看见的人靠运动瞬变知道列表换了、筛选出了结果、购物车角标变了。阅读器的虚拟光标还停在原地,没有整页加载,也没有焦点被挪走,这次更新对辅助技术等于没发生。实时区域(live region)以及把焦点移到新内容,是两条主动通知的管道。没有其中至少一条,无导航跳转的更新只存在于绘制层。

这不是缓冲区过时:即使用户此时按下方向键,也不等于系统已经告诉他「刚才发生了一件事」。通知是推;重建是拉。

机制

阅读器默认跟焦点和虚拟光标走。单页路由、Ajax 替换、就地筛选都不产生「新文档」信号,光标不会自己跳到新块。视觉系统有瞬变;语音没有等价的「画面闪了一下」。所以变更必须被编码成无障碍事件:区域内文本变化、或焦点落到新标题上。两条都没有,用户会把旧上下文当成仍有效,下一步操作建在过期前提下。

第二层是「谁该被推」。不是屏幕上每个像素变化都值得推——那是另外的分级和频率问题。这里的机制只要求:若这次更新改变了用户下一步要依据的事实(结果条数、提交成败、当前视图是哪一档筛选),辅助技术必须被带到这个事实面前,而不能指望用户碰巧走到那一块。

怎么研究

设计一个无整页刷新的任务:点筛选、看结果列表替换。一档不通知;一档把焦点移到结果标题;一档只改 live 区域里的「找到 N 条」。遮屏完成任务,记录用户是否知道列表已换、是否还在对旧结果操作。NVDA+Firefox 与 VoiceOver+Safari 都跑,因为 live 与焦点移动的可靠性不同。

自变量:通知手段(无 / 移焦点 / live)、更新是否改变下一步决策。 因变量:是否报告「发生了更新」、错误操作次数、发现更新所花的按键数。

边界

用户自己的输入造成的回显(打字、拖动滑块的即时数值)通常不必推,焦点已经在那个控件上。整页导航、打开新对话框这类已经伴随焦点移动的更新,再用 live 复述一遍会叠音。装饰性动画、广告轮播没有「下一步依据的事实」,通知它们是在制造噪音。离线、弱网时更新到达阅读器的时序可能晚于用户已经离开该页,通知变成过期消息,需要可忽略或带时间。

怎么落地

  • 筛选、路由切换、提交成功这类改变当前视图的更新,要么把焦点移到新标题,要么把一句摘要推进状态区域,两条至少做一条。
  • 摘要要说事实(「12 条结果」),不要只说「已更新」。
  • 不要把整张结果列表标成 live 来代替通知;通知是一句,列表留给用户自己走。
  • 验证:关掉显示器完成一次筛选。若操作者仍按旧结果说话或问「有没有换」,就是没通知。再看焦点有没有被抢走——被抢到页顶也不算成功,只算另一种打断。

延伸

  • 同组J5.12.2 播报的紧急程度需要分级,非关键更新不应打断用户当前操作 · J5.12.3 加载状态、错误提示等瞬时反馈若不进入播报区域会被完全跳过 · J5.12.4 过于频繁的动态播报会造成信息过载,效果等同于噪音
  • 相邻J5.09 屏幕阅读器的工作原理 · J5.11 语义补充属性的正确使用
  • 站内检索live region · status message · dynamic announcement

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/J5.12.1