用途:在构建任何网页功能、评审架构决策或评估 JavaScript 依赖时应用渐进增强规则。核心要求是让所有用户(无论浏览器能力、网速、辅助技术或 JS 可用性)都能访问核心内容并完成核心任务。
三层结构:第一层语义 HTML 始终必需,失败为 Critical,要求核心内容纯 HTML 可读、表单可原生提交、导航为普通链接、标题列表表格与地标准确反映结构。第二层 CSS 增强表现,失败为 Moderate 至 Serious,要求外链样式可禁用而不丢内容,并尊重 prefers-reduced-motion、prefers-color-scheme、prefers-contrast、forced-colors。第三层 JavaScript 增强交互,不得门控核心内容或任务,用特性检测而非浏览器检测,例如 if ('fetch' in window && 'querySelector' in document) { // apply enhanced experience }。
Service Worker 属第三层扩展,需特性检测注册并静默失败,离线回退页本身须是有效第一层 HTML。缓存策略应按内容更新频率选择,避免无失效方案地提供过期内容。
关键限制:核心内容不得依赖 JS 渲染,须由服务器输出完整 HTML,React/Vue/Angular/Svelte 应配置 SSR 或静态生成;表单须无 JS 可提交;导航须无 JS 可用;动态内容须有回退路由;避免 user-scalable=no、用 polyfill 替代渐进增强、为可服务端渲染的功能发送大 JS 包。
完成检查:禁用 JS 验证核心内容与任务、表单原生提交、导航为链接、CSS 尊重用户偏好、脚本失败优雅处理、使用特性检测、配置 SSR、Service Worker 特性检测注册、离线页有效、缓存策略有文档、禁用 JS 与 CSS 分别测试。相关 WCAG 标准为 2.1.1 键盘与 4.1.2 名称角色值;WCAG 4.1.1 解析已在 2.2 移除,不应在审计中引用。