# W3C 设计系统 ## W3C 设计系统 界面预览 可单独或同时展开各个会话；即使禁用 JavaScript，内容仍清晰可读。 ## W3C 设计系统 设计参考 已下载 W3C 官方文档和 2026 年 10 月 3 日的公开 CDN 快照；已检查实际的 CSS 和原生脚本。 ### 流式字体排版 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Web font / fallback | Noto Sans / Trebuchet MS, Geneva, sans-serif | 原生 CSS 会在字体加载完成后应用 Noto Sans；演示保留系统字体回退。 | | Fluid range | 320–1120px viewport | 超出此范围后，clamp 值会保持不变；字号不会突然跳变。 | | --w3c-text-0 | clamp(.9375rem, .9125rem + .125vw, 1rem) | 正文：根字号为默认值时，字号从 15px 调整至 16px。 | | --w3c-text-5 | clamp(1.6894rem, 1.6444rem + .2253vw, 1.802rem) | H1 字号级别；约为 27–28.8px。 | | --w3c-text-7 | clamp(2.1382rem, 2.0811rem + .2851vw, 2.2807rem) | 最大的 text-xl 字号级别，不是默认的 H1。 | | Body line height | 1.5 | 相对于流式字体大小。 | | Collapsible H3 | --w3c-text-1 / line-height 1.5 | 组件覆盖值：约为 16.9–18px。 | ### 语义色彩 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Text | #111111 | 近黑色；用于普通阅读文本。 | | Link | #005a9c | W3C 蓝；与悬停和已访问状态的颜色区分开。 | | Hover / visited | #002a56 / #75336c | 保留状态之间的区别。 | | Focus | #f9dc4a | 黄色焦点样式，边界清晰可见。 | | Input border | #545454 | 与装饰性分隔线承担不同的对比度作用。 | | Success / error | #046704 / #a82615 | 用于表达状态含义，而非随机点缀。 | | Warning | #c28605 | 警告提示的边框颜色。 | ### 布局与间距 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | l-center | max-inline-size:70rem; padding-inline:5vw | 原生宽容器；预览版将应用内容宽度限制为较窄的 55rem。 | | Reading measure | 41.25rem | 可折叠内容区域内的最大内容宽度。 | | Stack default | 1em between direct siblings | 官方 Sass mixin 支持显式指定宽度；它并非固定的 8px 间距比例。 | | Collapsible inset | 1.5625rem | 根字号为默认值时为 25px。 | | Collapsible separation / radius | 1rem / .375rem | 16px 间距，圆角为 6px。 | | Collapsible shadow | -.0625rem .0625rem .25rem rgba(55,70,95,.12) | 细微的界面表面层次；原生 CSS。 | ### 渐进增强约定 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | Outer hook | data-component="collapsibles" | 脚本会定位每个组件根节点。 | | Heading hook | data-heading="collapsibles" | 脚本会在每个标题中插入一个实际的按钮。 | | Collapsed state | aria-expanded=false; next sibling aria-hidden=true | 高级 CSS 需要 html.js 标记才能隐藏正文。 | | data-anchor="no" | Suppress automatic heading anchors for this subtree | 避免在可折叠标题中再注入一个链接。 | | No JavaScript | All content remains visible | 不要将隐藏内容作为未增强时的初始标记交付。 | ## W3C 设计系统 完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## W3C 设计系统 渐进增强 ### 内容先于控件 > W3C 将核心样式与高级组件分开。可折叠内容最初以普通标题及其后续内容呈现。没有脚本时，所有会话大纲都清晰可读。main.js 发现文档规定的 data attributes 后，会插入按钮并更改状态。这与直接交付已隐藏的手风琴组件是不同的实现方式；后者的控件可能始终无法初始化。 预览使用官方 CDN 的 core.css、advanced.css 和 main.js，并将其保存为带日期的本地快照。html.js 标记会启用高级选择器。省略该标记会导致 ARIA 属性发生变化，但内容主体仍在视觉上保持展开；预览会明确测试实际可见性和 aria-expanded。 阅读配套规范 ## W3C 设计系统 流式字体大小与字体加载 ### 适度的阅读字号阶梯 正文大小从视口下限处的 15px 增长至 1120px 视口宽度时的 16px。九个具名自定义属性构成字号阶梯。H1 使用 --w3c-text-5，而非最大的 --w3c-text-7；若不加区分地将 36px 的展示标题复制到每个文档中，就会偏离标准的标题层级。 预期使用的网页字体是 Noto Sans。字体加载路径为根元素添加 fonts-loaded 之前，原生回退字体栈会使用 Trebuchet MS 和 Geneva。这个独立示例保留回退字体，并标明了这一选择。流式字号和行高仍采用原生设置；预览并未声称字形度量与 Noto Sans 完全一致。 阅读配套规范 ## W3C 设计系统 阅读宽度与间距 ### 组合布局原语 l-center 原语提供 70rem 的最大内联尺寸和 5vw 的侧边内边距。预览额外设置了应用专用的 55rem 上限，让三个简短的学习大纲保持紧凑。这个上限并非新的 W3C 令牌。在每个可折叠内容主体中，原生的 41.25rem 文本行宽限制了长行的长度。 文档所述的 Stack 混入会创建纵向布局，并为第一个直接子元素之后的同级元素应用 margin-top。默认值为 1em，调用方也可以传入其他单位。应将其视为区块之间的关系，而不是另行创建全局编号间距阶梯。可折叠组件另有经过验证的 25px 内边距、16px 间距和 6px 圆角。 阅读配套规范 ## W3C 设计系统 语义化颜色角色 ### 让链接历史状态和焦点清晰可见 系统区分默认的蓝色链接、深蓝色悬停状态和紫色已访问状态。对于需要返回长文档并在参考资料之间导航的网站，这些角色至关重要。将链接别名用于无关装饰，会导致未来的主题更改影响不相关的界面表面。 焦点使用黄色，并带有清晰可见的边界。设置页面区分普通边框和颜色更深的输入框边框角色。页面还为信息、成功、警告和错误颜色分别定义了不同含义。应保留各自的角色，并根据实际背景验证颜色搭配；仅有色板并不能证明组件状态具有足够的对比度。 阅读配套规范 ## W3C 设计系统 可折叠组件的标记与脚本 ### 标题、按钮与相邻内容主体 每个直接子元素都包含一个标题，后面紧接其内容主体。脚本使用 nextElementSibling 查找该主体，因此在两者之间插入无关元数据会破坏这种关联。应像文档中的分组列表模式那样，将类别标签放在标题的 span 中。脚本会将标题内容包裹在按钮中。 原生代码会切换该按钮的 aria-expanded 和内容主体的 aria-hidden。高级样式表会隐藏处于折叠状态的内容主体。data-anchor="no" 可防止单独的标题锚点功能在此组件中添加多余链接。main.js 只需初始化一次；重复增强会在标题中嵌套额外按钮。 ```

Inclusive forms Practical workshop

Connect each field to its label, hint and recovery message.

  • Preserve entered values
  • Test keyboard recovery
``` 代码参考 阅读配套规范 ## W3C 设计系统 批量控件与键盘操作 ### 通过现有按钮实现扩展 “全部展开”和“全部折叠”是本示例新增的控件。它们会检查每个原生按钮，并且只在状态需要更改时才触发点击。这样可以让原生状态切换与视觉规则保持一致。它们不会只直接修改一个 ARIA 属性、却让另一个属性过时。 原生按钮支持使用 Enter 和空格键触发操作。预览会通过键盘测试单独操作一个按钮、全部展开、全部折叠，以及再次打开其中一个部分。礼貌级状态消息会说明批量操作的结果。源组件允许同时展开多个大纲；它不是一次只能展开一项的互斥式手风琴组件。 1. 展开“Inclusive forms”，查看其中的实用列表。 2. 全部展开，对比三场课程的介绍。 3. 全部折叠，然后在某个标题上按 Enter，仅重新展开该部分。 阅读配套规范 ## W3C 设计系统 资源与集成 ### 不臆造软件包安装方式 官方入门页面提供稳定的 CDN 入口，可用于加载 core、advanced 和 print 样式表，以及 main.js 和可选功能脚本。配置代码块使用的正是这些实际路径。此 HTML 实现无需 React 服务提供商或 npm 软件包。本地演示将下载的文件纳入项目，从而无需依赖实时网络连接。 在支持相同旧版浏览器范围的生产集成中，若要使用高级样式，应保留文档说明的 CSS 功能门槛。精简配置会直接为现代浏览器加载高级样式。在完整文档网站中加入打印样式表；独立预览则专注于交互式屏幕示例。 - core.css：基础排版、布局和未增强组件。 - advanced.css：JavaScript 增强状态的规则。 - main.js：查找数据钩子，并仅对受支持的组件增强一次。 阅读配套规范 ## W3C 设计系统 范围与验证 ### 设计系统，不是符合性认证 采用 W3C 风格的页面并不自动符合 WCAG。请测试实际内容、焦点顺序、缩放行为和恢复状态。此示例检查三种视口宽度及无脚本基线；它不声称获得认证，也不代表完成了全面的辅助技术审查。 学习小组的名称和描述均为原创虚构内容，不代表官方工作组、日程安排或报名机会。此示例有意不使用 W3C 标志，也不声称具有会员身份。重复使用公开的样式资源时，仍须避免暗示获得机构背书。 阅读配套规范 ## W3C 设计系统组件示例 ### 渐进增强的课程提纲 标题及其相邻正文是必需结构；main.js 会添加切换功能。 ```

Inclusive forms Practical workshop

Connect each field to its label, hint and recovery message.

  • Preserve entered values
  • Test keyboard recovery
``` 代码参考 ### 完整的原生学习列表 包含根级增强标记、官方资源、原生折叠面板和批量控制。 ``` Web learning circles

INDEPENDENT LEARNING PROGRAMME

Web learning circles

Explore three small-group sessions for people building a more usable web.

Choose a session to read its outline.

Inclusive forms Practical workshop

Trace a form from its label to its hint, error message and recovery action. Compare the experience with a keyboard and with enlarged text.

  • Associate labels and help text
  • Keep entered values after an error
  • Move focus only when it helps recovery

Resilient reading Discussion circle

Examine document structure before adding interaction. The content in this example remains visible when JavaScript is unavailable.

Bring a short article and identify its heading hierarchy, reading measure and meaningful links.

International text Peer review

Review language declarations, long translated labels and mixed-direction text. A font choice alone cannot guarantee a usable multilingual interface.

All sessions are fictional examples, with no membership or registration service.

``` 代码参考 ## W3C 设计系统 AI Agent 配置 ### 实现起点 使用实际的官方 CDN 路径。本地预览中已随附这些资源，并保留原生系统字体回退。Sources 中的完整示例 ZIP 还提供了预览所需的准确依赖项和完整文档。解压后，在该目录中运行 python3 -m http.server 8080，然后打开 http://localhost:8080/w3c.html。请勿通过 file:// 打开基于模块的示例。 ``` ``` ### 适用于你项目的提示词 ``` 将 W3C 核心样式和高级样式与 main.js 及 html.js 增强标记配合使用。使用实际数据钩子，通过语义化标题及其相邻的可折叠内容构建页面。保留无 JavaScript 时仍可阅读的基线、原生流式字号以及语义化的链接和焦点颜色。不要重复初始化，也不要仅凭样式推断符合 WCAG。 ``` ## W3C 设计系统 来源与范围 使用官方公开资源制作的独立 OpenDesign 示例。不代表与 W3C 存在关联，也不代表获得无障碍认证。 - 入门指南 官方 CDN 资源与加载说明。 - 可折叠容器 原生结构、钩子与渐进式行为。 - 排版 Noto Sans 与流式字号比例。 - 设置 颜色角色与字体加载行为。 - 垂直间距 Stack mixin 与明确的尺寸。 - 下载完整可运行示例 包含完整 HTML、本地 CSS/JavaScript 依赖、随附许可证以及确切启动说明的 ZIP 包。无需构建步骤。 ## W3C 设计系统 相关资源 ### Codex 运用 Codex 的真实 SearchInput 结构、操作层级和适于阅读的令牌。在本地文章索引中搜索、查看搜索结果，并返回原来的阅读位置。 ### Agriculture 设计系统 借助 AgDS 具体的间距、响应式属性与 TaskList 状态模型，构建更长的服务流程事务。试用一个准备流程：只有当所有前置条件都完成时，复核步骤才会解锁。 ### Alberta 设计系统 使用 Alberta 的原生 Web Components 与已发布的设计令牌，构建一份完整的准备清单，具备无障碍选项、派生进度和诚实的审核反馈。 - [实现参考](https://design-system.w3.org/components/collapsible-containers.html) - [来源](https://design-system.w3.org/styles/typography.html) - [来源](https://design-system.w3.org/settings/) - [来源](https://www.w3.org/assets/website-2021/styles/core.css) - [来源](https://design-system.w3.org/components/collapsible-containers.html) - [阅读配套规范](https://design-system.w3.org/) - [阅读配套规范](https://design-system.w3.org/styles/typography.html) - [阅读配套规范](https://design-system.w3.org/styles/vertical-spacing.html) - [阅读配套规范](https://design-system.w3.org/settings/) - [代码参考](https://design-system.w3.org/components/collapsible-containers.html) - [阅读配套规范](https://design-system.w3.org/components/collapsible-containers.html) - [阅读配套规范](https://design-system.w3.org/getting-started.html) - [入门指南 官方 CDN 资源与加载说明。](https://design-system.w3.org/getting-started.html) - [可折叠容器 原生结构、钩子与渐进式行为。](https://design-system.w3.org/components/collapsible-containers.html) - [排版 Noto Sans 与流式字号比例。](https://design-system.w3.org/styles/typography.html) - [设置 颜色角色与字体加载行为。](https://design-system.w3.org/settings/) - [垂直间距 Stack mixin 与明确的尺寸。](https://design-system.w3.org/styles/vertical-spacing.html)