E1.12.2toggle button accessible state设计研究

切换按钮的状态需要能被辅助技术识别为开关

别名: aria-pressed · 切换角色 · toggle role

概念解释

视力正常的用户靠凹陷看出加粗是开还是关。屏幕阅读器和语音控制没有凹陷,它们需要角色和状态:这是一枚切换,当前是按下或未按下。辅助技术要把切换按钮识别为开关类控件,而不是普通「按钮,激活以执行」。缺状态时,每次聚焦都只听到「加粗,按钮」,开着和关着的播报一模一样。

机制

无障碍树用角色区分「按一下做事」和「按一下翻转值」。button 加上按下状态(pressed true/false),或显式的 switch 角色,才能让合成语音在名称后面读出「开 / 关」。语音控制也靠状态决定说「打开加粗」还是「关闭加粗」。只有名称没有状态,用户只能靠试探:按一次听文档变了没有。试探在不可见的格式状态上很贵,在「静音」这种没有即时文档变化的设置上更贵。可见的凹陷不是状态的替代,因为辅助通道根本不读像素。

怎么研究

用屏幕阅读器聚焦同一枚切换,对照:无状态的 button、带 pressed 的 button、role=switch。记录播报字符串,以及「关掉加粗」口令是否在已开时命中。

自变量:角色与状态属性、可见凹陷是否存在(对 AT 应无关)。 因变量:能否从播报判断当前值、翻转所需步数、误把切换当一次性动作。

打开显示器的测试会让主试自己看凹陷来判对,造成假通过。应关掉屏或让看不见界面的人操作。

边界

真的开关控件走 switch 角色;工具栏里的加粗更常见是 button + pressed,不要仅仅为了「像开关」就改成 switch,否则转子分类会把格式和设置混在一起。一组互斥切换(左对齐 / 居中)要用 pressed 加组关系,不要五枚各自为 switch。名称不要写成「加粗开」,把值塞进名称会导致状态变化后名称与状态重复或打架。

怎么落地

  • 给切换按钮暴露按下状态,播报需能区分开与关。
  • 名称只命名设置(加粗、静音),把开/关留给状态,不要写进名称。
  • 用屏幕阅读器在开和关各听一次,两句必须不同。
  • 验证:关掉显示器,只听工具栏。若加粗在开、关时播报完全相同,辅助技术就没有把它识别为带状态的开关。

延伸

  • 同组E1.12.1 切换按钮以按下与未按下表达当前设置的状态 · E1.12.3 工具栏中的切换按钮需要与相邻的动作按钮区分样式 · E1.12.4 切换按钮的状态在页面刷新后仍需保持
  • 相邻J5.10 名称、角色与状态 · E3.03 开关 · J5.04 语音控制
  • 站内检索aria-pressed · toggle button · switch role

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E1.12.2