Дизайн-система DSFR.

Институциональная область применения дизайн-системы DSFR

Система визуальной идентичности государства

DSFR — дизайн-система французского государства. Согласно действующим официальным условиям, она предназначена для сервисов .gouv.fr и государственных мобильных приложений; в них также проводится различие между государственными пользователями и операторами и внешними организациями. Это существенное ограничение на внедрение, а не сноска, которую можно убрать, скрыв логотип.

Команде, которой подходит эта система, следует пройти официальный процесс согласования и внедрения проекта. Другой продукт может изучить документированные принципы информационной архитектуры и доступности, но не должен представлять себя от имени французского государства. Предварительный просмотр на этой странице — оригинальный нейтральный пример аккордеона: в нём не загружаются стили, шрифты или скрипты DSFR.

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

Официальные рекомендации по типографике дизайн-системы DSFR

Начертания Marianne и резервные шрифты

В документации по типографике указаны шрифты Marianne и Spectral, для которых предусмотрены резервные шрифты Arial и Georgia соответственно. Стандартный основной текст — 16px/24px, текст статей — 18px/28px. Размер H1 меняется с 32px/40px на мобильных устройствах до 40px/48px на настольных. Эти значения описывают официальную систему, а в демонстрации используется собственное нейтральное оформление текста.

Классы размера текста не заменяют семантическую иерархию заголовков. Оставьте заголовок страницы элементом h1, а для каждого заголовка аккордеона выберите подходящий уровень. Не используйте более крупный визуальный стиль, чтобы пропускать уровни в структуре документа.

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

Сетка и интервалы дизайн-системы DSFR

Чётко заданные адаптивные пороговые значения

В спецификации сетки указаны SM 576px, MD 768px, LG 992px и XL 1248px. Максимальная ширина области содержимого — 1200px. Необязательные внутренние отступы составляют 16px при меньших размерах и 24px начиная с LG. По умолчанию в кодовой сетке внутренних отступов нет; это важно учитывать при переносе сетки из Figma в разметку.

Шкала интервалов основана на кратных 4px и включает документированные исключения: −6px, −2px, 2px и 6px. Класс интервала обозначает контролируемую систему, а не разрешение задавать произвольные смещения. В нейтральном предварительном просмотре используется отдельная колонка для чтения; она не претендует на воспроизведение официальной сетки.

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

Структура аккордеона в дизайн-системе DSFR

Заголовок, элемент управления и связанная панель

Документированный компонент состоит из section.fr-accordion, заголовка.fr-accordion__title, кнопки.fr-accordion__btn и следующего за ней div.fr-collapse. Значение aria-controls у кнопки должно совпадать с id панели; атрибут aria-expanded описывает её состояние. Уровень заголовка определяется структурой окружающей страницы.

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

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

Связанные или независимые элементы в дизайн-системе DSFR

Настройка группы меняет поведение

По умолчанию элементы fr-accordions-group связаны: при открытии одного элемента другой открытый элемент закрывается. Атрибут data-fr-group="false" позволяет оставлять открытыми несколько панелей. В примере доступны оба режима, чтобы читатель мог сравнить, как они влияют на сопоставление информации.

Это различие важно для инструкций по подготовке. Например, проверяющему список документов может понадобиться одновременно открыть раздел с адресом. Режим, в котором открыта только одна секция, экономит место, но снова и снова скрывает контекст. Выбирайте режим с учётом задачи, а не воспринимайте настройку по умолчанию как редакционное правило.

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

• Независимый режим позволяет одновременно сравнивать два раздела.
• Связанный режим оставляет раскрытым только один раздел.
• При смене режима значения aria-expanded должны оставаться согласованными.

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

Что следует оставить видимым в дизайн-системе DSFR

Не скрывайте важный шаг

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

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

1. Оставьте основную инструкцию за пределами аккордеона.
2. Разделяйте дополнительные материалы по вопросам читателя, а не по произвольной длине.
3. Если раздел содержит только короткий ответ, используйте обычный абзац.

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

Проверка клавиатурного управления и состояний в дизайн-системе DSFR

Сначала проверьте структуру, а затем оформление

Каждый элемент управления в нейтральном предварительном просмотре — настоящая кнопка, поэтому для её активации браузером можно использовать клавиши Enter и Space. Скрипт меняет и aria-expanded, и состояние hidden у связанной панели. При закрытии панели элемент управления не удаляется, а фокус остаётся на активированной кнопке.

Переключатель режима позволяет сразу сравнить независимое и связанное поведение. Небольшой видимый индикатор перечисляет открытые панели: это учебная функция примера, а не официальный компонент DSFR. На узких экранах заголовки переносятся, а область кнопки сохраняет полную ширину.

На официальной странице о доступности также описаны недостаточный контраст при наведении в тёмной теме и определённые ограничения объявлений для программ чтения с экрана и браузеров. Не считайте компонент полностью доступным только потому, что используете его без изменений; ознакомьтесь с известными ограничениями для используемой версии и среды.

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

Интеграция в подходящие проекты: дизайн-система DSFR

Подключите зависимости ядра и компонента

На официальной странице с кодом перечислены зависимости CSS ядра и аккордеона, а также скрипты модулей ядра и аккордеона. После их загрузки среда выполнения автоматически дополняет документированную разметку необходимым поведением. С помощью публичного API можно раскрыть панель вызовом dsfr(element).collapse.disclose() после инициализации.

Предоставленная запись для установки предназначена для проекта учреждения, отвечающего требованиям. Источник проверен, но в нейтральном предварительном просмотре код не запускался: в нём намеренно нет зависимости от среды выполнения DSFR. При обновлении производственным командам следует сохранять вместе официальную структуру каталога ресурсов, разметку компонентов и актуальные условия использования.

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

Примеры компонентов дизайн-системы DSFR

<div class="fr-accordions-group" data-fr-group="false">
  <section class="fr-accordion">
    <h2 class="fr-accordion__title">
      <button type="button" class="fr-accordion__btn"
        aria-expanded="false" aria-controls="documents">
        Documents to prepare
      </button>
    </h2>
    <div id="documents" class="fr-collapse">
      <p>Put the actual supporting-document instructions here.</p>
    </div>
  </section>
</div>

const panel = document.getElementById('documents');
window.dsfr(panel).collapse.disclose();

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Accordion structure laboratory</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.6 Arial,sans-serif;color:#28251f;background:#faf9f6}main{max-width:54rem;margin:auto;padding:32px 24px}.notice{background:#eee9df;border-left:4px solid #6b573d;padding:16px}h1{font:700 32px/1.3 Georgia,serif;margin:24px 0}h2{font-size:18px;margin:0}.mode{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:24px 0}select{font:inherit;padding:10px;background:white;border:1px solid #777}section{border-bottom:1px solid #aaa18f}.trigger{font:700 18px/1.5 Arial,sans-serif;border:0;background:transparent;color:inherit;display:flex;justify-content:space-between;gap:16px;text-align:start;padding:20px 8px;width:100%;cursor:pointer}.trigger::after{content:'+'}.trigger[aria-expanded=true]::after{content:'−'}.panel{padding:0 24px 24px}.panel p{margin-top:0}:focus-visible{outline:3px solid #6b573d;outline-offset:3px}#state{font-size:14px;background:#eee9df;padding:12px;margin-top:24px}small{display:block;margin-top:24px;color:#625a4e;font-size:14px}[hidden]{display:none!important}@media(max-width:600px){main{padding:24px 16px}h1{font-size:28px}.panel{padding-inline:8px}}</style><main><div class="notice">Neutral interaction study · No DSFR visual identity or assets</div><h1>Prepare for a community workshop</h1><p>The purpose and main instruction stay visible: arrive with your booking note. Optional supporting details can be opened below.</p><div class="mode"><label for="mode">Panel behaviour</label><select id="mode"><option value="independent">Independent: compare sections</option><option value="linked">Linked: one section at a time</option></select></div><div id="group"><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="access">Room access</button></h2><div class="panel" id="access" hidden><p>The fictional workshop room is reached from the courtyard. The step-free entrance is on the same level as the activity room.</p><p>Ask the example welcome desk for assistance if the courtyard route is unavailable. These are demonstration instructions, not a real venue guide.</p></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="equipment">Equipment to bring</button></h2><div class="panel" id="equipment" hidden><p>The example workshop uses simple paper materials. Bring the following if convenient:</p><ul><li>A notebook for your own observations.</li><li>A pencil or pen you can use comfortably.</li><li>Your fictional booking reference.</li></ul></div></section><section><h2><button type="button" class="trigger" aria-expanded="false" aria-controls="arrival">What happens on arrival</button></h2><div class="panel" id="arrival" hidden><p>The example facilitator explains the activity before participants choose a seat. No personal information is collected by this demonstration.</p><p>Keep this panel open with the equipment list to compare the two instructions in independent mode.</p></div></section></div><p id="state" role="status">Open sections: none</p><small>Original OpenDesign educational specimen. DSFR documentation informs the structural comparison; this is not a government service or native DSFR rendering.</small></main><script>const buttons=[...document.querySelectorAll('.trigger')],mode=document.querySelector('#mode');function set(b,open){b.setAttribute('aria-expanded',String(open));document.getElementById(b.getAttribute('aria-controls')).hidden=!open}function announce(){const names=buttons.filter(b=>b.getAttribute('aria-expanded')==='true').map(b=>b.textContent);document.querySelector('#state').textContent='Open sections: '+(names.join(', ')||'none')}buttons.forEach(b=>b.onclick=()=>{const open=b.getAttribute('aria-expanded')!=='true';if(open&&mode.value==='linked')buttons.forEach(x=>set(x,false));set(b,open);announce()});mode.onchange=()=>{if(mode.value==='linked'){let retained=false;buttons.forEach(b=>{if(b.getAttribute('aria-expanded')==='true'){if(retained)set(b,false);retained=true}})}announce()};</script></html>