Diyagramlar ve simgeler

İmza görselleri bir avuç temel öğeyle kurulur: yuvarlatılmış satırlar, ince teller, çipler, onay işaretleri, mühürler ve küçük mürekkep etiketler. Ne bir simge seti ne bir çizim kütüphanesi kurulu. Her görsel tek bir bileşendir ve çoğu sayılarını bir birim testinin de okuduğu saf bir modülde tutar.

Yayındaki görseller

Herkese açık sayfalarda bilgi taşıyan 21 görsel var. Bunların 10 tanesi tek, ölçeklenen bir SVG çizimidir; 11 tanesi HTML ve CSS ile dizilir ve bir çizgi ya da onay işareti gereken yerde küçük bir satır içi SVG kullanır. 16 tanesinin sayıları saf bir geometri modülünde durur; 20 tanesi oynadıktan sonra sakin bir döngüde kalır.

Kullanılan çizgi kalınlıkları

SVG çizimleri çizgi kalınlıklarını CSS'te, çizim birimiyle bildirir; çizgi çizimle birlikte ölçeklenir. Bu kümeyi tanımlayan bir kural yok: tablo, 10 SVG çiziminin bugün kullandığını simgeler dışarıda kalarak stillerinden okur.

• Web sitesi hiçbir simge ya da çizim kütüphanesi kurmaz: ne sitenin ne de arayüz paketinin bağımlılıkları arasında böyle bir kütüphane var. Her diyagram sitenin kendi kodunda, neredeyse her zaman onu gösteren bileşenin içinde yazılmış satır içi SVG ya da HTML'dir.

  NedenHiçbir şey başka bir yerden çekilmez (içerik güvenliği politikası buna zaten izin vermez) ve tek bir fikir için yapılmış çizim yalnız o fikri taşır.

  TestHer değişiklikte bir testle korunur.

• Rastgele görünen yerleşimler sabit bir tohumla üretilir: hiçbir imza görseli ve okuduğu hiçbir modül Math.random çağırmaz; sunucu ve tarayıcı her derlemede aynı sahneyi çizer.

  NedenJavaScript olmadan görülen çizim, canlanan çizimin aynısı olmalı. Sitedeki tek istisna ana sayfa açılışının arkasındaki gürültü alanı; süs amaçlı bir tuval, imza görseli değil.

  TestHer değişiklikte bir testle korunur.

• Bir görsel konum hesaplıyorsa bu konumlar DOM ve animasyon kodu içermeyen saf bir modülde durur; sunucu çizimi ve bir birim testi bu modülü okur, konumları canlandıran yerde tarayıcı betiği de.

  NedenKonumlar böylece her kod gibi sınanır: satırlar üst üste binmez, etiket kendi şeridinde durur, zincir sahnesine sığar.

  İncelemeBir testle değil, incelemeyle korunur.

• Görseldeki sayılar uydurulmaz. Ölçülmüş bir rakam onu yayımlayan sözlükten gelir; özetler, yollar ve adresler temsilidir.

  NedenDiyagram iddianın parçasıdır. Güncelleme görseli, kanıt şeridinin yayımladığı rakama kadar sayar ve onu aynı kayıttan okur.

  İncelemeBir testle değil, incelemeyle korunur.

Yeni bir görsel eklemek

Bu sayfadaki kurallar, yeni bir şey çizerken karşınıza çıktıkları sırayla. Bir adımın bir kısmını bir test denetliyorsa adım bunu söyler.

1. Tek bir bileşen yazın. Görseli role="img" taşır ve etiketi sayfa sözlüğünden, İngilizce ve Türkçe gelir.Metin alternatifleriBir testle denetlenir
2. Bileşeni bu sayfanın okuduğu görsel envanterine ekleyin. Yayındaki her role="img" bileşeni orada listelenene kadar bir test kırılır.Tek dilBir testle denetlenir
3. Hesaplanan konumları saf bir modüle koyun, Math.random kullanmayın ve sınayın: satırlar birbirine binmez, etiketler kendi şeridinde durur.Tek dilBir testle denetlenir
4. Ortak çerçeveyi (.fv) kullanın ve bildirimini birebir kopyalayın; görsel bir sahneyse ya da doğrudan sayfanın üzerinde duruyorsa bu adım yoktur.ÇerçeveBir testle denetlenir
5. Rengi anlama göre seçin: doğrulanmış sinyal için accent, doğrulanmamış değişiklik için raw, yapı için mürekkep; renk hiçbir zaman tek başına anlam taşımaz.Rengin anlamı
6. Telefonda okunması gereken yazıyı çizimin üzerinde HTML olarak koyun ya da kırılım noktasının altında daha büyük bir boy verin.Etiketler
7. revealMotion ile transform, clip-path ve stroke-dashoffset kullanarak canlandırın, saydamlıkla asla; her süreyi ve eğriyi hareket sözlüğünden alın. Giriş sonuçta bitsin, döngü varsa sonucun üzerinden geçsin. Azaltılmış harekete ve JavaScript olmayan duruma bir son hâl verin, her döngünün yanına bir duraklatma düğmesi koyun.HareketBir testle denetlenir

Görselin içinde renk bir iddiadır: accent doğrulanmış sinyal, raw doğrulanmamış değişiklik, gürültü ya da saldırgan, mürekkep ise yapı ve karardır. Geri kalan her şey kâğıt ve ince çizgidir.

Anlamı token dosyasında yazılı olan yalnızca accent ve raw. Öteki satırlar görsellerin tokenlarını bugün nasıl kullandığını anlatır ve istisnaları var: mimari diyagramındaki sunucu noktaları durağan hâlde de accent, ana sayfadaki sahne ise küçük etiketleri accent-deep bir kapsülün üzerinde accent-tint ile yazar. Token dosyasını indir (CSS)

Kararı kanıt doldurur.

Zero Door sayfasındaki karar sahnesi tek bir vakayı çizer; kararını da kanıt çizer. Kapsül boş, ink-subtle bir çerçeve olarak doğar. 3 başarısız kanıtın her biri üzerine iner ve onu soldan raw ile eşit bir parça daha doldurur; 3 nötr kanıtın her biri üst kenarına ink-subtle bir çentik çizer ve hiçbir şey doldurmaz. Sözcüğünü, Şüpheli, yalnız dolu kapsül alır: sözcük paper ile soldan sağa açılır. Sahne, kanıtın henüz hak ettirmediği bir rengi ya da sözcüğü hiçbir zaman göstermez.

Başka yerlerde aynı fikir daha yalın bir biçimde işler. Tek işi kötü bir kararı taşımak olan çip raw ile doldurulur; meşruiyet karşılaştırmasında ve olay ağacında olduğu gibi. Çizimin zaten işaretlediği bir noktayı açıklayan etiket ise mürekkep kalır: baraj, durdurulan her kartın konturunu ve halkasını raw'a çevirir; kıyının altındaki mürekkep etiket nedenini söyler.

Renk hiçbir zaman yalnız değildir.

accent ile raw daha çok renk tonunda ayrılır. Kontrast olarak ölçüldüğünde aralarında yalnızca 1,30:1 vardır; bu yüzden hiçbir sahne bu farka dayanmaz. Eşleşmeyen kartlar kıyıda durur, ötekiler kapıdan geçer; orijinalin halkasında bir tik vardır, durdurulan kartın halkası boştur; saldırganın kendine ait bir rotası ve adım adları vardır; tutmayan kanıt bir çarpı taşır ve her kararın adı yazıyla verilir.

• accent doğrulanmış sinyali, raw ise doğrulanmamış değişikliği, gürültüyü ya da saldırganı işaretler.

  NedenGürültünün kendi rengi olmasaydı sinyal de gürültü de koyu kalır, sahne tek renkli bir grafik gibi okunurdu. Token dosyası raw'ın varlık nedenini böyle yazar.

  İncelemeBir testle değil, incelemeyle korunur.

• raw alarm kırmızısı değil, soluk bir tuğla tonudur ve okunur kalır: kâğıt üzerinde yazı olarak da, kâğıt rengi yazının zemini olarak da.

  Nedenİşaretli yollar, karar çipleri ve kritik bulgular yazıyı raw ile ya da raw üzerine yazar. Oranı token dosyası belirtir, bir test korur.

  TestHer değişiklikte bir testle korunur.

• Renk bir anlamı hiçbir zaman tek başına taşımaz: konum, biçim ya da bir sözcük aynı şeyi söyler.

  Nedenaccent ile raw açıklıkta birbirine yakındır. Renk görme farklılığı olan bir okur ya da gri tonlu basılmış bir sayfa yine rotayı, çarpıyı ve sözcüğü görür.

  İncelemeBir testle değil, incelemeyle korunur.

Bir özelliği anlatan görsel, nerede görünürse görünsün aynı çerçevede durur: ince bir kenar çizgisi, orta yarıçap ve ikinci kâğıt tonu. İçindeki satırlar ve çipler kâğıt rengiyle öne çıkar; yalnızca çizimin üzerinde yüzen nesneler gölge düşürür.

Çerçevenin kullanılmadığı yerler.

Çerçevesiz olarak doğrudan sayfanın üzerinde duranlar: DamFigure, DayOneTimeline ve AttackPath. İki kaydırma sahnesi bunun yerine noktalı arka planlı, tam bir paper-2 sahne kullanır (Results ve DecisionScene). Araştırma sayfasındaki onaltılık döküm bir mürekkep paneldir (HexScan), meşruiyet karşılaştırması ise iki yüzen karttır (LegitCompare). Mimari diyagramı çerçeveyi korur ve iç boşluk ekler, çünkü dar ekranda çizim çerçevenin içinde kayar (FlowDiagram).

• Özellik görselleri ortak çerçeveyi (.fv) kullanır; onu bildiren her bileşende değerler aynıdır.

  NedenTek çerçeve, farklı çizimleri tek bir aile gibi okutur. Her bileşen onu kendi içinde bildirdiği için kopyaların aynı kalmasını bir test korur.

  TestHer değişiklikte bir testle korunur.

• Yalnızca yüzen nesneler gölge düşürür: damgalar, arama çubuğu ve çizimin üzerine konan kartlar. Çerçevenin kendisi hiçbir zaman gölge almaz, karar etiketi de almaz.

  NedenGölge "çizimin üstünde" demektir. Çerçevede olsaydı her bölüm üst üste yığılmış kartlara dönerdi.

  İncelemeBir testle değil, incelemeyle korunur.

Görselin içindeki makine metni Geist Mono ile dizilir: yollar, özetler, adresler, türler, sayımlar ve bir sahneye not düşen küçük etiketler. Çizimin içindeki başlıklar, örneğin mimari diyagramındaki platform adı ya da bir karar kapsülü, New Black ile dizilir. Telefonda okunması gereken yazı çizimle birlikte okunur bir boyun altına küçülmemeli; aşağıdaki tablo bunun nerede tuttuğunu, nerede henüz tutmadığını gösterir.

Okunur kalmanın iki yolu.

Çizim sütunuyla birlikte ölçeklenir, SVG yazısı da onunla. 320 px'lik bir ekranda sayfa sütunu 264 px genişliğindedir; 560 birim genişliğindeki kanıt zinciri, 12 birimlik özetlerini 5,61 px boyunda gösterir. Sitenin iki çözümü var. Asıl söyleneni taşıyan yazı (bir karar etiketi ya da bir zaman damgası) HTML'dir: SVG'nin üzerine konur ya da hiç SVG kullanılmaz; çizimde belli bir noktada durması gereken etiket görselin yüzdeleriyle yerleştirilir. Boyu çizim biriminde değil CSS ile verilir: kanıt zincirindeki damga 11,5 px kalır, Zero Door sayfasındaki barajın karar etiketi ise boyunu çizimin genişliğinden alır, 9 px değerinin altına inmez ve 11,5 px değerini aşmaz; 320 px'lik bir ekranda 9 px boyunda kalır. Barajın kartlarındaki dosya adları ve işletim sistemleri de HTML'dir ve çizimi aynı yolla izler. SVG'nin içinde kalan yazı ise kırılım noktasının altında daha büyük bir boy alabilir.

Kullanılan etiket ölçüleri

Henüz her yerde değil. EvidenceChain ve MemoryMap içinde bazı makine metinleri SVG'de tek bir boyla kalır; 320 px'lik bir ekranda 4,21 ile 5,61 px arasında görünür. Büyütmek de her zaman yetmez: büyüyen yazı orada, çiziminin kaç birim genişlikte olduğuna göre 7,07 ile 13,05 px arasında görünür. En küçüğü, 560 birim genişliğindeki AttackPath içindedir.

Mimari diyagramı ayrıca 760 px altında en az 620 px genişlikte kalır ve çerçevesinin içinde kayar; bu yüzden en küçük etiketleri 9,79 px'in altına inmez.

İki kaydırma sahnesi tabloda yok: 600 px ve altında üçüncü bir yol izlerler, çünkü her adım resmin başka bir yerine ihtiyaç duyar. Karar sahnesi her adımı kendi kamerasıyla kadrajlar; bütün sahne küçülmez, adımın anlattığı bölge resmi doldurur. Ana sayfadaki kanıt sahnesi kartlarını HTML olarak dizer ve 11 px altına inecek etiketleri gizler; adlandırdıkları şey zaten kartta ve sahnenin açıklamasındadır. Bir test iki sahnedeki görünür her yazıyı, her adımda, 375, 390 ve 412 px genişliğindeki telefonlarda ölçer; 320 px'lik bir ekran o testte yok.

• Ana sayfadaki kanıt sahnesinde mono etiketler küçük ekranda büyür ve onları birbirinden uzak tutan yerleşim bu büyük ölçüyle ölçülür.

  NedenCSS ölçüsü ile yerleşim sabiti birbirinden ayrılırsa çakışma testi kimsenin görmediği bir kutuyu doğrulamış olur.

  TestHer değişiklikte bir testle korunur.

• Ana sayfadaki kanıt bölümünün ilk sahnesinde etiket, adlandırdığı işaretten uzağa yazılır: sahnenin üst yarısında yukarı ve sağa, alt yarısında aşağı ve sola.

  NedenEtiket açıkladığı eğrinin üstüne hiç oturmaz. Test, iki eğri arasındaki boşluğun yetmediği tek bir ölçülmüş istisnaya izin verir.

  TestHer değişiklikte bir testle korunur.

• Etiketin kendi yeri olur: barajın karar etiketi kıyının altında, kapının sağında durur; oradan hiçbir kart geçmez.

  NedenBir kartı örten bir katman, adlandırdığı şeyin ta kendisini gizlerdi.

  TestHer değişiklikte bir testle korunur.

• Zero Door sayfasındaki karar etiketi hiçbir genişlikte bir kartın, kapının ya da çizimin kenarının üstüne taşmaz.

  NedenBoyunun çizimi izlemesinin nedeni budur. Test, etiketi her karta, kapıya ve çerçeveye karşı üç pencere genişliğinde ve bir telefonda, iki dilde ölçer.

  TestHer değişiklikte bir testle korunur.

• Telefonda iki kaydırma sahnesindeki görünür her yazı, her adımda okunur sınırın üstünde kalır; adım kartı ve resim ekranda birlikte durur.

  NedenSınırı yukarıda adı geçen test koyar. İki sahneyi üç telefon boyunda, İngilizce, Türkçe ve azaltılmış hareketle açar; her adımda görünür her etiketi ve kartı ölçer.

  TestHer değişiklikte bir testle korunur.

Bir akış tek yöne gider, genellikle soldan sağa: kaynak solda, karar ya da varış noktası sağda. İstisnalar anlamdan doğar: baraj dosyalarını sağ üstten, akıntı boyunca alır, geçmişe bakan tarama geriye doğru ilerler, olay ağacı yukarıdan aşağı büyür, verinin yeri haritasında ise kapalı ağdaki paket bir duvara çarpıp geri çekilir, çünkü dışarı çıkamaz.

• Mimari diyagramında hiçbir şey ters yönde gitmez: her tel bir sunucudan çıkar ve platformda biter, her darbe de onun üzerinde ileri doğru ilerler.

  NedenDiyagram, bağlantıyı ajanın dışarıya doğru açtığını söylemek için var. Geri gelen bir darbe bunun tersini söylerdi.

  TestHer değişiklikte bir testle korunur.

• Geçmişe bakış sağdan sola ilerler: bulgu, çizgi üzerinde kurulumdan önce durur.

  NedenSahnenin anlattığı şey, ilk taramanın sunucuda zaten var olana bakmasıdır.

  TestHer değişiklikte bir testle korunur.

• Olay ağacı yukarıdan büyür: her düğüm ebeveyninden sonra gelir.

  NedenOkuma sırası ile neden-sonuç sırası böylece aynı olur.

  TestHer değişiklikte bir testle korunur.

• Saldırı yolu dışarıdan hedefe iner ve yeniden dışarı çıkar.

  NedenHer durak, adımının ait olduğu bölgeye düşer; hikâyeyi rotanın kendisi anlatır.

  TestHer değişiklikte bir testle korunur.

Görsel görünür olduğunda bir kez oynar ve sonucunda biter. Çoğu ardından bitmiş resmin üzerinde sakin bir döngüye geçer: döngü sonucu hiç silmez, turlar arasında dinlenir ve duraklatılınca sonuçta durur. Hizmetler sayfasındaki saldırı anlatısının hiç döngüsü yoktur. İki kaydırma sahnesini ise kaydırma yönetir; bir adımda durulduğunda yalnız hareketi bir şey söyleyen adım kıpırdar. Çizgiler çizilerek gelir, işaretler hafifçe aşıp yerine oturur, yazı taşıyan her şey aşmadan açılır; hiçbir şey saydamlıktan belirmez. Azaltılmış hareket açıkken ya da JavaScript olmadan aynı görsel okunur bir son hâl gösterir ve her sürekli döngünün yanında bir duraklatma düğmesi bulunur.

Çizgiler çizilerek gelir.

Kendini çizen bir çizgi pathLength="1" taşır; uzunluğu her boyda 1'dir. 1 uzunluğunda bir kesik dizisiyle stroke-dashoffset 1 iken çizgi çizilmemiş, 0 iken çizilmiş, -1 iken kuyruğu çekilmiştir. Bir uçta ince bir parça kalabilecekse, örneğin yuvarlak uçlu çizgide, kesik dizisi 1 2, çizilmemiş değer de ortak bir sabit olan 1,02 olur: tarayıcı yol uzunluğunu tam olarak normalleştirmez, geniş boşluk iki ucu da temiz tutar. Tween'e autoRound: false verilir; o olmadan animasyon kütüphanesi değeri tam piksele yuvarlar ve çizgi tek hamlede belirir. Darbe ise kısa bir kesikle pathLength değeri 100 olan bir yol kullanır.

<line class="link" data-link x1={blocks[i]!.x + CHAIN.w + 3} x2={b.x - 3} y1={cy} y2={cy} pathLength="1"></line>
.link { stroke: var(--color-ink); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
:global(html.motion) .chain .link { stroke-dashoffset: 1; }
const FINE = { autoRound: false } as const;
if (i > 0) t.to(links[i - 1]!, { ...FINE, ...MOTION.mark, strokeDashoffset: 0 }, at + 0.15);

Tek yaşam döngüsü.

Görünür olunca oynayan görseller aynı yaşam döngüsünü paylaşır; durum data-state özniteliğine yazılır ve uçtan uca testler onu buradan okur.

JavaScript olmadan hiçbir durum yazılmaz ve sunucunun çizdiği son hâl kalır. Ön durumlar yalnızca sitenin hareket betiği sayfayı işaretledikten sonra uygulanır; JavaScript yoksa ya da o betik yüklenemezse görsel son hâlini gösterir.

• Saydamlık yok: giriş ve çıkışlar transform, clip-path, stroke-dashoffset ve SVG öznitelikleriyle yapılır.

  NedenKısmi saydamlık, geçişin ortasında ölçülen renk kontrastını düşürüyordu. İçerik her an tam görünürdür.

  TestHer değişiklikte bir testle korunur.

• Çizim tween'lerine autoRound: false verilir; çizgi bir anda belirmez, düzgün ilerler.

  NedenTest bir eğrinin çizimini kaydırarak izler ve çizilmiş ile çizilmemiş arasında çok sayıda ara değer bekler.

  TestHer değişiklikte bir testle korunur.

• Azaltılmış hareket açıkken her görsel son hâlini hemen gösterir ve hiçbir döngü çalışmaz; kaydırma sahneleri her adımın sonuna atlar.

  NedenZiyaretçi hareket istemedi; resim yine de her şeyi söylemeli. Test, imza görseli olan her sayfayı açar.

  TestHer değişiklikte bir testle korunur.

• JavaScript olmadan sunucunun çizdiği hâl okunur ve anlamlıdır.

  NedenGörsel, bir betiği bekleyen süs değil, anlatının parçasıdır. Test, imza görseli olan her sayfayı JavaScript olmadan açar.

  TestHer değişiklikte bir testle korunur.

• Döngü çalıştıran bir sayfa görünür bir duraklatma düğmesi gösterir; tek basış bütün döngüleri duraklatır ve seçim bir sonraki sayfada da geçerlidir.

  NedenKendiliğinden beş saniyeden uzun süren her hareket durdurulabilmeli. Test ana sayfadaki düğmeye basar ve bir sonraki sayfanın duraklatılmış açılmasını bekler. Aynı dosya her sayfayı da sınar: bir döngü başladıysa görünür bir duraklatma düğmesi olmalı.

  TestHer değişiklikte bir testle korunur.

• Duraklatma düğmesi, durdurduğu döngünün yanında durur.

  NedenOkur düğmeyi hareketin olduğu yerde bulur. Erişilebilirlik denetimi yalnızca sayfanın bir yerinde görünür bir düğme arar; bu yerleşim gözlenen bir kullanımdır ve onu inceleme korur.

  İncelemeBir testle değil, incelemeyle korunur.

• Döngüler ekran dışında durur.

  Nedenİzleyen yoksa hiçbir şey çalışmamalı.

  TestHer değişiklikte bir testle korunur.

• Döngüler gizli sekmede durur, sekme geri gelince sürer.

  NedenTest sekmeyi gizler ve mimari diyagramındaki darbelerin olduğu yerde kalmasını bekler.

  TestHer değişiklikte bir testle korunur.

• Döngü sonucu hiç silmez: bitmiş resmin üzerinden geçer.

  NedenYeniden oynamak için kendini boşaltan bir resim, anlattığı şeyden başka bir şey söyler. Test baraj çizimini ve kapsam tablosunu döngüleri boyunca izler ve sonucun her an yerinde kalmasını bekler.

  TestHer değişiklikte bir testle korunur.

• Duraklatılan döngü yarıda değil, sonuçta durur.

  NedenHareketi durduran ziyaretçi de resmin tamamını görür. Test iki görseli de duraklatır ve her birinin sonucunda durduğunu sınar.

  TestHer değişiklikte bir testle korunur.

• Betikli hareket sürelerini ve eğrilerini tek bir modülden, hareket sözlüğünden alır.

  NedenYeni bir görsel böylece ötekilerle aynı birkaç sözcükle hareket eder. Bir bekçi test sitedeki her betiği okur ve o modülün dışında yazılmış bir eğride ya da sürede kırılır; gerekçesi yazılı olarak izin listesinde duran dosyalar bunun dışındadır.

  TestHer değişiklikte bir testle korunur.

Bilgi taşıyan bir görsel, yardımcı teknolojiler için tek bir resimdir: neyin çizildiğini ve ne anlattığını söyleyen, çoğunlukla tek cümlelik kısa bir etiketle role="img". İçindeki çizim gizlenir. Ana sayfa açılışının arkasındaki tuvalden simgelere kadar süs amaçlı grafikler de gizlidir.

Yayındaki 21 görselin her biri, etiketi İngilizce ve Türkçe sözlüklerden gelen tek bir resimdir.

<figure class="fv cov" data-coverage role="img" aria-label={d.label}>
<svg class="mk" viewBox="0 0 16 16" aria-hidden="true"><path d={tick}></path></svg>

Kullanılan etiketler

Etiketlerin çoğu "Çizim:" ile başlar; dinleyen kişi bir resmin anlatıldığını bilir. İki kaydırma sahnesi etiketlerini adım adım numaralar ve adım değiştikçe değiştirir; yanlarında gerçek adım düğmeleri ve adım metni durur. Baraj çizimi kunduzunu yalnızca bir kunduz olarak anlatır: maskotun adı Castor, tasarım dili sayfalarının düzyazısında kalır ve hiçbir metin karşılığına girmez.

• Bilgi taşıyan bir görsel, etiketi sözlüklerden gelen role="img"'dir; bileşenin içine yazılmış sabit bir metin değildir.

  NedenEtiket sayfayla birlikte çevrilir ve metinle birlikte gözden geçirilir.

  TestHer değişiklikte bir testle korunur.

• Etiket bir ad değil, bir cümledir.

  NedenTest herkese açık sayfalardaki her görsel etiketini okur ve 40 karakterden uzun, nokta ile biten bir cümle bekler: "diyagram" hiçbir şey anlatmaz.

  TestHer değişiklikte bir testle korunur.

• Kaydırma sahnesi her adımda etiketini değiştirir.

  NedenResim değişiyorsa açıklaması da değişmeli.

  TestHer değişiklikte bir testle korunur.

• Süs amaçlı grafikler gizlidir: tuvaller, glifler, simgeler ve oklar aria-hidden taşır.

  NedenEkran okuyucu böylece yanlarındaki metni bir kez okur, şekilleri tek tek saymaz.

  İncelemeBir testle değil, incelemeyle korunur.

Web sitesi simgelerini diyagramlarını çizdiği gibi çizer: elle yazılmış satır içi SVG, çoğunlukla onu gösteren bileşenin içinde. Tek istisna alt bilgideki sosyal ağ işaretleridir. Simgeler süs amaçlıdır ve yardımcı teknolojilerden gizlenir; anlam yanlarındaki metinde ya da kontrol öğesinin etiketinde durur.

Tanımlı olmayanlar.

Web sitesinin bir simge boy merdiveni, bir simge ızgarası ya da bir kontur kuralı yok. Toplam 6 farklı çizim boyu ve 3 kontur kalınlığı (1,5; 1,6; 2) kullanılıyor ve aralarında seçim yapan bir kural yok; onay işareti onu çizen her bileşende yeniden yazılır. Her aile ekranda 1,5 ile 2 px arasında bir çizgiye denk gelir, ama bu bir kural değil, bir gözlemdir.

Diğer işaretler

Alt bilgideki sosyal ağ işaretleri Simple Icons setinden (CC0) alınmış marka işaretleridir ve tek bir modülde durur: her biri 24 birimlik ızgarada dolgulu tek bir yol, ağın adını taşıyan 28 px boyunda bir bağlantının içinde 16 px boyunda çizilir. Web sitesinin kendi çizmediği tek simgeler bunlardır. Duraklatma düğmesi kendi glifini SVG ile değil CSS ile çizer. Zerone glifi tek marka işaretidir ve kendi kuralları vardır. Logo ve ad

• Simgeler süs amaçlıdır: aria-hidden taşırlar, anlam yanlarındaki metinde durur.

  NedenEkran okuyucu böylece şekilleri duyurmak yerine sözcükleri bir kez okur.

  İncelemeBir testle değil, incelemeyle korunur.

• Yalnızca simgeden oluşan bir kontrol öğesi adını kendisi taşır: alt bilgideki sosyal ağ bağlantılarının erişilebilir bir adı var, görünen metni yok.

  NedenBağlantının üzerindeki tek şey simge; nereye gittiğini bağlantının kendisi söylemeli.

  TestHer değişiklikte bir testle korunur.

Zero Door arayüzünde

Yukarıdaki basamaklar, boylar, konturlar, varsayılan basamak, rozetteki basamak ve dokunmatik hedef ürün kodundan gelir: bu sayfada elle yazılmaz, ürün token anlık görüntüsü eşitlenirken okunur. Elle duran tek değer, çizgi setinin 24 birimlik ızgarasıdır. Anlık görüntü ürün olgularına 2026-10-09 tarihini verir: olguların okunduğu ürün dosyalarından herhangi birinin en son değiştiği gün. Anlık görüntüyü indir (JSON)

Ürün sayfalarının kullandığı bileşenlerle çizilmiş üç gerçek görsel, her biri sütunun tüm genişliğinde. Her biri kendi etiketini ve kendi döngüsünü korur, yanında bir duraklatma düğmesi durur; birini duraklatmak sitedeki bütün döngüleri duraklatır.