无障碍

底线,不是上限:

  • 每个可交互目标至少 24×24px(WCAG 2.2 SC 2.5.8),模板里已经没有例外。宽度也要查,纯图标按钮是正方形的。视觉上刻意更小的——20px 的开关轨道、12px 的滑块圆钮、11px 的文字链接——模板的做法是保留视觉尺寸,用内边距把命中区撑到 24,再用等量负外边距还给版面,行高不变。它们引用的是同一个 --min-target,改一处,全部跟着走。
  • 逐对验证对比度,永不假设。 换肤后把关键配对重算一遍,包括控件底色上小字这种最差情况。text-tertiary 按设计就在 AA 线下,所以它绝不承载取值、消息,或决策所依赖的标签。
  • 键盘能到达鼠标能到达的一切,且顺序可见。对话框打开时锁住焦点,关闭时把焦点还给触发器。自造的列表框欠着原生 <select> 白送的那份契约,见组件
  • [hidden] 需要恢复。 任何设了 display: flexgrid 的组件都会覆盖浏览器默认的 [hidden] { display: none }。在基础样式里发 [hidden] { display: none !important }——收起的面板漏出来,通常就是这个原因。
  • 含义永不只靠颜色、形状或动效。 红边框要配消息;spinner 要配文字;选中的缩略图要有描边,不只是底色。

关键配对实测

配对实测阈值
text-primary 在白底17.90:14.5:1通过
text-primarybg-subtlest17.46:14.5:1通过
text-primarybg-control15.56:14.5:1通过
text-secondary 在白底10.68:14.5:1通过
text-secondarybg-control9.28:14.5:1通过
白字在 brand-default14.35:14.5:1通过
白字在 bg-inverse(深色对话框头部)17.90:14.5:1通过
stroke-surround(焦点环)在白底4.76:13:1通过
red-default 作为白底错误文字4.36:14.5:1临界
text-tertiary 在白底3.60:14.5:1已知例外
text-tertiarybg-control3.13:14.5:1已知例外
blue-default 作为链接与信息文字3.79:14.5:1已知例外
白字在 emphasize-default3.89:14.5:1已知例外
text-disabledbrand-disabled1.57:1本就不该被读

承载含义的那两档——text-primarytext-secondary——在系统里的每个表面上都过线。标为「已知例外」的四行是令牌导出给的原值,不是缺陷:下面会再列一遍并写清理由。换皮肤时把整张表重算一遍。

已知的、刻意接受的偏离

一份规范应该记下自己的债,而不是假装没有:

实测阈值理由
text-tertiary 作为说明文字3.60:14.5:1(1.4.3)令牌导出给它的原值。因此三级文本只装看漏了也没关系的字——绝不装取值、消息,或决策所依赖的标签
blue-default 作为链接与信息文字3.79:14.5:1(1.4.3)导出原值。链接保留下划线,颜色不是唯一信号
白字在 emphasize-default3.89:14.5:1(1.4.3)导出为平台红定的原值。它每屏最多出现一次
text-disabledbrand-disabled1.57:1禁用控件本就刻意不可读;状态另由光标与 aria-disabled 承载
stroke-default 作为控件唯一边界1.43:13:1(1.4.11)控件还靠底色与所处表面区分,边框不是唯一线索
白卡片上的灰底控件1.15:13:1(1.4.11)整个面板建立在这种凹陷上;聚焦加 1px stroke-active 边框,标签也说明了它是字段

前四条来自令牌导出,按原值接受——尊重它们的方式是别把受影响的文字放到承重角色上,而不是去挪取值。后两条是这套视觉的来源:把边框加深到 3:1 会让每一条边都变重,而让控件静止时就有 3:1 的边界,等于把灰底取代掉的那个描边框又请回来。

Esc
输入关键词搜索全部文档 · 切换 · 打开