DSFR Tasarım Sistemi.

DSFR Tasarım Sistemi Kurumsal kapsam

Bir devlet kimliği sistemi

DSFR, Fransız Devleti'nin tasarım sistemidir. Güncel resmî koşullar, .gouv.fr hizmetlerini ve devletin mobil uygulamalarını sistemin amaçlanan kullanım alanı olarak tanımlar; devlet kullanıcıları ve işletmecileriyle dış kuruluşları birbirinden ayırır. Bu, logoyu gizleyerek göz ardı edilebilecek bir dipnot değil, benimsemenin esaslı bir sınırıdır.

Uygun bir ekip, resmî proje onay ve uygulama sürecini izlemelidir. İlgisiz bir ürün, Fransız Devleti kimliğini kullanıyormuş izlenimi vermeden belgelenmiş bilgi mimarisini ve erişilebilirlik yaklaşımını inceleyebilir. Bu sayfadaki önizleme, özgün ve nötr bir akordeon örneğidir: DSFR stillerini, yazı tiplerini veya komut dosyalarını yüklemez.

Destekleyici belirtimi okuyun

DSFR Tasarım Sistemi Resmî tipografi referansı

Marianne rolleri ve yedek yazı tipleri

Tipografi belgelerinde sırasıyla Arial ve Georgia yedek yazı tipleriyle birlikte Marianne ve Spectral belirtilir. Standart gövde metni 16px/24px; makale metni 18px/28px boyutundadır. H1 boyutu mobilde 32px/40px, masaüstünde 40px/48px olarak değişir. Bu değerler resmî sistemi tanımlar; örnek ise kendine ait nötr bir tipografi kullanır.

Metin boyutu sınıfları anlamsal başlık düzeylerinin yerini almaz. Sayfa başlığını h1, her akordeon başlığını ise sayfanın yapısına uygun başlık düzeyinde tutun. Belge yapısındaki başlık sırasını atlamak için daha büyük bir görsel stil kullanmayın.

Destekleyici belirtimi okuyun

DSFR Tasarım Sistemi Izgara ve boşluklandırma

Duyarlı tasarım eşikleri açıkça tanımlanmıştır

Izgara referansında SM 576px, MD 768px, LG 992px ve XL 1248px olarak tanımlanır. En büyük içerik genişliği 1200px'tir. İsteğe bağlı oluklar küçük boyutlarda 16px, LG boyutundan itibaren 24px'tir. Kod ızgarasında varsayılan olarak oluk bulunmaz; Figma ızgarasını işaretlemeye dönüştürürken bu önemlidir.

Boşluklandırma, belgelenmiş −6px, −2px, 2px ve 6px istisnalarıyla 4px'in katlarına dayanır. Dolayısıyla bir boşluk sınıfı, keyfî ofsetler uydurma izni değil, kontrollü bir sistemi ifade eder. Nötr önizleme, bağımsız tek bir okuma sütunu kullanır ve resmî ızgarayı yeniden oluşturduğunu iddia etmez.

Destekleyici belirtimi okuyun

DSFR Tasarım Sistemi Akordeon anatomisi

Başlık, tetikleyici ve kontrol edilen panel

Belgelenen bileşen; section.fr-accordion, heading.fr-accordion__title, button.fr-accordion__btn ve bunu izleyen div.fr-collapse öğelerinden oluşur. Düğmenin aria-controls değeri panelin id değeriyle eşleşmelidir; aria-expanded ise açık olma durumunu belirtir. Başlık düzeyi, sayfanın çevresindeki yapıya göre belirlenir.

Panel, paragraf ve listeler gibi uygun metin öğeleri içerir. Yerel DSFR JavaScript, genişletilmiş sınıfı yönetir; uygun bir uygulama, bileşenle çakışan ikinci ve bağımsız bir tıklama işleyicisi eklememelidir. Nötr önizleme, eğitim amaçlı karşılaştırma için benzer şekilde açıkça tanımlanmış kendi açık/kapalı durumunu uygular.

Destekleyici belirtimi okuyun

DSFR Tasarım Sistemi Gruplu veya bağımsız

Grup ayarı davranışı değiştirir

fr-accordions-group varsayılan olarak bağlantılıdır: bir öğeyi açmak, açık olan diğer öğeyi kapatır. data-fr-group="false" ayarı birden fazla panelin açık kalmasına izin verir. Örnek, okuyucunun bu iki modun çapraz başvurulu bilgiler üzerindeki etkisini karşılaştırabilmesi için ikisini de sunar.

Bu ayrım, hazırlık talimatlarında önem taşır. Bir belge listesini kontrol eden kişinin, aynı anda adres panelini de açık tutması gerekebilir. Tek seferde yalnızca bir öğeyi açık bırakan grup yer kazandırır, ancak bağlamı tekrar tekrar gizler. Varsayılanı editoryal bir kural gibi görmek yerine, göreve uygun modu seçin.

Erişilebilirlik sayfası, çalışma zamanı varsayılanından daha ileri gider: bağlantılı gruplar kullanılabilirlik sorunlarına yol açabileceğinden, varsayılan olarak bağımsız gruplar önerir. Bu nedenle örnek, bağımsız modda açılır.

• Bağımsız mod, iki bölümü aynı anda karşılaştırmayı sağlar.
• Bağlantılı mod, ekranda aynı anda yalnızca bir bölümün genişletilmesine izin verir.
• Modlar değiştirilirken aria-expanded durumunun kendi içinde tutarlı kalması gerekir.

Destekleyici belirtimi okuyun

DSFR Tasarım Sistemi Neler görünür kalmalı?

Temel adımı gizlemeyin

Bileşen yönergeleri, akordeonların uzun, isteğe bağlı veya yalnızca belirli kişiler için önemli olan içeriklerde kullanılmasını önerir. Her kullanıcının mutlaka okuması gereken bilgileri gizlemek, çok kısa içerikleri akordeon içine koymak, karmaşık kontrolleri iç içe yerleştirmek veya akordeonları modal içine koymak önerilmez.

Bu nedenle örnek, amacını ve kontrollerini görünür tutar. Yalnızca isteğe bağlı oda erişimi notları, ekipman listesi ve varış açıklaması daraltılır. Her başlık farklı bir soruyu ifade eder; açılan içerik ise ikinci bir etkileşimli iş akışı yerine kısa paragraflar ve listelerden oluşur.

1. Temel talimatı akordeonun dışında tutun.
2. Destekleyici materyali keyfî uzunluklara göre değil, okuyucunun sorularına göre bölün.
3. Bir bölümde yalnızca kısa bir yanıt varsa sıradan bir paragraf kullanın.

Destekleyici belirtimi okuyun

DSFR Tasarım Sistemi Klavye ve durum incelemesi

Görsel süslemelerden önce yapıyı doğrulayın

Nötr önizlemedeki her tetikleyici gerçek bir düğmedir; bu nedenle Enter ve Boşluk tuşları tarayıcının düğme etkinleştirme davranışını kullanır. Komut dosyası hem aria-expanded değerini hem de kontrol edilen panelin gizli durumunu değiştirir. Panel kapandığında tetikleyiciyi kaldırmaz ve odak etkinleştirilen düğmede kalır.

Mod seçici, bağımsız ve bağlantılı davranışları anında karşılaştırmaya olanak tanır. Küçük ve görünür bir durum göstergesi, açık panelleri listeler; bu, örnekteki bir öğrenme aracıdır, resmî bir DSFR bileşeni değildir. Dar ekranlarda başlıklar satırlara bölünür ve düğmenin tıklama alanı genişliğinin tamamını korur.

Resmî erişilebilirlik sayfasında, koyu temadaki yetersiz hover kontrastları ve ekran okuyucu/tarayıcı duyurularına ilişkin belirli sınırlamalar da belgelenmiştir. Bileşeni değişiklik yapmadan kullanmak erişilebilirliğin eksiksiz olduğu anlamına gelmez; dağıtım yapacağınız sürüm ve ortam için bilinen bu sınırlamaları gözden geçirin.

Destekleyici belirtimi okuyun

DSFR Tasarım Sistemi Uygun projelerde entegrasyon

Çekirdek ve bileşen bağımlılıklarını birlikte yükleyin

Resmî kod sayfasında çekirdek ve akordeon CSS bağımlılıklarının yanı sıra çekirdek ve akordeon modül komut dosyaları listelenir. Yüklendikten sonra çalışma zamanı, belgelenmiş işaretlemeyi otomatik olarak geliştirir. Herkese açık API arayüzü, başlangıç tamamlandıktan sonra dsfr(element).collapse.disclose() aracılığıyla bir paneli açabilir.

Sağlanan kurulum girişi, uygun bir kurumsal proje içindir. Kaynak doğrulaması yapılmıştır ancak DSFR çalışma zamanı bağımlılığı bulunmayan bu tarafsız önizlemede çalıştırılmamıştır. Üretim ekipleri, yükseltme yaparken resmî varlık dizini yapısını, bileşen işaretlemesini ve güncel kullanım koşullarını birlikte korumalıdır.

Destekleyici belirtimi okuyun

DSFR Tasarım Sistemi Bileşen Örnekleri

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