Erişilebilirlik Testi

Önceki derslerin denetimlerinin çoğu bir betikle çalıştı: erişilebilir ad hesabı, sekme sırası, düzlem kusurları ve kontrast oranları girdi verilip çıktı alınan hesaplardı. Bu, kaçınılmaz bir soruyu getirir. Erişilebilirliğin ne kadarı bir programa yaptırılabilir ve geriye ne kalır?

Sorunun yanıtı iki sayıdır ve ikisi de bu derste hesaplanacak: ölçütlerin ne kadarının makinece karar verilebildiği, ve bir arayüzdeki gerçek kusurların ne kadarının otomatik denetimle bulunduğu. İki sayı birbirinden farklıdır ve ikincisi daha önemlidir.

Otomatik Denetleyici Ne Yapar

Bir otomatik erişilebilirlik denetleyicisi, çizilmiş belgeyi ve ondan türetilen erişilebilirlik ağacını okur, hesaplanmış biçem değerlerine bakar ve bir kural kümesini uygular. Uygulayabildiği kurallar dört sınıfa girer.

Varlık kuralları. Bir bildirimin bulunup bulunmadığına bakar: görselde alternatif metin özniteliği var mı, etkileşimli ögenin erişilebilir adı boş mu, belgede dil bildirimi var mı.

Biçim geçerliliği kuralları. Yazılan bildirimin tanımlı olup olmadığına bakar: rol adı tanımlı bir rol mü, kullanılan durum o rolde geçerli mi, aria-labelledby var olan bir kimliğe mi başvuruyor, aynı kimlik belgede iki kez mi geçiyor.

Hesaplanabilir değer kuralları. Sayısal bir eşiği doğrudan hesaplar: düz renkli iki katman arasındaki kontrast oranı, tabindex değerlerinden türeyen sekme sırası, dokunma hedefinin boyutu.

Teklik ve tutarlılık kuralları. Belge ölçeğinde sayar: birden çok main yer imi var mı, başlık düzeyleri atlanmış mı, aynı türden adsız yer imi birden fazla mı.

Bu dört sınıfın ortak özelliği, kararın belgeden okunabilir olmasıdır. Kararın niyete, anlama ya da zaman içindeki bir etkileşim dizisine bağlı olduğu yerde kural yazılamaz.

Ölçütler ve Bulgular

Aşağıdaki betik iki hesabı birlikte yapıyor: ölçütlerin otomatikleştirilebilirlik dağılımı ve önceki derslerde Kuzey Yamaç arayüzünde bulunan gerçek kusurlarda otomatik denetimin bulma oranı.

// kapsam.mjs — olcutlerin otomatiklestirilebilirlik siniflari ve gercek bulgularda kapsam

// sinif: "otomatik" (makinece kararlanabilir) | "kismi" (bir bolumu) | "elle"
const OLCUT = [
  ["1.1.1", "Metin Olmayan İçerik", "kismi"],
  ["1.3.1", "Bilgi ve İlişkiler", "kismi"],
  ["1.3.5", "Girdi Amacının Belirlenmesi", "kismi"],
  ["1.4.1", "Renk Kullanımı", "elle"],
  ["1.4.3", "Kontrast (En Az)", "kismi"],
  ["1.4.4", "Metnin Yeniden Boyutlandırılması", "elle"],
  ["1.4.11", "Metin Dışı Kontrast", "kismi"],
  ["1.4.12", "Metin Aralığı", "kismi"],
  ["2.1.1", "Klavye", "elle"],
  ["2.1.2", "Klavye Tuzağı Yok", "elle"],
  ["2.4.1", "Blokları Atlama", "kismi"],
  ["2.4.2", "Sayfa Başlığı", "otomatik"],
  ["2.4.3", "Odak Sırası", "elle"],
  ["2.4.4", "Bağlantı Amacı", "kismi"],
  ["2.4.6", "Başlıklar ve Etiketler", "elle"],
  ["2.4.7", "Odak Görünür", "kismi"],
  ["2.5.3", "Addaki Etiket", "kismi"],
  ["3.1.1", "Sayfanın Dili", "otomatik"],
  ["3.2.2", "Girdide Değişim", "elle"],
  ["3.3.1", "Hata Tanımlama", "kismi"],
  ["3.3.2", "Etiketler veya Yönergeler", "kismi"],
  ["4.1.2", "Ad, Rol, Değer", "kismi"],
  ["4.1.3", "Durum İletileri", "elle"],
];

const sayim = {};
for (const [, , s] of OLCUT) sayim[s] = (sayim[s] ?? 0) + 1;
console.log("olcut sinifi  sayi  oran");
for (const s of ["otomatik", "kismi", "elle"]) {
  console.log(`${s.padEnd(13)} ${String(sayim[s]).padStart(4)}  ${((100 * sayim[s]) / OLCUT.length).toFixed(1)}%`);
}
console.log(`toplam        ${String(OLCUT.length).padStart(4)}`);

// Kuzey Yamac arayuzunde onceki derslerde bulunan gercek kusurlar
// [bulgu, olcut, otomatik denetleyici yakalar mi]
const BULGU = [
  ["simge dugmesinde bos alternatif metin", "4.1.2", true],
  ["aria-labelledby gecersiz kimlige basvuruyor", "4.1.2", true],
  ["aria-label gorunen etiketi bastiriyor", "2.5.3", true],
  ["role=button odak almiyor", "2.1.1", true],
  ["odaklanabilir oge aria-hidden tasiyor", "4.1.2", true],
  ["veri tablosunda role=presentation", "1.3.1", false],
  ["arti tabindex degeri", "2.4.3", true],
  ["odak sirasi gorsel sirayla uyusmuyor", "2.4.3", false],
  ["pencereden klavyeyle cikilamiyor", "2.1.2", false],
  ["pencere kapaninca odak donmuyor", "2.4.3", false],
  ["adsiz ikinci gezinme yer imi", "1.3.1", true],
  ["baslik duzeyi atlanmis", "1.3.1", true],
  ["baglamdan kopuk baglanti metni", "2.4.4", true],
  ["ayni metin iki farkli hedefe gidiyor", "2.4.4", false],
  ["atilgan duyuru bekleyeni atiyor", "4.1.3", false],
  ["alan kenarligi 3:1 esiginin altinda", "1.4.11", false],
  ["metin kontrasti 4.5:1 esiginin altinda", "1.4.3", true],
  ["nitelik yalniz renkle bildiriliyor", "1.4.1", false],
];

const yakalanan = BULGU.filter(([, , y]) => y).length;
console.log(`\ntoplam bulgu: ${BULGU.length}, otomatik yakalanan: ${yakalanan}, kacan: ${BULGU.length - yakalanan}`);
console.log(`otomatik denetimin bulma orani: ${((100 * yakalanan) / BULGU.length).toFixed(1)}%`);

console.log("\notomatik denetimin kacirdiklari:");
for (const [b, o, y] of BULGU) {
  if (!y) console.log(`  ${o.padEnd(7)} ${b}`);
}

// Kacanlarin hangi elle sinamayla bulundugu
const SINAMA = {
  "veri tablosunda role=presentation": "isaretleme okumasi",
  "odak sirasi gorsel sirayla uyusmuyor": "klavye turu",
  "pencereden klavyeyle cikilamiyor": "klavye turu",
  "pencere kapaninca odak donmuyor": "klavye turu",
  "ayni metin iki farkli hedefe gidiyor": "duzlem incelemesi",
  "atilgan duyuru bekleyeni atiyor": "gorev denemesi",
  "alan kenarligi 3:1 esiginin altinda": "durum dizgesi denetimi",
  "nitelik yalniz renkle bildiriliyor": "renksiz goruntu sinamasi",
};
const sinamaSayim = {};
for (const [b, , y] of BULGU) {
  if (y) continue;
  const s = SINAMA[b];
  sinamaSayim[s] = (sinamaSayim[s] ?? 0) + 1;
}
console.log("\nkacanlari bulan elle sinamalar:");
for (const [s, n] of Object.entries(sinamaSayim).sort((a, b) => b[1] - a[1])) {
  console.log(`  ${s.padEnd(26)} ${n} bulgu`);
}

olcut sinifi  sayi  oran
otomatik         2  8.7%
kismi           13  56.5%
elle             8  34.8%
toplam          23

toplam bulgu: 18, otomatik yakalanan: 10, kacan: 8
otomatik denetimin bulma orani: 55.6%

otomatik denetimin kacirdiklari:
  1.3.1   veri tablosunda role=presentation
  2.4.3   odak sirasi gorsel sirayla uyusmuyor
  2.1.2   pencereden klavyeyle cikilamiyor
  2.4.3   pencere kapaninca odak donmuyor
  2.4.4   ayni metin iki farkli hedefe gidiyor
  4.1.3   atilgan duyuru bekleyeni atiyor
  1.4.11  alan kenarligi 3:1 esiginin altinda
  1.4.1   nitelik yalniz renkle bildiriliyor

kacanlari bulan elle sinamalar:
  klavye turu                3 bulgu
  isaretleme okumasi         1 bulgu
  duzlem incelemesi          1 bulgu
  gorev denemesi             1 bulgu
  durum dizgesi denetimi     1 bulgu
  renksiz goruntu sinamasi   1 bulgu

İlk tablo ölçüt tarafını veriyor: yirmi üç ölçütün yalnızca ikisi baştan sona makinece karar verilebiliyor. Çoğunluk kısmi sınıftadır ve bu sınıfın anlamı yanlış okunmaya açıktır. Kısmi olan bir ölçütte otomatik denetim yalnızca başarısızlık bildirebilir; başarı bildiremez. Alternatif metin özniteliğinin bulunması 1.1.1 ölçütünün karşılandığını göstermez, yalnızca özniteliğin var olduğunu gösterir.

İkinci tablo daha somut olanıdır: bu kurstaki altı derste bulunan on sekiz gerçek kusurdan onu otomatik denetimle yakalanıyor, sekizi kaçıyor. Oran arayüze göre değişir; sabit olan, kaçanların hangi türden olduğudur.

Kaçanların Ortak Özelliği

Kaçan sekiz bulgu üç kümeye ayrılıyor ve üçü de yapısal olarak otomatikleştirilemez.

Anlam kararı gerektirenler. Bir tablonun veri mi taşıdığı yoksa düzen amaçlı mı olduğu belgeden okunamaz; sunumsal rol yazılmış bir tabloda denetleyici yazarın niyetini bilemez. Aynı metnin iki farklı hedefe gitmesi de böyledir: iki bağlantı ayrı şeylere gidiyorsa kusur, aynı şeyin iki kopyasına gidiyorsa değil.

Zaman içinde bir dizi gerektirenler. Klavye tuzağı, pencere kapandığında odağın dönmemesi ve atılgan duyurunun bekleyeni atması tek bir belge durumuna bakılarak görülemez; bir etkileşim dizisi çalıştırılmadan ortaya çıkmaz. Bunlar denetlenebilir — Klavye Erişimi dersindeki durum makinesi tam olarak bunu yaptı— ama denetlenmeleri için bileşenin davranışının modellenmesi ya da gerçek bir akışın yürütülmesi gerekir.

Çizim sonucuna bağlı olanlar. Kenarlığın karşıtlığı, gölge ve saydamlık katmanları altında ölçüldüğünde iki düz rengin oranı olmaktan çıkar; geçiş dolgusu ya da görsel üzerindeki metinde tek bir kontrast değeri yoktur. Rengin tek kanal olup olmadığı ise bilginin hangi kanallarla verildiği sorusudur ve belgede bir bildirim olarak durmaz.

Elle Doğrulamanın Sırası

Elle doğrulama, sınırsız bir gözden geçirme değildir; maliyete göre sıralanmış beş adımdır. Sıralama, önce ucuz olanın çok bulgu üretmesine dayanır.

Klavye turu. Sekme tuşuyla sayfanın başından sonuna gidilir. Dört şeye bakılır: her durakta odak görünüyor mu, sıra ekrandaki sırayla uyuşuyor mu, açılan her bileşenden klavyeyle çıkılabiliyor mu, kapanışta odak nereye dönüyor. Kaçan sekiz bulgunun üçünü tek başına bu adım buluyor ve hiçbir araç gerektirmiyor.

Ölçekleme sınaması. Metin iki katına büyütülür ve arayüz aynı görevle kullanılmaya çalışılır. Kırpılan metin, üst üste binen kutu ve kaybolan denetim bu adımda görünür.

İşaretleme okuması. Bileşenin ürettiği işaretleme okunur: rol doğru mu, durum güncelleniyor mu, ad hangi kaynaktan geliyor. Bu adım anlam kararı gerektiren kusurları bulur.

Düzlem incelemesi. Yer imi listesi, başlık ana hattı ve bağlantı listesi ayrı ayrı çıkarılıp okunur. Liste bağlamından koparılmış hâliyle anlaşılıyor mu?

Görev denemesi. Arayüz görmeden ve fare kullanmadan bir görev uçtan uca tamamlanır — ölçüm listesini süzmek, bir düzeltme bildirmek, sonucu doğrulamak. Bu en pahalı adımdır ve diğer dördünün bulamadığını bulur: bilginin yeterli olup olmadığını.

Testi Sürece Bağlamak

Tek seferlik bir denetim, bir sonraki değişiklikte geçersizleşir. Denetimin sürece bağlanma yolu üç katmanlıdır.

Bileşen ölçeğinde, bir bileşenin ürettiği rol ve erişilebilir ad bir sınamayla sabitlenir: bileşen çizildiğinde ağaçta düğme rolü ve beklenen ad bulunmalıdır. Bu sınamalar işaretleme yapısına değil, ağaçtaki karşılığa bakar; bileşenin içi yeniden yazıldığında da geçerli kalır. Aynı yaklaşım Test ve İzleme konusundaki kullanıcı merkezli sorguların temelidir.

Sayfa ölçeğinde, otomatik denetleyici yayın öncesi çalıştırılır ve bulduğu her başarısızlık yayını durdurur. Erişilebilirlik Standartları dersindeki bütçe biçimi burada işler: karşılanmamış A ve AA ölçüt sayısı sıfır olmalıdır, bilinen istisnalar ölçüt numarası ve tarihle açık bir listede durur.

Sürüm ölçeğinde, elle doğrulamanın beş adımı her yayında değil, arayüzün değişen bölümlerinde uygulanır. Yeni bir bileşen eklendiğinde klavye turu ve işaretleme okuması zorunludur; görev denemesi daha seyrek yapılır.

Sıfır Hatanın Anlamı

Otomatik denetimin hiçbir bulgu üretmemesi, arayüzün erişilebilir olduğunu göstermez. Bu cümle bu dersin sonucudur ve iki yönü vardır.

Birincisi, hesaplanan oran: bu arayüzde bulguların yüzde 55.6’sı yakalandı, kalanı yakalanmadı. İkincisi, denetleyicinin yanlış alarm de üretebilmesidir. Bir geçiş dolgusu üzerindeki metin, tek bir zemin rengi varsayılarak eşiğin altında bildirilebilir; doğru kurulmuş bir bileşen, tanımadığı bir örüntü nedeniyle işaretlenebilir. Her bulgunun insan tarafından doğrulanması gerekir.

Otomatik denetimin değeri, gerileme yakalamasındadır. Bir kez düzeltilmiş bir kusurun geri gelmesini ucuza engeller ve elle doğrulamanın zamanını, yalnızca elle bulunabilecek kusurlara ayırır.

Özet

• Otomatik denetleyici dört sınıf kural uygular: varlık, biçim geçerliliği, hesaplanabilir değer ve teklik–tutarlılık; hepsinde karar belgeden okunabilir olmalıdır.
• Ölçütlerin çoğunluğu kısmi sınıftadır ve kısmi ölçütlerde otomatik denetim yalnızca başarısızlık bildirebilir, başarı bildiremez.
• Bu kursta bulunan on sekiz gerçek kusurun onu otomatik yakalanıyor, sekizi kaçıyor; kaçanlar anlam kararı, zaman içinde bir dizi ya da çizim sonucu gerektirenlerdir.
• Elle doğrulama maliyete göre sıralanır: klavye turu, ölçekleme sınaması, işaretleme okuması, düzlem incelemesi ve görev denemesi.
• Denetim üç ölçekte sürece bağlanır: bileşende rol ve ad sınaması, sayfada yayını durduran otomatik denetim, sürümde elle doğrulamanın değişen bölümlere uygulanması.
• Otomatik denetimin sıfır bulgu üretmesi uygunluk kanıtı değildir; denetleyici yanlış bildirim de üretir ve asıl değeri gerileme yakalamaktır.

Sonraki Adım

Kalitenin iki ekseni bu noktada ölçülebilir hâle geldi. Başarım bir bütçeye, erişilebilirlik bir ölçüt kümesine bağlandı; ikisi de sayılıyor ve ikisi de gerileme tanımı taşıyor. Üçüncü bir eksen kaldı ve öncekilerden farklı bir soru soruyor.

Erişilebilirlik, arayüzün taşıdığı bilginin kullanıcıya ulaşmasını sağlar. Sonraki konu ters yöndeki akışı ele alır: kullanıcıdan gelen metnin arayüze girmesini. Ölçüm giriş formundaki açıklama alanına yazılan metin, ölçüm listesinde başkalarına gösterilir. O metin sayfaya yazıldığında veri olarak mı yoksa kod olarak mı işlenir? Ayrımın kaybolduğu yerde kullanıcıyı arayüzün kendisinden korumak gerekir. İstemci Tarafı Güvenlik konusunun ilk dersi, Siteler Arası Betik Çalıştırma, bu ayrımın nasıl kaybolduğunu ve çıktı kaçırmanın onu nasıl geri kurduğunu ele alır.