J5.02.1accessibility tree设计研究

辅助技术读取的是无障碍树而非视觉呈现

别名: 无障碍树 · a11y tree · 辅助功能树

概念解释

截图上有按钮,不等于辅助技术找得到按钮。屏幕阅读器、开关扫描、语音控制读的是平台暴露的无障碍树(accessibility tree),不是像素,也不是设计稿上的框。树里没有的节点,对辅助技术来说等于从未画出来。

机制

浏览器和操作系统把界面对象收成一棵比视觉层更瘦的树:哪些东西存在、叫什么、是什么类型、当前怎样。样式负责给人看,树负责给辅助技术用。换肤、放大、深色模式可以彻底改像素,树可以不动;反过来,像素再完整,树是空的,辅助技术也是空的。

第二层在「存在」的判据:藏进样式里的对象(移到屏外、透明、被挡住)仍可能留在树里被读到;从结构里拿掉的对象(不渲染、从树上剔除)才真正消失。用户听到或扫到的世界,是这棵树的投影,不是屏幕的照片。

怎么研究

并排三样:视觉截图、无障碍树检查器、阅读器实际播报。找「图上有、树上无」和「树上有、图上看不见」两类错位。

自变量:对象是否进入树、是否被标成装饰、样式隐藏与结构隐藏。 因变量:辅助技术能否定位该对象、播报是否与截图上的功能对应、错位发生在存在还是命名。

桌面看浏览器的无障碍检查器;移动端看系统辅助功能检查器。不要用「页面长什么样」代替「树里有什么」。

边界

有些对象故意不进树(纯装饰、重复的可见文字),缺席是正确的。画布、游戏引擎、远程桌面把界面画成一张图时,树可能只有一块位图,这条对普通文档成立、对自绘表面要另接桥。放大镜用户读的是像素,不走这棵树,不能拿阅读器的结论去套。

怎么落地

  • 每个要被操作或理解的对象必须作为节点出现在无障碍树里,不能只存在于视觉层。
  • 装饰与重复的可见文字应从树上拿掉,以免辅助技术读到一份与任务无关的影子界面。
  • 验证:打开无障碍树,对照主流程上的每个控件。截图上有、树里找不到的,辅助技术用户也找不到;树里有、界面上看不见的,会被读成幽灵。

延伸

  • 同组J5.02.2 角色决定用户可预期的操作方式 · J5.02.3 名称、角色、状态三者缺一即不可用
  • 相邻J1.01 四项原则 · J5.10 名称、角色与状态
  • 站内检索accessibility tree · assistive technology · accessible object

同组卡片

快捷操作

分享

分享当前页面

ios_share

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