无障碍与 RTL
可达性是双轨仲裁的第一层,不是视觉偏好;RTL 是已验证的布局方向,不是未经声明的“应该可以”。
承诺与自动检查
| 承诺 | 自动证据 | 仍需人工检查 |
|---|---|---|
| 正文、语义色与焦点达到对比度底线 | npm run check:colors 测 30 组对比度与 12 组 ΔE | 真实内容叠加、图片文字与第三方嵌入。 |
| 文档页有主地标,控件有标签,交互有名字 | npm run check:a11y 扫描生成的站点;自测故意放入无标签输入并确认失败 | 键盘焦点顺序、读屏器朗读和动态提示时机。 |
| 焦点不可被移除,动效尊重减少动效 | check:forbidden 拦截 outline:none;check:a11y 拒绝不可聚焦、无名称的宽表滚动区;render-audit 自测覆盖 contract 结构门槛 | 键盘完整走查、原生 dialog 焦点归还、触控目标。 |
| Windows 高对比模式不被暖土 token 覆盖 | kit/base/a11y.css 用 forced-colors: active 映射系统色 | Windows + Edge / Firefox 实机高对比主题。 |
自动检查故意不声称能替代可访问性树或人工设备测试。它们只证明明确的静态约束没有回归。
发布前人工清单
- 从地址栏外的第一个 Tab 开始走完交互;跳过链接、焦点环与关闭后的焦点归还必须可见。
- 用至少一种读屏器确认标题、地标、错误摘要、toast 与 dialog 的名称和状态。
- 在 Windows forced-colors 下确认链接、边框、主按钮和浮层仍可分辨;不得强制保留品牌色。
- 在 390px 宽度确认没有横向页面滚动,表格在自己的可滚动区域内而非撑破页面。
RTL 验证结论
已在本地 HTTP 站点用 dir="rtl" 实测导航、侧栏、表单、图注、分页、开关、标签页与抽屉:
逻辑属性会把起止边、内外边距及抽屉锚点翻到正确一侧;方向键、滑块位移和抽屉进入方向也随书写方向翻转。390px 与宽屏均无页面级横向溢出。
关键实现是 border-inline-*、margin-inline、inset-inline 与
text-align:start/end,而不是为 RTL 维护一套镜像选择器。
边界
这证明 kit 的布局方向可用,不等于本站已完整阿拉伯语/希伯来语本地化。双语文案、字体覆盖、日期数字与内容翻译仍由采用者负责。
<html lang="ar" dir="rtl">
<link rel="stylesheet" href="kit/index.css">
<!-- 使用同一套 wx-* markup;不要添加 left/right 覆盖 -->
</html>