Дизайн-система 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 Примеры компонентов дизайн-системы

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