无障碍
这是地板,不是天花板。
| 要求 | 细节 |
|---|---|
| 目标 ≥ 24×24px | WCAG 2.2 SC 2.5.8。宽度也要查,因为纯图标按钮是正方形。视觉上刻意更矮时(滑块导轨、复选框字形)撑开命中区,而不是缩小目标 |
| 对比度逐对验证 | 不靠假设。每次改色阶都把关键配对重算一遍,包括小字号落在浅底上的最差组合 |
| 键盘全覆盖 | 能到达鼠标能到达的一切,顺序可见。弹窗打开期间收束焦点,关闭时把焦点还给触发器 |
[hidden] 需要恢复 | 任何设了 display:flex 或 grid 的组件都会盖掉浏览器默认的 [hidden]{display:none}。在基础样式表里落地 [hidden]{display:none !important}——离屏面板泄漏到视野里就是这么发生的 |
| 含义不单独依赖颜色 | 红色描边需要配一条消息;转圈需要配文字;选中态需要配对勾 |
关键配对实测
| 配对 | 实测 | 门槛 | 结果 |
|---|---|---|---|
取值 / 正文 900 在白底 |
17.74:1 | 4.5 | 通过 |
字段名 600 在白底 |
7.56:1 | 4.5 | 通过 |
字段名 600 在胶囊底 |
6.87:1 | 4.5 | 通过 |
说明 500 在白底 |
4.83:1 | 4.5 | 通过 |
说明 500 在画布 |
4.71:1 | 4.5 | 通过 |
| 白字在主按钮 | 17.74:1 | 4.5 | 通过 |
| 白字在强调红 | 5.27:1 | 4.5 | 通过 |
| 已填充 vs 未填充轨道 | 12.04:1 | 3 | 通过 |
| 焦点环在白底(2px offset 后的相邻色) 这就是 offset 承重的地方:有偏移时环的相邻色是面板白底;没有偏移时它贴着近黑填充,只剩 2.92:1。 |
6.08:1 | 3 | 通过 |
已知的、刻意接受的偏离
规范应该记录自己的债务,而不是假装没有。
| 项 | 实测 | 门槛 | 理由 |
|---|---|---|---|
stroke-default 作浮层唯一边界 | 1.24:1 | 3:1 | 浮层同时有阴影,边界不只靠描边 |
stroke-input 作输入框唯一边界 | 1.47:1 | 3:1 | 整体观感的主要来源。要合规需压到 #949ba5 左右,边会明显变重——提供一个覆盖档即可,改一个令牌 |
| 标尺数字 | 2.47:1 | 4.5:1 | 器械刻度不是内容;画板尺寸在结果栏有明确数值 |