W3C tasarım sistemi.

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

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