--- title: 'Metin Girdileri' source: 'https://academia.sh/tr/kurslar/erisilebilir-kaliplar/metin-girdileri' course: 'Erişilebilir Bileşen Kalıpları' language: tr updated: '2026-08-17T18:09:33+00:00' license: 'CC BY-SA 4.0' --- # Metin Girdileri Etiket, yardım metni, hata iletisi ve yer tutucunun erişilebilirlik ağacındaki ayrı yerleri; ad ve ek açıklamanın hesabı, hata bağının denetimi ve alanın klavye sözleşmesi. 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. ```js // 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.