可変フォント、セマンティックなカラーの役割、折りたたみ可能なネイティブコンテンツを活用して、JavaScriptがなくても読みやすさを保つ、堅牢な閲覧インターフェースを構築します。
セッションは個別でもまとめてでも開けます。JavaScriptを無効にしても、コンテンツは読みやすいままです。
2026年10月3日にダウンロードしたW3C公式ドキュメントと公開CDNスナップショット。実際のCSSとネイティブスクリプトを検証済み。
| 名前 / ルール | 値 / 設定 | 用途 |
|---|---|---|
Web font / fallback | Noto Sans / Trebuchet MS, Geneva, sans-serif | ネイティブのCSSはfonts-loadedの後に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は、ドキュメントに記載されたデータ属性を検出した後にのみボタンを挿入し、状態を変更します。コントロールが初期化されない可能性のある、最初から非表示のアコーディオンを配信する方式とは、実装モデルが異なります。
プレビューでは、公式CDNのcore.css、advanced.css、main.jsを使用し、日付入りのローカルスナップショットとして保存しています。html.jsマーカーによって高度なセレクターが有効になります。このマーカーを省略すると、本文は見た目上開いたままなのにARIA属性だけが変化します。プレビューでは、aria-expandedだけでなく、実際に表示されているかどうかも明示的にテストします。
本文サイズは、ビューポートの下限で15px、1120pxで16pxになるように拡大します。名前付きカスタムプロパティを9つ使ってスケールを定義しています。H1には最大サイズの--w3c-text-7ではなく、--w3c-text-5を使用します。36pxのディスプレイタイトルをすべてのドキュメントにそのまま適用しても、標準の見出し階層には合いません。
想定されているWebフォントはNoto Sansです。フォント読み込み処理によってルート要素にfonts-loadedが追加されるまでは、Trebuchet MSとGenevaを含むネイティブのフォールバックスタックが使われます。この独立した例ではフォールバックを有効にしたまま、その選択を明記しています。可変サイズと行の高さはネイティブのままであり、プレビューはNoto Sansの字形メトリクスを正確に再現するものではありません。
l-centerパターンでは、インライン方向の最大幅を70rem、左右のパディングを5vwに設定します。このプレビューでは、3つの短い学習概要をコンパクトに保つため、アプリケーション固有の上限として55remを追加しています。この上限はW3Cの新しいトークンではありません。各折りたたみ本文のテキスト幅は、ネイティブの41.25remによって長い行を抑えます。
ドキュメントに記載されたStack mixinは、縦方向に並べ、先頭以外の直接の兄弟要素にmargin-topを適用します。デフォルトの幅は1emで、呼び出し側から別の単位を指定できます。これをグローバルな番号付きスペーシングスケールに置き換えるのではなく、ブロック間の関係として扱いましょう。折りたたみ部分には別途、25pxの内側余白、16pxの間隔、6pxの角丸があることを確認しています。
このシステムでは、通常の青いリンク、濃い青のホバー状態、紫の訪問済み状態を区別しています。長いドキュメントに再訪したり、参考資料間を移動したりするサイトでは、これらの役割が重要です。リンク用のエイリアスを無関係な装飾に使い回すと、将来のテーマ変更が関係のない界面表面にも影響してしまいます。
フォーカスには、境界線で明確に示した黄色を使います。設定ページでは、通常の境界線と、より濃い入力欄用の境界線を分けています。また、情報、成功、警告、エラーの色もそれぞれ異なる意味で定義しています。役割を維持し、実際の背景との組み合わせを検証してください。色見本だけでは、コンポーネントの状態に十分なコントラストがあるとは確認できません。
各直接の子要素には、見出しと、それに続く本文が含まれます。スクリプトはnextElementSiblingを使って本文を特定するため、その間に無関係なメタデータを挿入すると関連付けが壊れます。カテゴリラベルは、ドキュメントに記載されたグループ一覧のパターンと同様に、見出し内のspanに配置してください。スクリプトは見出しの内容をボタンで囲みます。
標準のコードは、ボタンのaria-expandedと本文のaria-hiddenを切り替えます。高度なスタイルシートでは、折りたたまれた本文を非表示にします。data-anchor="no"を指定すると、別機能の見出しアンカーによってこのコンポーネントに不要なリンクが追加されるのを防げます。main.jsは1回だけ初期化してください。機能強化を繰り返すと、見出し内にボタンが重ねて追加されます。
<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キーとSpaceキーで操作できます。プレビューでは、ボタンを個別に操作し、すべて展開し、すべて折りたたんだ後、キーボードで再び1つを開く操作を確認します。一括操作の内容は、丁寧なステータスメッセージで伝えます。元のコンポーネントでは、複数の概要を同時に開いたままにできます。常に1つだけを開くアコーディオンではありません。
公式の導入ページでは、core、advanced、printの各スタイルに加え、main.jsと任意の機能スクリプトを安定したCDNエントリポイントとして公開しています。セットアップブロックでは、実際に提供されているパスを使用します。このHTML実装にReactプロバイダーやnpmパッケージは不要です。ローカルデモではダウンロードしたファイルを同梱しているため、外部接続がなくてもサンプルを利用できます。
本番環境で、同じ旧バージョンのブラウザー群にも対応する場合は、高度なスタイルに関するドキュメント記載のCSS機能判定を維持してください。簡潔なセットアップ例では、最新のブラウザー向けに高度なスタイルを直接読み込みます。サイト全体では印刷用スタイルシートも含めてください。単独のプレビューでは、画面上のインタラクティブなサンプルに重点を置いています。
W3Cのスタイルを取り入れたページが、自動的にWCAGに適合するわけではありません。実際のコンテンツ、フォーカス順序、ズーム時の動作、エラーからの回復状態をテストしてください。この例では、3種類のビューポート幅と、スクリプトを使わない場合の基本動作を確認しています。認証を受けたことや、支援技術を網羅的に監査したことを示すものではありません。
ラーニングサークルの名称と説明は、オリジナルの架空コンテンツです。公式のワーキンググループ、開催日程、登録機会を示すものではありません。この例では、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のcoreおよびadvancedスタイルを、main.jsとhtml.jsの機能強化マーカーとともに使用してください。実際のdataフックを使い、意味的に適切な見出しと、その直後に置く折りたたみ可能なコンテンツを構成してください。JavaScriptがなくても読みやすい基本状態、ネイティブの流動的な文字サイズ、意味に即したリンク色とフォーカス色を維持してください。初期化を二重に行わず、スタイルだけを根拠にWCAGへの適合を推測しないでください。
公式の公開アセットを使用した独立したOpenDesignのサンプルです。W3Cとの提携やアクセシビリティ認証を示唆するものではありません。
