运用流式字体、语义化颜色角色和原生折叠内容，打造适应力强的阅读界面，即使没有 JavaScript，内容依然清晰易读。
可单独或同时展开各个会话；即使禁用 JavaScript，内容仍清晰可读。
已下载 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 将核心样式与高级组件分开。可折叠内容最初以普通标题及其后续内容呈现。没有脚本时，所有会话大纲都清晰可读。main.js 发现文档规定的 data attributes 后，会插入按钮并更改状态。这与直接交付已隐藏的手风琴组件是不同的实现方式；后者的控件可能始终无法初始化。
预览使用官方 CDN 的 core.css、advanced.css 和 main.js，并将其保存为带日期的本地快照。html.js 标记会启用高级选择器。省略该标记会导致 ARIA 属性发生变化，但内容主体仍在视觉上保持展开；预览会明确测试实际可见性和 aria-expanded。
正文大小从视口下限处的 15px 增长至 1120px 视口宽度时的 16px。九个具名自定义属性构成字号阶梯。H1 使用 --w3c-text-5，而非最大的 --w3c-text-7；若不加区分地将 36px 的展示标题复制到每个文档中，就会偏离标准的标题层级。
预期使用的网页字体是 Noto Sans。字体加载路径为根元素添加 fonts-loaded 之前，原生回退字体栈会使用 Trebuchet MS 和 Geneva。这个独立示例保留回退字体，并标明了这一选择。流式字号和行高仍采用原生设置；预览并未声称字形度量与 Noto Sans 完全一致。
l-center 原语提供 70rem 的最大内联尺寸和 5vw 的侧边内边距。预览额外设置了应用专用的 55rem 上限，让三个简短的学习大纲保持紧凑。这个上限并非新的 W3C 令牌。在每个可折叠内容主体中，原生的 41.25rem 文本行宽限制了长行的长度。
文档所述的 Stack 混入会创建纵向布局，并为第一个直接子元素之后的同级元素应用 margin-top。默认值为 1em，调用方也可以传入其他单位。应将其视为区块之间的关系，而不是另行创建全局编号间距阶梯。可折叠组件另有经过验证的 25px 内边距、16px 间距和 6px 圆角。
系统区分默认的蓝色链接、深蓝色悬停状态和紫色已访问状态。对于需要返回长文档并在参考资料之间导航的网站，这些角色至关重要。将链接别名用于无关装饰，会导致未来的主题更改影响不相关的界面表面。
焦点使用黄色，并带有清晰可见的边界。设置页面区分普通边框和颜色更深的输入框边框角色。页面还为信息、成功、警告和错误颜色分别定义了不同含义。应保留各自的角色，并根据实际背景验证颜色搭配；仅有色板并不能证明组件状态具有足够的对比度。
每个直接子元素都包含一个标题，后面紧接其内容主体。脚本使用 nextElementSibling 查找该主体，因此在两者之间插入无关元数据会破坏这种关联。应像文档中的分组列表模式那样，将类别标签放在标题的 span 中。脚本会将标题内容包裹在按钮中。
原生代码会切换该按钮的 aria-expanded 和内容主体的 aria-hidden。高级样式表会隐藏处于折叠状态的内容主体。data-anchor="no" 可防止单独的标题锚点功能在此组件中添加多余链接。main.js 只需初始化一次；重复增强会在标题中嵌套额外按钮。
<div class="component--collapsibles" data-component="collapsibles" data-anchor="no">
<div>
<h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3>
<div>
<p>Connect each field to its label, hint and recovery message.</p>
<ul><li>Preserve entered values</li><li>Test keyboard recovery</li></ul>
</div>
</div>
</div>“全部展开”和“全部折叠”是本示例新增的控件。它们会检查每个原生按钮，并且只在状态需要更改时才触发点击。这样可以让原生状态切换与视觉规则保持一致。它们不会只直接修改一个 ARIA 属性、却让另一个属性过时。
原生按钮支持使用 Enter 和空格键触发操作。预览会通过键盘测试单独操作一个按钮、全部展开、全部折叠，以及再次打开其中一个部分。礼貌级状态消息会说明批量操作的结果。源组件允许同时展开多个大纲；它不是一次只能展开一项的互斥式手风琴组件。
官方入门页面提供稳定的 CDN 入口，可用于加载 core、advanced 和 print 样式表，以及 main.js 和可选功能脚本。配置代码块使用的正是这些实际路径。此 HTML 实现无需 React 服务提供商或 npm 软件包。本地演示将下载的文件纳入项目，从而无需依赖实时网络连接。
在支持相同旧版浏览器范围的生产集成中，若要使用高级样式，应保留文档说明的 CSS 功能门槛。精简配置会直接为现代浏览器加载高级样式。在完整文档网站中加入打印样式表；独立预览则专注于交互式屏幕示例。
采用 W3C 风格的页面并不自动符合 WCAG。请测试实际内容、焦点顺序、缩放行为和恢复状态。此示例检查三种视口宽度及无脚本基线；它不声称获得认证，也不代表完成了全面的辅助技术审查。
学习小组的名称和描述均为原创虚构内容，不代表官方工作组、日程安排或报名机会。此示例有意不使用 W3C 标志，也不声称具有会员身份。重复使用公开的样式资源时，仍须避免暗示获得机构背书。
标题及其相邻正文是必需结构；main.js 会添加切换功能。
<div class="component--collapsibles" data-component="collapsibles" data-anchor="no">
<div>
<h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3>
<div>
<p>Connect each field to its label, hint and recovery message.</p>
<ul><li>Preserve entered values</li><li>Test keyboard recovery</li></ul>
</div>
</div>
</div>包含根级增强标记、官方资源、原生折叠面板和批量控制。
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><script>document.documentElement.classList.add("js")</script><title>Web learning circles</title><link rel="stylesheet" href="vendor/w3c-2026-10-03/core.css"><link rel="stylesheet" href="vendor/w3c-2026-10-03/advanced.css"><style>body{min-block-size:0;padding-block:2rem}.demo{max-inline-size:55rem}header{margin-bottom:2rem}.actions{display:flex;gap:1rem;flex-wrap:wrap;margin:1.5rem 0}.component--collapsibles{padding:1rem;background:#f8f8fb}footer{margin-top:2rem;border-top:1px solid #bdbdbd;padding-top:1rem;font-size:.875rem}#notice{min-height:1.5em}button{max-width:100%}</style><main class="l-center demo" data-anchor="no"><header><p>INDEPENDENT LEARNING PROGRAMME</p><h1>Web learning circles</h1><p class="lead">Explore three small-group sessions for people building a more usable web.</p></header><div class="actions"><button class="button button--ghost" id="expand">Expand all sessions</button><button class="button button--ghost" id="collapse">Collapse all sessions</button></div><p id="notice" role="status">Choose a session to read its outline.</p><div class="component--collapsibles" data-component="collapsibles" data-anchor="no"><div><h3 data-heading="collapsibles">Inclusive forms <span>Practical workshop</span></h3><div><p>Trace a form from its label to its hint, error message and recovery action. Compare the experience with a keyboard and with enlarged text.</p><ul><li>Associate labels and help text</li><li>Keep entered values after an error</li><li>Move focus only when it helps recovery</li></ul></div></div><div><h3 data-heading="collapsibles">Resilient reading <span>Discussion circle</span></h3><div><p>Examine document structure before adding interaction. The content in this example remains visible when JavaScript is unavailable.</p><p>Bring a short article and identify its heading hierarchy, reading measure and meaningful links.</p></div></div><div><h3 data-heading="collapsibles">International text <span>Peer review</span></h3><div><p>Review language declarations, long translated labels and mixed-direction text. A font choice alone cannot guarantee a usable multilingual interface.</p><p>All sessions are fictional examples, with no membership or registration service.</p></div></div></div><footer>Native W3C CDN styles and collapsible script, snapshot 3 October 2026. System font fallback; original learning content, no W3C affiliation.</footer></main><script src="vendor/w3c-2026-10-03/main.js"></script><script>document.querySelector('.component--collapsibles').addEventListener('click',()=>{const n=document.querySelectorAll('[data-heading] button[aria-expanded=true]').length;document.querySelector('#notice').textContent=n+' session outline'+(n===1?' is':'s are')+' expanded.'});function all(open){document.querySelectorAll('[data-heading="collapsibles"] button').forEach(b=>{if((b.getAttribute('aria-expanded')==='true')!==open)b.click()});document.querySelector('#notice').textContent=open?'All three session outlines are expanded.':'All session outlines are collapsed.'}document.querySelector('#expand').onclick=()=>all(true);document.querySelector('#collapse').onclick=()=>all(false);</script></html>使用实际的官方 CDN 路径。本地预览中已随附这些资源，并保留原生系统字体回退。Sources 中的完整示例 ZIP 还提供了预览所需的准确依赖项和完整文档。解压后，在该目录中运行 python3 -m http.server 8080，然后打开 http://localhost:8080/w3c.html。请勿通过 file:// 打开基于模块的示例。
<!-- Core is useful without JavaScript. -->
<link rel="stylesheet" href="https://www.w3.org/assets/website-2021/styles/core.css">
<link rel="stylesheet" href="https://www.w3.org/assets/website-2021/styles/advanced.css">
<link rel="stylesheet" href="https://www.w3.org/assets/website-2021/styles/print.css" media="print">
<script>document.documentElement.classList.add('js');</script>
<!-- Put component markup in the document, then load the script once. -->
<script defer src="https://www.w3.org/assets/website-2021/js/main.js"></script>将 W3C 核心样式和高级样式与 main.js 及 html.js 增强标记配合使用。使用实际数据钩子，通过语义化标题及其相邻的可折叠内容构建页面。保留无 JavaScript 时仍可阅读的基线、原生流式字号以及语义化的链接和焦点颜色。不要重复初始化，也不要仅凭样式推断符合 WCAG。
使用官方公开资源制作的独立 OpenDesign 示例。不代表与 W3C 存在关联，也不代表获得无障碍认证。
