R3.01.1native element accessibility behavior设计

语义元素自带无障碍行为

别名: 原生语义行为 · 自带辅助技术行为 · built-in AT behavior

概念解释

用平台提供的语义元素——网页上的按钮、链接、输入框、标题,原生应用里的 ButtonTextFieldSwitch——等于把一套已经接好的辅助技术行为一并带上:它会出现在对应的控件列表里,能被键盘或等效操作激活,读屏会按这种控件来宣布。选语义元素,是在借这条现成的映射,不是在选一种外观。

一块画出来的矩形可以长得像按钮,却不在这条映射上。外观可以另做;行为是元素类型附带的。这里只管「选对类型就带上行为」,不负责去补一套从零声明的控件。

机制

浏览器和系统会把语义元素映射进无障碍树,再送到平台的辅助功能接口。<button> 默认进入 Tab 序,空格和回车激活,读屏把它读成按钮;<a href> 进链接列表;<h2> 进标题跳转。设计选这些元素时,等于预订了这组行为,不必在稿上再写一遍「可聚焦、可激活、可被列入按钮清单」。

<div>、无角色的 View、一张切图按钮,不进入这套映射。点击事件可以自己绑,但读屏仍当静态区域,键盘可能到不了,开关、链接、标题各自的清单里也没有它。行为不是样式的副产品,是元素类型在无障碍树上的登记。换类型等于换登记;只换皮肤,登记不变。

边界

语义元素如果内容是空的(没字的按钮、没有 href 的链接、空标题),类型带上的行为会指向一个无法辨认的对象,比用错类型更难查。画布、游戏引擎、自定义绘图表面没有原生控件树,选「语义元素」这条路根本不存在,必须走另一套暴露接口。原生元素被包在无法穿透的自定义层里,映射会被挡住,表面上选了按钮,辅助技术仍看不到。禁止交互的装饰(纯展示的卡片底)不该被做成按钮去「顺便」带行为,带上的是错误的行为。

怎么落地

  • 稿和组件清单上先写元素类型(按钮、链接、标题、输入、开关),再写外观;能用平台控件完成的动作,不指定成通用容器。
  • 走查时打开读屏的按钮列表、链接列表、标题列表,核对视觉上像这些东西的对象是否在对应名单里。
  • 只用键盘走一遍主路径:每个主要动作应能被激活,而不必先用鼠标点亮。
  • 验证:同一界面分别用鼠标、Tab、读屏的控件列表到达同一动作。三路里缺一路的,就是选了外观、没借到语义元素自带的行为。

延伸

  • 同组R3.01.2 用通用容器模拟控件需补全全部语义 · R3.01.3 结构顺序决定辅助技术的遍历顺序
  • 相邻J2.09 语义结构 · R3.09 语义化结构与可访问性实现
  • 站内检索native element accessibility · built-in AT behavior · semantic HTML controls

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/R3.01.1