从用户选择与令牌系统开始
使用 prefers-color-scheme 将系统设置作为默认。如果提供切换开关,使用可键盘操作的控件并带有可访问名称,同时以编程方式公开当前激活的选择。在该浏览器上下文中,让手动选择具有优先权;不要承诺它会跟随用户到另一台设备或私密会话。
按角色命名颜色,而非外观:画布(canvas)、表面(surface)、文本(text)、次要文本(muted text)、边框(border)、链接(link)、重色/强调(accent)、错误(error)、成功(success)、焦点(focus)和禁用(disabled)。在两种主题中映射每个角色。这可防止仅为明亮主题设置的灰色渗入深色模式,并使修复可复用。深色并非天然更具无障碍性或人人偏好;它只是另一种需要保证可用性的体验。
记录一个顺序,例如先是已保存的选择,其次是系统偏好,这样团队就能测试出相同结果。
包含 hover、focus、selected、invalid、disabled、loading、empty 和 visited-link 等状态,而不仅是默认状态。
在渲染后的主题中测量对比度
WCAG 2.2 Success Criterion 1.4.3 将普通文本和作为文本的图像的最低对比度定为 4.5:1,大号文本为 3:1。不要四舍五入:4.499:1 不满足 4.5:1。细体在视觉上可能比其计算颜色显得弱,因此使用更厚实的字重或额外的间距。
检查每个渲染后的前景色与相邻背景色。文本叠加在照片、渐变、半透明面板或视频上时背景会变化,单一令牌计算无法证明其可读性。使用不透明后备、足够的覆盖层或不同的布局位置,然后在真实视口下检查。
根据 WCAG 2.1 Success Criterion 1.4.11,识别活动控件、必需状态或有意义图形所需的视觉信息相对于相邻颜色需要达到 3:1。
配合颜色变化使用文本、图标、图案、位置或其他明确提示;错误和已选状态不应依赖细微的色调差异来传达。
保护键盘焦点、表单和状态更改
在两种主题中通过 Tab 遍历。焦点必须在链接、按钮、输入框、菜单、对话框、自定义控件和主题切换控件上可见。除非在每个表面和状态上都已测试替代方案,否则不要移除浏览器的 outline。偏移的边框(offset outline)通常比模糊的光晕更清晰。
WCAG 2.2 中的 Focus Appearance 是 AAA 级别的准则,不代表站点达到 AA。它是一个有用的目标:指示区域至少与 2 CSS 像素周长等大,并且聚焦与未聚焦像素之间有 3:1 的对比。此外还要验证错误、必填、已选和不可用状态保留其含义。
分别测试输入提示、已输入值、标签、帮助文本、错误文本、无效边框、复选框标记、单选选择和提交状态。
对于结账或其他受监管流程,使用支付提供商的沙箱并在适当情况下取得合格的无障碍和安全评审。该段是教育性建议,不构成合规或安全评估。
处理图像、嵌入资产与浏览器提供的 UI
在两种主题中检查徽标、插图、截图、图表、图标和烘焙在图像中的文本。重复使用的明亮徽标可能会在深色模式下消失,图表图例即使周围 HTML 合格也可能失败。提供与用途匹配的资源或稳定背景。传达说明、状态或数据的图像必须保持可理解性。
声明对浅色和深色方案的支持,然后为所选主题样式化页面内容。color-scheme 属性能使浏览器的画布、滚动条、表单控件和其他浏览器 UI 与主题对齐。将相应的元数据尽早放在文档中。嵌入的 SVG 可以响应父方案;对第三方 iframe 和小部件端到端地进行测试。
偏好语义化的 HTML 控件。forced-color 行为依赖原生语义,而不是向通用元素添加 ARIA 角色来伪造语义。
检查已下载、已缓存、加载缓慢和加载失败的图像状态,尤其是文本或操作提示位于媒体之上时。
尊重 forced-colors 并将发布作为一个系统来测试
forced-colors 模式应用有限的用户选择调色板,例如 Windows High Contrast。浏览器可能替换颜色、移除阴影并添加文本背板(backplates)。不要阻止用户覆盖。对在组件中失去边界或含义的情况做有针对性的修复,例如用真实边框替代曾由阴影承担的可用性提示。仿真无法代表所有设备、浏览器、扩展、缩放级别或辅助技术组合。
在发布前在浅色、深色和 forced-colors 设置下运行路由与交互矩阵。Chrome DevTools 可以模拟这两种情况;使用它来加速审查,然后手工导航优先流程。扫描器能发现候选问题但不能单独确定可访问性。SIU 对关键主题资产和交互做预检、记录发布门槛,并保留经过测试的回滚路径以应对严重的呈现回归;这不是停机监测。
包含着陆页、导航、搜索、账户访问、表单、错误页、已认证屏幕和材料转换流程等。
保存已测试的 URL、浏览器版本、设置、例外、负责人和回滚触发条件,以便从事实出发启动修复工作。
