Erişilebilirlik

WCAG 2.2 AA, iki dildeki her sayfa için alt sınırdır; bir erişilebilirlik kontrolünden geçemeyen değişiklik siteye ulaşmaz.

• 0 bir sayfada izin verilen axe ihlali, etkisi ne olursa olsun
• 63 taranan her sayfada çalışan axe kuralı, 5 WCAG etiket kümesinden
• 320 CSS piksel genişlikte hiçbir sayfa yana kaymaz
• 100 21 sayfada istenen masaüstü Lighthouse erişilebilirlik puanı

axe-core bir makinenin karar verebildiği şeylere bakar. Karar veremediği ölçütlerin birkaçını, aralarında yeniden akış, sabit üst menünün altında kalan odak ve hareketli içerik için duraklatma düğmesi olmak üzere, kendi betikli tarayıcı testleri sınar. Kontroller her birleştirme isteğinde ve her gönderimde çalışır; bir sonraki bölüm her birini, testinin koddaki adıyla listeler.

• 404 sayfası dahil derlenen her sayfa taranır.

  NedenTest sayfa listesini derlenmiş sitenin kendisinden çıkarır: derlemenin yazdığı, Türkçe ve İngilizce her HTML dosyası; ziyaretçinin var olmayan her adreste gördüğü 404 sayfası da dahil. Yeni bir sayfa, kimse eklemeden taramaya girer.

  TestHer değişiklikte bir testle korunur.

• Bir kontrolden geçemeyen değişiklik siteye ulaşmaz.

  NedenSitenin yayına alınması derleme kapılarını, tarayıcı testlerini ve masaüstü Lighthouse ölçümünü bekler. Biri kırılırsa site yayına alınmaz. CI'da başarısız olan bir tarayıcı testi bir kez daha çalıştırılır; yayına almayı yalnızca yine başarısız olursa durdurur.

  DerlemeHer değişiklikte derleme hattıyla korunur.

Her satır, her değişiklikte çalışan bir kontroldür. Bu sayfa derlenirken her satır onu çalıştıran testle eşleştirilir; bir test yeniden adlandırılır, silinir ya da atlanırsa bu sayfanın derlemesi kırılır, geride eskimiş bir iddia kalmaz.

Klavye odağı her yerde aynı görünür: vurgu renginde, 2 piksel kalınlığında düz bir halka. Tarayıcı odağın görünmesi gerektiğine karar verdiğinde çizilir; bu yüzden bir düğmeye ya da bağlantıya fareyle tıklamak geride halka bırakmaz. Bileşenler aralığı değiştirebilir, kalınlığı ve rengi asla.

Klavyeyle deneyin.

Bu kontrol öğeleri arasında Tab ile gezinin. Sitenin kendi düğme ve bağlantı sınıflarını ve sade bir metin alanını kullanırlar; hepsi tek bir genel odak kuralına bağlıdır. Düğmeler örnektir, bir şey yapmaz.

Dört zeminde halka

Halka metin değildir; arkasındaki renge karşı 3:1 gerekir. Vurgu rengi aşağıdaki dört zeminin her birinde bunu sağlar: iki sayfa zemini, accent-tint (vurgu renginin açık tonu) ve kod panellerinin koyu zemini.

Kullanımdaki aralıklar

Kullanımdaki aralıklar 3px ile -2px arasındadır. Varsayılan halka öğeden biraz uzakta durur, duraklatma düğmesi ve alanlar daha yakındadır, adım düğmelerini halka sıkıca sarar, kod panellerinde halka içe çizilir.

Sabit üst menü ve kaydırma payı

Üst menü pencerenin üstünde sabit durur ve 67 piksel yüksekliğindedir. Bağlantılar, düğmeler, form alanları, summary öğeleri ve tabindex taşıyan her öğe üstte 84, altta 16 piksellik kaydırma payı taşır; odak bunlardan birini görünüme kaydırdığında öğe menünün altında, arada 17 piksel boşluk kalarak durur. Bölüm çapaları kendi paylarını taşır.

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
:where(a[href], button, input, select, textarea, summary, [tabindex]) { scroll-margin-top: 84px; scroll-margin-bottom: 16px; }

• Odak, vurgu renginde 2px'lik düz bir halkadır. Yalnızca aralık değişir.

  NedenOdağın her yerde tek bir işareti vardır; kimse ikincisini öğrenmek zorunda kalmaz. Bu sayfa derlenirken bileşenlerdeki, yerleşimlerdeki, sayfalardaki ve genel CSS'teki bütün odak kurallarını okur; biri farklı bir kalınlık ya da renk çizerse, ya da halkayı outline alt özellikleriyle veya bir gölgeyle (box-shadow) çizerse derleme durur.

  DerlemeHer değişiklikte derleme hattıyla korunur.

• Odak hiçbir zaman sabit üst menünün altında tamamen kaybolmaz.

  NedenWCAG 2.4.11. Klavye kullanıcısı sayfada odakla ilerler; odaktaki öğeyi örten bir menü, kullanıcının nerede olduğunu gizler. Test 3 sayfayı masaüstü genişliğinde gezer; ikinci bir test aynı sayfaları 390 piksel genişliğinde bir pencerede yeniden gezer.

  TestHer değişiklikte bir testle korunur.

• Odak halkası yalnızca kapsayıcıya taşındığı yerde kaldırılır.

  NedenKartın tamamı bağlantı olduğunda halka :focus-within ile karta geçer ve hedefin tamamını çevreler. Bir bileşen, :focus-within kuralı olmayan bir dosyada halkayı kaldırırsa bu sayfanın derlemesi durur.

  DerlemeHer değişiklikte derleme hattıyla korunur.

Metin iki sayfa zemininde de 4,5:1'e ulaşır ve anlam hiçbir zaman yalnızca renge dayanmaz. Bağlantıların altı çizilidir, duraklatma düğmesi biçim değiştirir, bu sayfalardaki yapın ve yapmayın işaretleri simgenin yanında bir kelime de taşır.

Paletin tamamı ve her tokenın hesaplanmış metin kontrastı Renk sayfasındadır. Bu bölüm erişilebilirliğin ona eklediklerini anlatır.

Metin dışı öğelerde kontrast

Odak halkaları, simgeler ve bir kontrol öğesini belli eden kenarlıklar arkalarındaki renge karşı 3:1 ister (WCAG 1.4.11). Vurgu rengi, ink-muted ve ink-subtle bunu sağlar; form alanları kenarlıklarını ink-subtle ile çizer. hair ve hair-2 tokenları sağlamaz: site ayırıcıları ve çerçeveleri onlarla çizer, duraklatma düğmesinin, çerçeveli düğmenin ve menü düğmesinin kenarlığını da.

Bu sayfa derlenirken tokens.css dosyasındaki tokenlardan WCAG 2.x formülüyle hesaplanır ve aşağı yuvarlanır. Duraklatma düğmesinin, çerçeveli düğmenin ya da menü düğmesinin tanınmak için kenarlığına ihtiyaç duyup duymadığı henüz incelenmedi; aşağıdaki boşluklar arasında listelenir.

Akan metindeki bağlantılar

Akan metinde bir bağlantıyı altındaki çizgi gösterir. Renk çizgiyi destekler, onun yerini tutmaz.

Durumu biçim ve kelime taşır.

Duraklatma düğmesi hareket sürerken iki çubuk, durunca bir üçgen gösterir; etiketi “Animasyonları duraklat” ile “Animasyonları oynat” arasında değişir. Bu sayfalardaki yapın ve yapmayın işaretleri bir onay ya da çarpı simgesini bir kelimeyle birlikte kullanır.

• Küçük metin hiçbir zaman 4,5:1'in altına düşmez.

  NedenWCAG 1.4.3. axe taranan her sayfadaki metni ölçer; metin tokenlarını iki zemine karşı ayrıca bir birim testi sabitler.

  TestHer değişiklikte bir testle korunur.

• Düz vurgu rengi metin dışı işler içindir: halkalar, alt çizgiler, çizgiler ve noktalar.

  NedenKâğıt üzerinde 4,38:1 ölçülür; küçük metnin istediği 4,5:1'in altındadır. Dolu düğmeler bunun yerine accent-deep kullanır; üzerindeki kâğıt renginde metin 6,65:1 ölçülür.

  İncelemeBir testle değil, incelemeyle korunur.

• Akan metindeki bir bağlantı yalnızca rengiyle ayrılmaz.

  NedenWCAG 1.4.1. axe, akan metindeki bir bağlantının rengi çevresindeki metinden 3:1'den az ayrışıyorsa ve alt çizgi gibi başka bir işareti yoksa onu yakalar.

  TestHer değişiklikte bir testle korunur.

Hareket, zaten orada olan içeriğin üstüne eklenir. Tek bir düğme bütün döngüleri durdurur, kimsenin görmediği döngü durur ve sisteminden daha az hareket isteyen kişi için hiçbir şey kıpırdamaz.

Eğriden kaydırma sahnelerine, hareketin nasıl kurulduğu Hareket sayfasındadır. Bu bölüm erişilebilirliğin hareketten istediklerini anlatır.

Duraklatma düğmesi

28 piksellik, yalnızca simgeli yuvarlak bir düğmedir ve etiketi “Animasyonları duraklat” ya da “Animasyonları oynat” olur: tek tıklama sayfadaki bütün döngüleri durdurur; tercih tarayıcıda zs-motion anahtarıyla saklanır, böylece bir sonraki sayfa da duraklatılmış açılır.

Görünmeyen döngü durur.

Görseli ekrandan çıktığında ya da sekme arka plana geçtiğinde döngü duraklar; site genelindeki duraklatma kararına da uyar.

Azaltılmış hareket

Sistem azaltılmış hareket istediğinde aşağıdaki blok yumuşak kaydırmayı kapatır, geçişleri neredeyse sıfıra indirir ve CSS animasyonlarını kaldırır; görseller doğrudan son hâllerine geçer.

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

• Hiçbir döngü, sayfada görünür bir duraklatma düğmesi olmadan çalışmaz.

  NedenWCAG 2.2.2. Tarayıcı bir sayfanın hareket edip etmediğini bilemez; bu yüzden her döngü başlarken data-ambient işaretini koyar, axe testindeki 2.2.2 kontrolü de görünür bir düğme arar. Ortak yaşam döngüsü bu işareti kendi çalıştırdığı döngülere koyar; gürültü tuvali, iki kaydırma sahnesinin bekleme hareketi ve giriş bölümündeki kaydırma işareti kendileri koyar. Bir bileşen bu işareti koymadan döngü kurarsa bu sayfanın derlemesi durur.

  TestHer değişiklikte bir testle korunur.

• Tek bir karar her sayfadaki bütün döngüleri duraklatır.

  NedenHareketi durdurmak her sayfada yeniden yapılacak bir iş olmamalı. Test ana sayfada duraklatır ve sonraki sayfayı duraklatılmış bulur.

  TestHer değişiklikte bir testle korunur.

• Görseli ekrandan çıkan döngü durur.

  NedenKimsenin görmediği hareket de pil ve işlemci harcar. Test Zero Door sayfasındaki baraj çizimini ekrandan çıkarır ve kartlarının durduğuna bakar.

  TestHer değişiklikte bir testle korunur.

• Azaltılmış harekette görseller son hâllerinde durur, düğme gizlenir.

  Nedenİstenen şey daha az hareket; basılacak bir düğme değil. Test Zero Door sayfasındaki görsellere bakar.

  TestHer değişiklikte bir testle korunur.

• Beş saniyeden kısa, bir kez oynayan animasyon düğme gerektirmez.

  NedenWCAG 2.2.2 yalnızca beş saniyeden uzun süren hareket için bir düğme ister. Kaydırınca görünüme giren bir blok, yerine bir kez 0,8 saniyede yükselir ve durur.

  İncelemeBir testle değil, incelemeyle korunur.

• Animasyonda saydamlık (opacity) kullanılmaz.

  NedenSolarken yarı saydamlıktan geçen metin kontrastı yolda kaybeder; otomatik kontrast kontrolleri bir kez tam da bu yüzden kırılmıştı. Öğeler bunun yerine transform, clip-path ya da çizgi çizimiyle girer.

  İncelemeBir testle değil, incelemeyle korunur.

Sunucu her sayfayı son, okunur hâliyle gönderir. Betikler hareketi bunun üstüne ekler; yalnızca ana sayfa açılışının ikinci bloğu bir betiği bekler, betik gecikirse de onu bir CSS kurtarması açar.

Her sayfa kök öğesinde no-js sınıfıyla başlar. Bir betik bu sınıfı kaldırır ve azaltılmış hareket istenmemişse motion sınıfını ekler. Canlanmadan önce bir şeyi gizleyen her durum, ana sayfa açılışının ikinci bloğu dışında, bu motion sınıfının altında yazılır; açılışın betiği gecikirse o bloğu bir CSS kurtarması açar. Betik çalışmazsa hiçbir içerik gizlenmez.

Betik çalışır ama gözlemci bir öğeyi hiç görmezse, bir güvenlik ağı 3 saniye sonra beliren bütün öğeleri görünür yapar.

JavaScript olmadan kaydırma sahneleri kartlarını alt alta dizer, duraklatma düğmeleri gizli kalır, sözlük tam listesini gösterir ve iletişim formu düz bir HTML formu olarak gönderilir.

• İçerik JavaScript olmadan da eksiksizdir.

  NedenBir betik yüklenmeyebilir, engellenebilir ya da hata verebilir. Sayfanın söylediği şey buna bağlı olmamalı. Bir tarayıcı testi, 404 sayfası dışında derlenen her sayfayı betikler kapalıyken açar: beliren her öğe son yerinde durmalı, ana içerikteki etiketli her görsel çizilmiş olmalı, gizlenmemeli ve kırpılıp kapatılmamalıdır. İkinci bir test ana sayfadaki kanıt sahnesine ayrıntılı bakar.

  TestHer değişiklikte bir testle korunur.

• İletişim formu JavaScript olmadan da çalışır.

  NedenTarayıcının kendi doğrulamasını kullanan gerçek bir HTML formudur; betik olsa da olmasa da aynı adrese gönderilir.

  TestHer değişiklikte bir testle korunur.

• Azaltılmış hareket hiçbir öğeyi yarı açık bırakmaz.

  NedenDaha az hareket isteyen kişi, betikler ne yaparsa yapsın içeriğin tamamını görür. Bir tarayıcı testi, 404 sayfası dışında derlenen her sayfayı azaltılmış hareket istenerek açar: beliren hiçbir öğe yerinden kaymış kalmaz, ana içerikteki etiketli her görsel çizilir, motion sınıfı eklenmez ve hiçbir döngü başlamaz. İkinci bir test, ana sayfada beliren her öğenin ayrıca tam opak olduğuna ve gizlenmediğine bakar.

  TestHer değişiklikte bir testle korunur.

Bir şey anlatan görsel, cümlesi olan bir resimdir: role=img ve sözlükten gelen, iki dilde yazılmış bir etiket. Yalnızca süsleyen görsel yardımcı teknolojiden gizlenir.

<figure class="fd" data-flow role="img" aria-label={d.label} tabindex="0">
  <svg viewBox="0 0 760 260" preserveAspectRatio="xMidYMid meet">

<span class="lbl"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3.5 8.5 6.5 11.5 12.5 4.5"></path></svg>{c.do}</span>

Etiket sahneyi izler.

Ana sayfadaki ve Zero Door sayfasındaki kaydırma sahneleri, anlamı adım adım değişen tek bir resimdir ve etiketi de onunla değişir. Ana sayfadaki sahnenin bu dildeki dört cümlesi şunlardır.

1. Sahne 1: iki eğri kesişir. Bir sunucudaki binlerce ham değişiklik tek bir alarma iner.
2. Sahne 2: takvim ızgarası. Örnek bir senaryoda on dört gün kanıt arama, ilk iki günün üzerinde iki günlük hedef senaryo.
3. Sahne 3: sinyal etiketleri tek karar etiketinde birleşir.
4. Sahne 4: bir sıra bellek bölgesi ve tek boşluk, arkasında dosya olmayan bölge.

Etiketler nasıl yazılır

Kullanımdaki etiketlerin birçoğu “Çizim:” ya da “Sahne N:” ile başlar, ardından neyin çizildiğini ve neyi gösterdiğini söyler. Yalnızca süs olan simgeler, işaretler, tuvaller, ayırıcılar ve oklar aria-hidden=true taşır. Ekranda sayarak artan rakamlar da böyle bir resmin içinde durur; ekran okuyucu sayımı değil, resmin cümlesini duyar.

• role=img taşıyan bir görsel etiketsiz yayına çıkmaz.

  NedenWCAG 1.1.1. axe adı olmayan bir resim rolünü kırar. Etiketler sözlükten gelir; İngilizce ve Türkçe cümleler yan yana durur.

  TestHer değişiklikte bir testle korunur.

• Sahne adım değiştirince etiketi de değişir.

  NedenEkran okuyucu kullanıcısı, gören bir okurun o adımda gördüğünü duyar.

  TestHer değişiklikte bir testle korunur.

• Sayan rakamlar yükselirken okunmaz.

  NedenHer değeri okumak gürültüdür. Zero Door çizimlerindeki sayaçlar cümlesi olan bir resmin içinde yükselir; ekran okuyucu onun yerine o cümleyi duyar. Güven merkezindeki taahhüt rakamları hiç saymaz: yükselirken sayaç, hiç söz verilmemiş değerler gösteriyordu.

  İncelemeBir testle değil, incelemeyle korunur.

• Süs, aria-hidden taşır.

  NedenAnlam taşımayan bir şekil, ekran okuyucuda yalnızca zaman alır.

  İncelemeBir testle değil, incelemeyle korunur.

Yeniden akış testi, 404 sayfası dahil derlenen her sayfayı 320 CSS piksel genişlikte açar ve hiçbiri yana kaymaz. Küçülemeyen tablolar, kodlar ve diyagramlar kendi kutularında kayar; kutu klavye odağı alır, böylece fare olmadan da kaydırılabilir.

WCAG 2.2, hedeflerin en az 24 × 24 CSS piksel olmasını ya da daha küçük bir hedefin çevresinde yeterli boşluk bırakılmasını ister. Sitenin kendi biçimlendirdiği kontrol öğeleri bu boyutu karşılar ya da aşar.

Bir istisnaya dayanan küçük hedefler

Akan metindeki bağlantılar satır içi istisnaya girer: boyutlarını çevrelerindeki metin satırı belirler. axe target-size onları ölçmez.

• Sitenin kendi biçimlendirdiği kontrol öğeleri WCAG 2.5.8 hedef boyutunu karşılar.

  NedenWCAG 2.5.8. axe target-size kuralını taranan her sayfada çalıştırır; Zero Door testi de ilk duraklatma düğmesini ayrıca ölçer.

  TestHer değişiklikte bir testle korunur.

Otomatik kontroller her şeyi kapsamaz. Bildiğimiz boşluklar aşağıda; bu sayfa arkasındaki testlerden daha büyük bir iddia gibi okunmasın diye listelenir.

Kısa, herkese açık beyan Güven merkezindedir; bu sayfa onun arkasındaki ayrıntıdır ve testleri eksiksiz listeler.

Sitede bir şey klavyenizle, tarayıcı ayarlarınızla ya da yardımcı teknolojinizle çalışmıyorsa iletişim formundan bize bildirin. Sayfayı ve ne yapmaya çalıştığınızı yazın; size dönüş yaparız.

Bir sorun bildirinGüven merkezindeki erişilebilirlik beyanı