# Дизайн-система W3C

## Предпросмотр интерфейса дизайн-система W3C

Открывайте учебные планы по отдельности или все сразу; содержимое остаётся читаемым, даже если JavaScript отключён.

## Справочник по дизайну дизайн-система W3C

Официальная документация W3C и общедоступный снимок CDN, загруженный 3 октября 2026 года; изучены фактический 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 принимает явно заданную меру; это не фиксированная шкала с шагом 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 добавляет кнопки и меняет состояние только после обнаружения документированных атрибутов данных. Это отличается от подхода, при котором сразу поставляется уже скрытый аккордеон, а его элементы управления могут так и не инициализироваться.

В предпросмотре используются core.css, advanced.css и main.js из официального CDN, сохранённые в виде локального датированного снимка. Маркер html.js активирует расширенные селекторы. Если убрать этот маркер, атрибуты ARIA изменятся, но содержимое останется визуально открытым; предпросмотр специально проверяет фактическую видимость и значение aria-expanded.

Прочитать вспомогательную спецификацию

## Гибкая типографика и загрузка шрифтов дизайн-система W3C

### Умеренный размер текста для чтения

Размер основного текста увеличивается с 15px при нижней границе ширины окна до 16px при 1120px. Шкала основана на девяти именованных пользовательских свойствах. Для H1 используется --w3c-text-5, а не наибольший размер --w3c-text-7; если без разбора использовать заголовок с размером 36px для каждого документа, это не будет соответствовать стандартной иерархии заголовков.

Предусмотренный веб-шрифт — Noto Sans. В нативном резервном стеке используются Trebuchet MS и Geneva, пока путь загрузки шрифтов не добавит fonts-loaded в корневой элемент. В этом самостоятельном примере остаётся активным резервный шрифт, и этот выбор обозначен явно. Гибкий размер шрифта и высота строки соответствуют нативным настройкам; в предпросмотре не заявлено точное совпадение метрик символов 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 один раз: повторное улучшение приведёт к вложению дополнительных кнопок в заголовки.

```
<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>
```

Справочник по коду

Прочитать вспомогательную спецификацию

## Групповые элементы управления и работа с клавиатурой дизайн-система W3C

### Расширяйте функциональность с помощью существующих кнопок

Развернуть все и Свернуть все — это дополнительные элементы управления из примера. Они проверяют каждую нативную кнопку и нажимают её, только если нужно изменить её состояние. Так переключение нативного состояния и визуальное правило остаются согласованными. Эти элементы не меняют напрямую один атрибут ARIA, оставляя другой в устаревшем состоянии.

Нативные кнопки поддерживают активацию клавишами Enter и Space. В предпросмотре проверяется работа с отдельной кнопкой, командами «Развернуть все» и «Свернуть все», а также повторное открытие одного блока с клавиатуры. Вежливое статусное сообщение описывает групповое действие. Исходный компонент позволяет одновременно открывать несколько планов; это не аккордеон, в котором может быть открыт только один элемент.

1. Откройте раздел «Инклюзивные формы» и изучите практический список.

2. Разверните все разделы, чтобы сравнить описания трёх встреч.

3. Сверните все разделы, затем нажмите Enter на одном из заголовков, чтобы развернуть только этот раздел.

Прочитать вспомогательную спецификацию

## Дизайн-система W3C Ресурсы и интеграция

### Без выдуманных инструкций по установке пакетов

На официальной странице начала работы опубликованы стабильные точки входа CDN для основных, расширенных и печатных стилей, а также main.js и дополнительных скриптов функций. В блоке настройки используются именно эти пути. Для этой реализации не требуется провайдер React или npm-пакет HTML. В локальной демонстрации используются загруженные файлы, поэтому пример работает без активного подключения к сети.

В рабочей интеграции при поддержке тех же устаревших браузеров следует сохранить документированную проверку возможностей CSS для расширенных стилей. В упрощённом варианте настройки расширенные стили подключаются напрямую для современных браузеров. Для сайта с полным документом добавьте таблицу стилей для печати; отдельный предварительный просмотр предназначен для интерактивного экранного примера.

- core.css: базовая типографика, макеты и компоненты без расширений.

- advanced.css: правила для состояний, расширенных с помощью JavaScript.

- main.js: находит хуки data-атрибутов и один раз подключает расширения поддерживаемых компонентов.

Прочитать вспомогательную спецификацию

## Дизайн-система W3C Область действия и проверка

### Дизайн-система, а не сертификат соответствия

Страница в стиле W3C не становится соответствующей требованиям WCAG автоматически. Проверяйте её содержимое, порядок перехода фокуса, поведение при масштабировании и состояния восстановления. В этом примере проверены три ширины области просмотра и базовый вариант без скриптов; сертификация или исчерпывающий аудит с использованием вспомогательных технологий не заявляются.

Названия и описания учебных групп — оригинальный вымышленный материал. Это не официальные рабочие группы, расписание или возможность зарегистрироваться. В примере намеренно не используются логотипы W3C и заявления о членстве. Использование общедоступного ресурса стилей не должно создавать впечатление об одобрении со стороны организации.

Прочитать вспомогательную спецификацию

## Дизайн-система 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>
```

Справочник по коду

## Дизайн-система W3C Настройка агента

### Отправная точка для реализации

Фактические пути к официальным ресурсам CDN. В локальном предварительном просмотре используются копии этих ресурсов и сохраняется резервный системный шрифт. В 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. Создавайте семантические заголовки с расположенным рядом сворачиваемым содержимым, используя фактические хуки data-атрибутов. Сохраняйте читаемую версию без JavaScript, нативную адаптивную типографику и семантические цвета ссылок и фокуса. Не выполняйте инициализацию дважды и не делайте вывод о соответствии требованиям WCAG только на основании оформления.
```

## Дизайн-система W3C Источники и область действия

Независимый пример OpenDesign на основе официальных общедоступных ресурсов. Принадлежность к W3C и сертификация доступности не подразумеваются.

- Начало работы Официальные ресурсы CDN и инструкции по их подключению.

- Сворачиваемые контейнеры Нативная структура, хуки и постепенное расширение функциональности.

- Типографика Noto Sans и адаптивная шкала.

- Настройки Роли цветов и поведение при загрузке шрифта.

- Вертикальные отступы Миксин stack и заданные размеры.

- Скачать полный рабочий пример ZIP-архив с полным HTML, локальными зависимостями CSS/JavaScript, лицензиями и точными инструкциями по запуску. Сборка не требуется.

## Дизайн-система W3C Связанные ресурсы

### Codex

Используйте настоящую структуру SearchInput, иерархию действий и токены для чтения из Codex. Выполните поиск в локальном указателе статей, изучите результат и вернитесь к прежнему месту чтения.

### Agriculture дизайн-система

Создавайте многоэтапные сценарии обслуживания с помощью конкретных значений отступов AgDS, адаптивных свойств и модели статусов TaskList. Попробуйте подготовительный процесс, где этап проверки становится доступен только после выполнения предварительных условий.

### Alberta дизайн-система

Используйте встроенные веб-компоненты Alberta и опубликованные токены дизайна, чтобы создать полный контрольный список подготовки с доступными вариантами, вычисляемым прогрессом и понятными результатами проверки.


- [Справочник по реализации](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 и заданные размеры.](https://design-system.w3.org/styles/vertical-spacing.html)