Metin Girdileri

Düğme belirtiminde ad tek bir kaynaktan geliyordu ve değişmiyordu. Katalogun arama alanı ile ödünç alma formunun üye numarası alanı bu bakımdan farklıdır: ekranda alanın çevresinde dört ayrı metin durabilir — etiket, yardım metni, hata iletisi ve alanın içindeki yer tutucu. Dördü de göze aynı uzaklıkta görünür.

Erişilebilirlik ağacında ise dördü aynı yerde değildir. Biri alanın adı olur, biri ek açıklaması, biri her ikisinin dışında kalır ve biri de yanlış yazıldığında diğerlerinin üstüne biner. Bu ders o dağılımı hesaplar.

Alanın Çözdüğü Sorun

Metin girdisi, kullanıcının önceden sayılamayan bir değer yazdığı denetimdir: bir arama dizgisi, bir üye numarası, görevliye iletilecek bir not. Ölçüt sayılabilirliktir. Ödünç alma formundaki “ödünç süresi” alanı üç değer alabiliyorsa metin girdisi değildir; seçenekler sayılabildiğinde seçim denetimi ya da açılır liste kullanılır.

İkinci sınır biçimdir. Tarih, saat, renk ve dosya gibi değerlerin serbest metin olarak istenmesi, kullanıcıya biçimi tahmin ettirir ve doğrulama yükünü tümüyle koda bırakır. Bu değerler için tanımlı girdi türleri vardır.

Yerel Öge Önce

Karşılık input ögesidir; çok satırlı metin için textarea. type özniteliği alanın hem rolünü hem doğrulamasını belirler: search arama kutusu rolünü, email posta adresi denetimini, number alt–üst sınırlı sayı alanı rolünü, date tarih seçimini getirir.

Türün seçilmesi üç şeyi birden yapar. Erişilebilirlik ağacındaki rol değişir; tarayıcının yerleşik kısıt doğrulaması devreye girer; dokunmatik aygıtlarda alana uygun tuş takımı açılır. Üçü de ayrıca yazılmaz.

Bir alanın hangi kişisel veriyi topladığı ayrıca bildirilebilir. autocomplete özniteliği üye adı, adres ve posta adresi gibi alanlarda değerin amacını program yoluyla belirtir; 1.3.5 Girdi Amacını Belirleme ölçütünün karşılığı budur ve kullanıcının kendi verisini otomatik doldurmasını da sağlar.

Dört Metnin Ağaçtaki Yeri

Etiket alanın adıdır ve kalıcıdır. label ögesiyle yazılır; for özniteliği alanın kimliğine bağlanır ya da alan etiketin içine alınır.

Yardım metni biçim ya da kısıt bilgisidir: “Kart üzerindeki 8 haneli numara”. Alanın adı değildir, ek açıklamasıdır ve aria-describedby ile bağlanır. Ekranda alanın altında değil üstünde durması yeğlenir; alanın altındaki metin, alan doldurulurken açılan tuş takımının altında kalabilir.

Hata iletisi de bir ek açıklamadır ve aynı düzenekle bağlanır. Yardım metninin yerine değil, yanına yazılır.

Yer tutucu alanın içinde duran örnek değerdir ve alan doldurulduğunda kaybolur. Ad hesabında en son sıradadır: başka kaynak yoksa ada dönüşür. Bu, onun etiket yerine kullanılabileceği anlamına gelmez.

// girdi.mjs — metin girdisinde ad, ek aciklama ve durum bildirimlerinin hesabi

// Belgede metin tasiyan dugumler (label ve aria-describedby hedefleri)
const BELGE = {
  "uye-yardim": "Kart üzerindeki 8 haneli numara.",
  "uye-hata": "Üye numarası 8 hane olmalı.",
  "iade-yardim": "En çok 21 gün sonrası seçilebilir.",
  "label:ara": "Katalogda ara",
  "label:uye-no": "Üye numarası",
  "label:iade": "İade tarihi",
};

// Ad sirasi: aria-labelledby -> aria-label -> label ogesi -> title -> placeholder
function ad(a) {
  if (a["aria-labelledby"]) {
    const p = a["aria-labelledby"].split(" ").map((k) => BELGE[k]).filter(Boolean);
    if (p.length > 0) return [p.join(" "), "aria-labelledby"];
  }
  if (a["aria-label"]) return [a["aria-label"], "aria-label"];
  if (BELGE["label:" + a.id]) return [BELGE["label:" + a.id], "label ogesi"];
  if (a.title) return [a.title, "title (son care)"];
  if (a.placeholder) return [a.placeholder, "placeholder (son care)"];
  return ["", "ad yok"];
}

// Aciklama sirasi: aria-describedby -> title -> placeholder (ada gitmemisse)
function aciklama(a, adKaynagi) {
  if (a["aria-describedby"]) {
    const p = a["aria-describedby"].split(" ").map((k) => BELGE[k]).filter(Boolean);
    if (p.length > 0) return [p.join(" "), "aria-describedby"];
  }
  if (a.title && adKaynagi !== "title (son care)") return [a.title, "title"];
  if (a.placeholder && adKaynagi !== "placeholder (son care)") return [a.placeholder, "placeholder"];
  return ["", "aciklama yok"];
}

function durumlar(a) {
  const d = [];
  if (a.required || a["aria-required"] === "true") d.push("zorunlu");
  if (a["aria-invalid"] === "true") d.push("gecersiz");
  if (a.readonly) d.push("salt okunur");
  if (a.disabled) d.push("devre disi");
  return d.length ? d.join(", ") : "-";
}

// --- Katalog arama alani ve odunc alma formu alanlari -----------------------
const ALANLAR = [
  ["etiket + yer tutucu",
   { id: "ara", type: "search", placeholder: "başlık, yazar ya da ISBN" }],
  ["yalniz yer tutucu",
   { id: "ara-2", type: "search", placeholder: "başlık, yazar ya da ISBN" }],
  ["etiket + yardim metni",
   { id: "uye-no", required: true, "aria-describedby": "uye-yardim" }],
  ["hata yardimin yerine",
   { id: "uye-no", required: true, "aria-invalid": "true", "aria-describedby": "uye-hata" }],
  ["hata yardima eklendi",
   { id: "uye-no", required: true, "aria-invalid": "true",
     "aria-describedby": "uye-yardim uye-hata" }],
  ["hata bagi kopuk",
   { id: "uye-no", required: true, "aria-invalid": "true",
     "aria-describedby": "uye-yardim uye-hata-2" }],
  ["tarih, etiket + yardim",
   { id: "iade", type: "date", "aria-describedby": "iade-yardim" }],
  ["yalniz title",
   { id: "not", title: "Görevliye iletilecek not" }],
  ["aria-label etiketi bastiriyor",
   { id: "uye-no", "aria-label": "Numara" }],
];

const G = 31;   // alan sutunu genisligi

console.log("alan".padEnd(G) + "erisilebilir ad".padEnd(28) + "ad kaynagi".padEnd(24) + "durum");
for (const [baslik, a] of ALANLAR) {
  const [n, k] = ad(a);
  console.log(baslik.padEnd(G) + (n === "" ? "(bos)" : '"' + n + '"').padEnd(28) +
    k.padEnd(24) + durumlar(a));
}

console.log("\n" + "alan".padEnd(G) + "ek aciklama".padEnd(64) + "kaynak");
for (const [baslik, a] of ALANLAR) {
  const [, k] = ad(a);
  const [c, ck] = aciklama(a, k);
  console.log(baslik.padEnd(G) + (c === "" ? "(bos)" : '"' + c + '"').padEnd(64) + ck);
}

// --- Kural denetimi ---------------------------------------------------------
const GORUNEN = { ara: "Katalogda ara", "uye-no": "Üye numarası", iade: "İade tarihi" };

console.log("\nkural denetimi:");
let bulgu = 0;
for (const [baslik, a] of ALANLAR) {
  const [n, k] = ad(a);
  const [c] = aciklama(a, k);
  const b = [];
  if (n === "") b.push("alan adsiz");
  if (k.includes("son care")) b.push("ad son care kaynaktan geliyor, kalici etiket yok");
  const gorunen = GORUNEN[a.id];
  if (gorunen && n && !n.toLocaleLowerCase("tr").includes(gorunen.toLocaleLowerCase("tr")))
    b.push(`gorunen etiket ("${gorunen}") erisilebilir adin icinde yok`);
  if (a["aria-describedby"]) {
    const kopuk = a["aria-describedby"].split(" ").filter((x) => !BELGE[x]);
    if (kopuk.length) b.push("kopuk basvuru: " + kopuk.join(", "));
  }
  if (a["aria-invalid"] === "true" && !c.includes(BELGE["uye-hata"]))
    b.push("gecersiz alan, hata iletisi aciklamaya girmiyor");
  if (a["aria-invalid"] === "true" && a["aria-describedby"] &&
      !a["aria-describedby"].split(" ").includes("uye-yardim"))
    b.push("hata bildirimi yardim metnini bastirdi");
  for (const x of b) { bulgu++; console.log("  " + baslik.padEnd(G) + x); }
}
console.log(`\n${ALANLAR.length} alanda ${bulgu} bulgu`);

alan                           erisilebilir ad             ad kaynagi              durum
etiket + yer tutucu            "Katalogda ara"             label ogesi             -
yalniz yer tutucu              "başlık, yazar ya da ISBN"  placeholder (son care)  -
etiket + yardim metni          "Üye numarası"              label ogesi             zorunlu
hata yardimin yerine           "Üye numarası"              label ogesi             zorunlu, gecersiz
hata yardima eklendi           "Üye numarası"              label ogesi             zorunlu, gecersiz
hata bagi kopuk                "Üye numarası"              label ogesi             zorunlu, gecersiz
tarih, etiket + yardim         "İade tarihi"               label ogesi             -
yalniz title                   "Görevliye iletilecek not"  title (son care)        -
aria-label etiketi bastiriyor  "Numara"                    aria-label              -

alan                           ek aciklama                                                     kaynak
etiket + yer tutucu            "başlık, yazar ya da ISBN"                                      placeholder
yalniz yer tutucu              (bos)                                                           aciklama yok
etiket + yardim metni          "Kart üzerindeki 8 haneli numara."                              aria-describedby
hata yardimin yerine           "Üye numarası 8 hane olmalı."                                   aria-describedby
hata yardima eklendi           "Kart üzerindeki 8 haneli numara. Üye numarası 8 hane olmalı."  aria-describedby
hata bagi kopuk                "Kart üzerindeki 8 haneli numara."                              aria-describedby
tarih, etiket + yardim         "En çok 21 gün sonrası seçilebilir."                            aria-describedby
yalniz title                   (bos)                                                           aciklama yok
aria-label etiketi bastiriyor  (bos)                                                           aciklama yok

kural denetimi:
  yalniz yer tutucu              ad son care kaynaktan geliyor, kalici etiket yok
  hata yardimin yerine           hata bildirimi yardim metnini bastirdi
  hata bagi kopuk                kopuk basvuru: uye-hata-2
  hata bagi kopuk                gecersiz alan, hata iletisi aciklamaya girmiyor
  yalniz title                   ad son care kaynaktan geliyor, kalici etiket yok
  aria-label etiketi bastiriyor  gorunen etiket ("Üye numarası") erisilebilir adin icinde yok

9 alanda 6 bulgu

Bulguların Okunması

Yer tutucu ada dönüşür ama ada dönüşmesi yetmez. İkinci satırda arama alanının adı “başlık, yazar ya da ISBN” oluyor. Hesap bunu kabul ediyor, otomatik denetleyici de bir varlık kuralı ihlali görmüyor. Kusur başka yerdedir: kullanıcı alana yazmaya başladığında ad ekrandan silinir ve alanın ne istediği görünmez kalır. Birinci satır doğru düzeni gösteriyor — etiket adı, yer tutucu ek açıklamayı taşıyor ve ikisi de kendi işini yapıyor.

Hata iletisi yardım metnini bastırabilir. Dördüncü satırda aria-describedby değeri yardım metninin kimliğiyle değiştirilmiş. Alanın açıklaması artık yalnızca hata iletisi: kullanıcı hatayı duyuyor ama “8 haneli” bilgisini kaybediyor. Beşinci satır doğru işlemi gösteriyor — kimlik listesine eklenir, listede iki kimlik birden durur ve açıklama iki metnin birleşimi olur. Bu, aria-describedby özniteliğinin boşlukla ayrılmış bir kimlik listesi olmasının doğrudan sonucudur.

Kopuk başvuru sessizce düşer. Altıncı satırda hata düğümünün kimliği yanlış yazılmış. Hesap o kimliği atlıyor ve açıklama yalnızca yardım metninden geliyor: alan geçersiz olarak bildiriliyor, ama nedeni hiçbir yerde duyurulmuyor. Bu, denetimin en değerli bulgusudur, çünkü ekranda hata iletisi görünür durumdadır ve gözle bakan biri kusuru göremez.

Ad bildirimi görünen etiketi bastırır. Son satırda alanın label ögesi “Üye numarası” diyor, aria-label bildirimi “Numara”. 2.5.3 Ad Etikette ölçütü, görünen etiket metninin erişilebilir adın içinde geçmesini ister; burada geçmiyor.

Klavye Sözleşmesi

Tuş	Davranış
Tab	Odağı alana getirir; alan tek bir sekme durağıdır.
Yazı tuşları	Değeri değiştirir.
Home / End	İmleci satırın başına ve sonuna taşır.
Ok tuşları	İmleci metin içinde hareket ettirir.
Enter	Tek metin alanı bulunan bir formda örtük gönderim yapar.

Sözleşmenin asıl kısıtı, alanın hangi tuşları yakalamayacağıdır. Ok tuşları, Home, End ve Backspace metin düzenlemeye aittir; alanı içeren bir bileşen bu tuşları kendi gezinmesi için kullanamaz. Bu kısıt açılır liste ve menü kalıplarında bağlayıcıdır: arama alanına bağlı bir öneri listesi ok tuşlarını kullanacaksa, imlecin metin içinde hareket etmesi gereken durumlarda tuşu alana bırakmak zorundadır.

Ayrıca alanın odağını program yoluyla ele geçirmek — sayfa yüklenince arama alanına odaklanmak — klavye kullanıcısını sayfanın başındaki gezinmeden koparır. Odak, kullanıcının başlattığı bir eylemden sonra taşınır.

Ölçülebilir Kısıtlar

3.3.2 Etiketler ve Yönergeler, kullanıcıdan girdi isteyen her alanda etiketin ya da yönergenin sağlanmasını ister. Yer tutucunun etiket yerine geçmemesinin ölçüt karşılığı budur.

1.4.3 En Az Karşıtlık yer tutucu metnini de kapsar: yer tutucu, alan yüzeyiyle en az 4.5:1 kontrast oranı taşımalıdır. Yer tutucunun soluklaştırılması yaygın bir tasarım tercihidir ve ölçütü doğrudan kaldırır.

1.4.11 Metin Dışı Kontrast, alanın kenarlığını kapsar: alanın nerede başlayıp bittiğini gösteren sınır, sayfa yüzeyinden en az 3:1 ile ayrılmalıdır. Yalnızca alt çizgiyle kurulan alanlarda bu ölçü tek kenar üzerinden hesaplanır.

1.4.4 Metin Boyutlandırma, metnin yüzde iki yüze kadar büyütülebilmesini ister; sabit yükseklikli bir alan kutusu bu ölçekte metni keser.

3.3.1 Hata Belirleme, hatanın metinle bildirilmesini ister. Kırmızı kenarlık tek başına bir bildirim değildir; aria-invalid durumu ve bağlı hata iletisi bildirimin kendisidir.

Sık Yapılan Hata

Etiketin görsel olarak kaldırılıp yer tutucuya taşınması. Saptaması, denetimin ikinci satırıdır: adın kaynağı “son çare” olarak işaretlenen her alan bu durumdadır. Etiket gerçekten görünmemeliyse — sonuç tablosunun üstündeki tek başına duran arama alanı gibi — ögenin kendisi belgede kalır ve yalnızca ekrandan gizlenir; ağaçtan silinmez.

Hata iletisinin yalnızca ekranda gösterilmesi. Alanın altına eklenen bir metin düğümü, aria-describedby bağı kurulmadıkça ağaçta alana bağlı değildir. Saptaması, geçersiz olarak işaretlenen her alanın açıklamasının hata metnini içerip içermediğinin denetlenmesidir; denetimin son iki kuralı bunu yapar.

Zorunluluğun yalnızca yıldız işaretiyle bildirilmesi. Etiketin yanındaki yıldız görsel bir imdir; ağaçta zorunluluk required özniteliğinden gelir. Yıldızın ne anlama geldiği ayrıca yazılmalı, öznitelik ise her koşulda bulunmalıdır.

Özet

• Metin girdisi, değerin önceden sayılamadığı durumlarda kullanılır; sayılabilen değerler için seçim denetimi ya da açılır liste seçilir.
• type özniteliği rolü, yerleşik doğrulamayı ve dokunmatik tuş takımını birlikte belirler; autocomplete alanın girdi amacını program yoluyla bildirir.
• Etiket ada, yardım metni ve hata iletisi ek açıklamaya gider; aria-describedby bir kimlik listesidir ve hata iletisi yardım metninin yerine değil yanına eklenir.
• Yer tutucu ad hesabının son sırasındadır; ada dönüşmesi onu etiket yapmaz, çünkü alan doldurulduğunda ekrandan silinir.
• Kopuk bir kimlik başvurusu sessizce düşer ve alan gerekçesiz biçimde geçersiz görünür; denetim bunu ekranda görünen hata iletisine rağmen yakalar.
• Ok tuşları, Home ve End metin düzenlemeye aittir; alanı içeren bileşen bu tuşları kendi gezinmesi için kullanamaz.

Sonraki Adım

Metin girdisi tek bir değer taşır ve o değerin adı alanın adıdır. Ödünç alma formundaki “Bildirim yöntemi” seçenekleri ise üç ayrı denetimden oluşur ve üçünün ortak bir sorusu vardır: “Bildirim nasıl gönderilsin?” Bu soru hiçbir denetimin adı değildir, grubun adıdır. Sonraki ders onay kutusu, radyo düğmesi ve anahtarı ele alır: grubun nasıl adlandırıldığını, üç denetimin hangi durum bildirimini taşıdığını ve neden yalnızca birinin klavye sözleşmesinde ok tuşları bulunduğunu belirtir.