无障碍

底线,不是上限:

  • 每个可交互目标至少 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 要配文字;选中的缩略图要有描边,不只是底色。
Esc
输入关键词搜索全部文档 · 切换 · 打开