# W3C tasarım sistemi

## W3C tasarım sistemi Arayüz Önizlemesi

Oturumları tek tek veya birlikte açın; JavaScript devre dışı olsa bile içerik okunabilir kalır.

## W3C tasarım sistemi Tasarım Referansı

Resmî W3C belgeleri ve 3 Ekim 2026'da indirilen herkese açık CDN anlık görüntüsü; gerçek CSS ve yerel betik incelendi.

### Akışkan tipografi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Web font / fallback | Noto Sans / Trebuchet MS, Geneva, sans-serif | Yerel CSS, yazı tipleri yüklendikten sonra Noto Sans'ı uygular; demoda sistem yazı tipi yedeği kullanılır. |
| Fluid range | 320–1120px viewport | Sıkıştırma değerleri bu aralığın dışında sabitlenir; ani tipografik geçiş olmaz. |
| --w3c-text-0 | clamp(.9375rem, .9125rem + .125vw, 1rem) | Gövde metni: normal kök boyutunda 15px ile 16px arası. |
| --w3c-text-5 | clamp(1.6894rem, 1.6444rem + .2253vw, 1.802rem) | H1 boyutu; yaklaşık 27–28.8px. |
| --w3c-text-7 | clamp(2.1382rem, 2.0811rem + .2851vw, 2.2807rem) | En büyük metin-xl boyutu; varsayılan H1 boyutu değildir. |
| Body line height | 1.5 | Akışkan yazı tipi boyutuna göredir. |
| Collapsible H3 | --w3c-text-1 / line-height 1.5 | Bileşen geçersiz kılması: yaklaşık 16.9–18px. |
### Anlamsal renkler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Text | #111111 | Siyaha yakın; standart okuma metni. |
| Link | #005a9c | W3C mavisi; üzerine gelme ve ziyaret edilmiş bağlantı renklerinden farklıdır. |
| Hover / visited | #002a56 / #75336c | Durumlar arasındaki farkı koruyun. |
| Focus | #f9dc4a | Görünür sınırla birlikte sarı odak stili. |
| Input border | #545454 | Dekoratif ayırıcılardan farklı bir kontrast rolü. |
| Success / error | #046704 / #a82615 | Rastgele vurgu değil, durum anlamı taşır. |
| Warning | #c28605 | Uyarı notları için kenarlık rolü. |
### Düzen ve aralıklar

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| l-center | max-inline-size:70rem; padding-inline:5vw | Yerel geniş kapsayıcı; önizlemede uygulamaya özgü daha dar, 55rem'lik bir üst sınır kullanılır. |
| Reading measure | 41.25rem | Daraltılabilir bölümlerin içindeki maksimum içerik genişliği. |
| Stack default | 1em between direct siblings | Resmî Sass mixin'i açıkça belirtilen bir ölçü kabul eder; sabit 8px ölçeği değildir. |
| Collapsible inset | 1.5625rem | Normal kök boyutunda 25px. |
| Collapsible separation / radius | 1rem / .375rem | 16px aralık ve 6px köşe yarıçapı. |
| Collapsible shadow | -.0625rem .0625rem .25rem rgba(55,70,95,.12) | İnce yüzey ayrımı; yerel CSS. |
### Aşamalı iyileştirme sözleşmesi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Outer hook | data-component="collapsibles" | Betik, her bileşenin kökünü bulur. |
| Heading hook | data-heading="collapsibles" | Betik, her başlığa gerçek bir düğme ekler. |
| Collapsed state | aria-expanded=false; next sibling aria-hidden=true | Gelişmiş CSS, gövdeyi gizlemek için html.js işaretçisini gerektirir. |
| data-anchor="no" | Suppress automatic heading anchors for this subtree | Daraltılabilir başlığa başka bir bağlantı eklemekten kaçının. |
| No JavaScript | All content remains visible | İyileştirilmemiş ilk işaretlemede gizli içerik sunmayın. |
## W3C tasarım sistemi Eksiksiz Kılavuz

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## W3C tasarım sistemi Aşamalı iyileştirme

### İçerik, kontrollerden önce gelir

> W3C, temel stilleri gelişmiş bileşenlerden ayrı tutar. Daraltılabilir bölüm, sıradan başlıklar ve bunları izleyen içerikle başlar. Betik olmadığında tüm oturum ana hatları okunabilir. main.js düğmeleri ekler ve durumu yalnızca belgelenen data attribute'larını bulduktan sonra değiştirir. Bu, kontrolleri hiç başlatılamayabilecek, baştan gizlenmiş bir akordeon sunmaktan farklı bir uygulama yaklaşımıdır.

Önizlemede resmî CDN'deki core.css, advanced.css ve main.js kullanılır; bunlar tarihli bir yerel anlık görüntü olarak kaydedilmiştir. html.js işaretçisi gelişmiş seçicileri etkinleştirir. Bu işaretçi eklenmediğinde ARIA attribute'ları değişir, ancak gövdeler görsel olarak açık kalır; önizlemede aria-expanded değerinin yanı sıra gerçek görünürlük de özellikle sınanır.

Destekleyici belirtimi okuyun

## W3C tasarım sistemi Akışkan tipografi ve yazı tipi yükleme

### Ölçülü bir okuma boyutu

Gövde metni boyutu, alt görüntü alanı sınırında 15px'ten 1120px'te 16px'e çıkar. Ölçeği dokuz adlandırılmış özel özellik tanımlar. H1, en büyük --w3c-text-7 yerine --w3c-text-5 boyutunu kullanır; her belgeye gelişigüzel biçimde kopyalanan 36px'lik bir vitrin başlığı, standart başlık hiyerarşisine uymaz.

Kullanılması amaçlanan web yazı tipi Noto Sans'tır. Yerel yedek yazı tipi yığını, yazı tipi yükleme yolu köke fonts-loaded ekleyene kadar Trebuchet MS ve Geneva kullanır. Bu bağımsız örnekte yedek yazı tipi etkin bırakılır ve bu tercih açıkça belirtilir. Akışkan boyut ve satır yüksekliği yerel değerlerdir; önizleme, Noto Sans'ın glif ölçülerini tam olarak yansıttığını iddia etmez.

Destekleyici belirtimi okuyun

## W3C tasarım sistemi Okuma genişliği ve aralıklar

### Düzen temel öğelerini bir araya getirin

l-center temel öğesi, 70rem'lik maksimum satır içi boyut ve yanlarda 5vw dolgu sağlar. Önizlemede üç kısa öğrenme ana hattını derli toplu tutmak için uygulamaya özgü 55rem'lik bir üst sınır eklenmiştir. Bu sınır yeni bir W3C token'ı değildir. Her daraltılabilir bölümün gövdesinde, yerel 41.25rem'lik metin genişliği uzun satırları sınırlar.

Belgelenen Stack mixin'i bir sütun düzeni oluşturur ve ilk doğrudan kardeşten sonrakilere margin-top uygular. Varsayılan ölçüsü 1em'dir; çağıranlar başka bir birim de iletebilir. Bunu, genel bir numaralı aralık ölçeği uydurmak yerine bloklar arasındaki ilişki olarak ele alın. Daraltılabilir bölümün iç kenar boşluğu 25px, aralığı 16px ve köşe yarıçapı 6px olarak ayrıca doğrulanmıştır.

Destekleyici belirtimi okuyun

## W3C tasarım sistemi Anlamsal renk rolleri

### Bağlantı geçmişini ve odağı görünür tutun

Sistem; varsayılan bağlantı mavisini, koyu mavi üzerine gelme durumunu ve mor ziyaret edilmiş bağlantı durumunu birbirinden ayırır. Bu roller, insanların uzun belgelere dönüp referanslar arasında gezindiği bir sitede önemlidir. Bağlantı takma adını ilgisiz dekorasyonlarda tekrar kullanmak, gelecekte tema değişikliklerinin alakasız yüzeyleri de etkilemesine yol açar.

Odak stili, görünür bir sınırla birlikte sarı kullanır. Ayarlar sayfası sıradan kenarlıkları, daha koyu giriş alanı kenarlığı rolünden ayrı tutar. Ayrıca bilgi, başarı, uyarı ve hata renklerine farklı anlamlar yükler. Renk rolünü koruyun ve gerçek arka planla eşleşmesini doğrulayın; tek başına renk örneği, bileşen durumunun yeterli kontrasta sahip olduğunu kanıtlamaz.

Destekleyici belirtimi okuyun

## W3C tasarım sistemi Daraltılabilir işaretleme ve betik

### Başlık, düğme ve bitişik gövde

Her doğrudan alt öğe, hemen ardından içerik gövdesinin geldiği bir başlık içerir. Betik, bu gövdeyi bulmak için nextElementSibling kullanır; dolayısıyla aralarına ilgisiz meta veri eklemek bu ilişkiyi bozar. Belgelenen grup listesi örneğindeki gibi kategori etiketini başlık aralığının içine yerleştirin. Betik, başlık içeriğini bir düğmenin içine alır.

Yerel kod, düğmede aria-expanded değerini, gövdede ise aria-hidden değerini değiştirir. Gelişmiş stil sayfası daraltılmış gövdeyi gizler. data-anchor="no", ayrı başlık bağlantısı özelliğinin bu bileşene istenmeyen bağlantılar eklemesini önler. main.js'i bir kez başlatın; iyileştirme işlemini tekrarlamak başlıkların içine iç içe ek düğmeler yerleştirir.

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

Kod referansı

Destekleyici belirtimi okuyun

## W3C tasarım sistemi Toplu kontroller ve klavye kullanımı

### Mevcut düğmeleri kullanarak genişletin

Tümünü genişlet ve Tümünü daralt, özgün örnek kontrolleridir. Her yerel düğmeyi inceler ve yalnızca durumunun değişmesi gerekiyorsa tıklarlar. Böylece yerel durum geçişi ile görsel kural birlikte korunur. Bir ARIA attribute'unu doğrudan değiştirip diğerini güncel olmayan durumda bırakmazlar.

Yerel düğmeler, Enter ve Boşluk tuşlarıyla etkinleştirilebilir. Önizlemede tek bir düğmeye basma, tümünü genişletme, tümünü daraltma ve ardından klavyeyle birini yeniden açma işlemleri sınanır. Kibar bir durum iletisi toplu işlemi açıklar. Kaynak bileşen, aynı anda birden fazla ana hattın açık olmasına izin verir; yalnızca tek bölümün açık kalabildiği özel bir akordeon değildir.

1. Inclusive forms bölümünü açın ve uygulamalı listesini inceleyin.

2. Üç oturumun açıklamalarını karşılaştırmak için Tümünü genişlet'i seçin.

3. Tümünü daralt'ı seçin, ardından yalnızca o bölümü yeniden açmak için bir başlıkta Enter tuşuna basın.

Destekleyici belirtimi okuyun

## W3C tasarım sistemi Varlıklar ve entegrasyon

### Uydurma paket kurulumu yok

Resmî başlangıç sayfasında temel, gelişmiş ve baskı stilleri için kararlı CDN adresleri ile main.js ve isteğe bağlı özellik betikleri yayımlanır. Kurulum bloğunda bu gerçek yollar kullanılır. Bu HTML uygulama için React sağlayıcısı veya npm paketi gerekmez. Örnek, gösterimin canlı bağlantıdan bağımsız olmasını sağlamak için indirilen dosyaları yerel olarak içerir.

Aynı eski tarayıcı grubunu desteklerken üretim entegrasyonunda gelişmiş stiller için belgelenmiş CSS yetenek denetimini koruyun. Kısa kurulum, modern tarayıcılarda gelişmiş stilleri doğrudan yükler. Tam belgeli bir sitede baskı stil sayfasını ekleyin; bağımsız önizleme, etkileşimli ekran örneğine odaklanır.

- core.css: temel tipografi, düzenler ve geliştirilmemiş bileşenler.

- advanced.css: JavaScript ile geliştirilmiş durumlara yönelik kurallar.

- main.js: veri kancalarını bulur ve desteklenen bileşenleri bir kez geliştirir.

Destekleyici belirtimi okuyun

## W3C tasarım sistemi Kapsam ve doğrulama

### Tasarım sistemi; uygunluk sertifikası değildir

W3C stilinde hazırlanmış bir sayfanın WCAG ile uyumlu olduğu kendiliğinden söylenemez. İçeriğini, odak sırasını, yakınlaştırma davranışını ve hata kurtarma durumlarını test edin. Bu örnek üç görünüm alanı genişliğini ve betik olmayan temel durumu denetler; sertifikasyon veya kapsamlı bir yardımcı teknoloji denetimi iddiasında bulunmaz.

Öğrenme gruplarının adları ve açıklamaları, kurgu ürünü özgün içeriklerdir. Bunlar resmî çalışma grupları, takvimler veya kayıt fırsatları değildir. Örnek, W3C logolarını ve üyelik iddialarını özellikle kullanmaz. Herkese açık bir stil varlığını yeniden kullanmak, kurumsal onay izlenimi vermekten ayrı tutulmalıdır.

Destekleyici belirtimi okuyun

## W3C tasarım sistemi Bileşen Örnekleri

### Aşamalı olarak geliştirilen oturum taslağı

Başlık ve bitişiğindeki gövde gerekli yapıdır; main.js geçiş düğmesini ekler.

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

Kod referansı

### Eksiksiz yerel öğrenme listesi

Kök geliştirme işaretçisini, resmî varlıkları, yerel açılır bölümleri ve toplu denetimleri içerir.

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

Kod referansı

## W3C tasarım sistemi Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

Resmî CDN adreslerinin gerçek yolları. Yerel önizleme bu varlıkları içerir ve sistem yazı tipi yedeğini korur. Kaynaklar bölümündeki eksiksiz çalışan örnek ZIP dosyası, önizleme için gereken bağımlılıkların tam sürümlerini ve belge dosyasının tamamını da sağlar. Dosyaları bu dizine çıkarın, python3 -m http.server 8080 komutunu çalıştırın, ardından http://localhost:8080/w3c.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.

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

### Projeniz İçin Bir İstem

```
W3C core ve advanced stillerini main.js ve html.js geliştirme işaretçisiyle kullanın. Gerçek veri kancalarını kullanan bitişik, daraltılabilir içeriklere sahip anlamsal başlıklar oluşturun. JavaScript olmadığında da okunabilir temel durumu, yerel akışkan tipografiyi ve anlamsal bağlantı/odak renklerini koruyun. İki kez başlatmayın ve yalnızca biçimlendirmeye dayanarak WCAG uygunluğu çıkarımında bulunmayın.
```

## W3C tasarım sistemi Kaynaklar ve Kapsam

Resmî, herkese açık varlıkları kullanan bağımsız OpenDesign örneği. W3C ile bağlantı veya erişilebilirlik sertifikasyonu ima edilmez.

- Başlarken Resmî CDN varlıkları ve yükleme talimatları.

- Daraltılabilir kapsayıcılar Yerel yapı, kancalar ve aşamalı davranış.

- Tipografi Noto Sans ve akışkan ölçek.

- Ayarlar Renk rolleri ve yazı tipi yükleme davranışı.

- Dikey boşluk Yığın karışımı ve açık ölçüler.

- Çalışan örneğin tamamını indirin Tam HTML, yerel CSS/JavaScript bağımlılıklarını, sağlanan lisansları ve başlatma talimatlarının tam hâlini içeren ZIP. Derleme adımı gerekmez.

## W3C tasarım sistemi İlgili Kaynaklar

### Codex

Codex’ın gerçek SearchInput anatomisini, eylem hiyerarşisini ve okumaya yönelik belirteçlerini kullanın. Yerel makale dizininde arama yapın, bir sonucu inceleyin ve aynı okuma konumuna geri dönün.

### Agriculture tasarım sistemi

AgDS’nin somut boşluk değerleri, duyarlı özellikleri ve TaskList durum modeliyle daha uzun hizmet işlemleri oluşturun. İnceleme adımının yalnızca ön koşullar tamamlandığında açıldığı bir hazırlık iş akışını deneyin.

### Alberta tasarım sistemi

Erişilebilir seçenekler, türetilmiş ilerleme ve gerçeğe uygun inceleme geri bildirimi içeren eksiksiz bir hazırlık kontrol listesi oluşturmak için Alberta’nın yerel web bileşenlerini ve yayımlanmış tasarım belirteçlerini kullanın.


- [Uygulama başvurusu](https://design-system.w3.org/components/collapsible-containers.html)
- [Kaynak](https://design-system.w3.org/styles/typography.html)
- [Kaynak](https://design-system.w3.org/settings/)
- [Kaynak](https://www.w3.org/assets/website-2021/styles/core.css)
- [Kaynak](https://design-system.w3.org/components/collapsible-containers.html)
- [Destekleyici belirtimi okuyun](https://design-system.w3.org/)
- [Destekleyici belirtimi okuyun](https://design-system.w3.org/styles/typography.html)
- [Destekleyici belirtimi okuyun](https://design-system.w3.org/styles/vertical-spacing.html)
- [Destekleyici belirtimi okuyun](https://design-system.w3.org/settings/)
- [Kod referansı](https://design-system.w3.org/components/collapsible-containers.html)
- [Destekleyici belirtimi okuyun](https://design-system.w3.org/components/collapsible-containers.html)
- [Destekleyici belirtimi okuyun](https://design-system.w3.org/getting-started.html)
- [Başlarken Resmî CDN varlıkları ve yükleme talimatları.](https://design-system.w3.org/getting-started.html)
- [Daraltılabilir kapsayıcılar Yerel yapı, kancalar ve aşamalı davranış.](https://design-system.w3.org/components/collapsible-containers.html)
- [Tipografi Noto Sans ve akışkan ölçek.](https://design-system.w3.org/styles/typography.html)
- [Ayarlar Renk rolleri ve yazı tipi yükleme davranışı.](https://design-system.w3.org/settings/)
- [Dikey boşluk Yığın karışımı ve açık ölçüler.](https://design-system.w3.org/styles/vertical-spacing.html)