${alan.ipucu}
`); if (hata) satirlar.push(`${ILETILER[hata.kod](hata.param)}
`); return satirlar.join("\n"); } function ozet(hatalar) { // Ozet, hatalarin saptanma sirasina gore degil belgedeki alan sirasina gore dizilir. const sirali = ALANLAR .map((a) => [a, hatalar.find((h) => h.yol === a.ad)]) .filter(([, h]) => h); const maddeler = sirali.map(([a, h]) => `Gün-ay-yıl biçiminde.
Ölçüm tarihi gelecekte olamaz.
Santigrat derece.
-60 ile 60 arasında bir değer girin.
hata sayısı : 2 odak hedefi : #hata-ozeti tek hata olsaydı: #alan-tarih ``` Üretilen işaretlemede dört karar görünür. **Ek açıklama listesi hem ipucunu hem hatayı taşır.** Hata çıktığında ipucunun listeden düşürülmesi sık yapılan bir yanlıştır; kullanıcı hatayı duyar ama beklenen biçimi öğrenemez. İkisi birlikte kalır ve ipucu önce okunur. **Geçersizlik ayrıca bildirilir.** İletinin okunması, alanın geçersiz olduğunun bildirilmesiyle aynı şey değildir. `aria-invalid="true"` alanın durumunu erişilebilirlik ağacına yazar; ileti metniyle birlikte kullanılır, onun yerine geçmez. Aynı işi yapan bir başka öznitelik daha vardır — hata iletisini doğrudan gösteren `aria-errormessage` — ancak o yalnız geçersizlik bildirimi verildiğinde anlam taşır; ek açıklama bağı ise her durumda işler. Sağlam yol, ek açıklama bağını temel almaktır. **Hatası olmayan alanda hiçbir öznitelik bulunmaz.** İlk ve son alanda `aria-invalid` yazılmamış; alan geçerliyken `aria-invalid="false"` yazmak da doğrudur ama gereksizdir. Önemli olan, hata düzeldiğinde özniteliğin **kaldırılmasıdır**; kalırsa kullanıcı düzelmiş bir alanı geçersiz duyar. **Özet belge sırasına göre dizilir.** Şemadan gelen hata listesi `deger` ile başlıyordu, özette `tarih` önce geldi. Kullanıcı özetteki maddelere yukarıdan aşağıya baktığında formda da yukarıdan aşağıya ilerlemelidir; saptanma sırası bir uygulama ayrıntısıdır ve ekrana sızmamalıdır. ## Özet Kutusu ve Odağın Taşınması Gönderim reddedildiğinde kullanıcı iki şeyi bilmelidir: gönderimin gerçekleşmediğini ve neyin düzeltileceğini. Sayfanın hiçbir yeri değişmemiş gibi görünüyorsa — özellikle uzun bir formda, hatalar ekranın dışında kaldıysa — kullanıcı düğmenin çalışmadığını sanır. **Hata özeti** formun başında durur, hata sayısını söyler ve her maddesi ilgili alana bağlantı verir. Bağlantı olması önemlidir: klavyeyle gezen kullanıcı maddeyi seçip doğrudan alana gider. Madde metni, alanın etiketini ve iletiyi birlikte taşır; yalnız ileti yazıldığında hangi alandan söz edildiği anlaşılmaz. **Odak** özet kutusuna taşınır. Kutunun odaklanabilir olması için sekme sırasına girmeyen bir odak hedefi olarak işaretlenmesi gerekir — çıktıdaki `tabindex="-1"` bunu yapar; öge programla odaklanabilir ama sekme turuna katılmaz. Hata sayısına göre iki davranış ayrılır. Tek hata varsa odağı doğrudan o alana taşımak kullanıcıyı bir adım öne alır. Birden çok hata varsa özet kutusuna taşımak, kullanıcıya önce durumun tamamını verir. Çıktının son üç satırı bu kararı hesaplıyor. Odak taşımanın bir sınırı vardır: kullanıcının odağını beklemediği bir yere almak da bir kesintidir. Kural, odağın **yalnız kullanıcının kendi eylemine yanıt olarak** taşınmasıdır. Gönderim düğmesine basmak böyle bir eylemdir; arka planda tamamlanan bir istek değildir. ## Bildirimin Anı İşaretleme doğru olsa bile iletinin **ne zaman** göründüğü ayrı bir karardır. Kullanıcı ölçüm değerini yazarken her tuşta "geçersiz" demek, henüz bitmemiş bir girdiyi hatalı ilan eder ve yazmayı zorlaştırır. ```js // gosterim-ani.mjs — hata iletisinin ne zaman yazilacagi function gosterilirMi({ hataVar, dokunuldu, gonderimDenendi, hataGosterilmisti }) { if (!hataVar) return false; // hata yoksa gosterilecek sey yok if (gonderimDenendi) return true; // gonderimden sonra hepsi gorunur if (dokunuldu) return true; // alan terk edildi return hataGosterilmisti; // bir kez gosterildiyse izlemeye devam } // Hata yokken cevap her zaman "hayir"; tablo yalniz hatali alani sayiyor. const DURUMLAR = []; for (const dokunuldu of [false, true]) for (const gonderimDenendi of [false, true]) for (const hataGosterilmisti of [false, true]) DURUMLAR.push({ hataVar: true, dokunuldu, gonderimDenendi, hataGosterilmisti }); const im = (b) => (b ? "evet" : "hayır"); console.log("dokunuldu gönderim önceden → gösterilir"); for (const d of DURUMLAR) { console.log( im(d.dokunuldu).padEnd(11) + im(d.gonderimDenendi).padEnd(10) + im(d.hataGosterilmisti).padEnd(9) + " " + im(gosterilirMi(d))); } // Kullanicinin gercek yolculugu: yazarken hata yok, terk edince var, duzeltince kayboluyor. console.log("\nadım adım bir alanın yaşamı"); const YOL = [ ["boş alana '-' yazıldı", { hataVar: true, dokunuldu: false, gonderimDenendi: false }], ["'-4' yazıldı", { hataVar: false, dokunuldu: false, gonderimDenendi: false }], ["alan silindi", { hataVar: true, dokunuldu: false, gonderimDenendi: false }], ["alan terk edildi", { hataVar: true, dokunuldu: true, gonderimDenendi: false }], ["geri dönülüp '9' yazıldı",{ hataVar: false, dokunuldu: true, gonderimDenendi: false }], ["'900' yapıldı", { hataVar: true, dokunuldu: true, gonderimDenendi: false }], ]; let onceden = false; for (const [ad, kismi] of YOL) { const g = gosterilirMi({ ...kismi, hataGosterilmisti: onceden }); onceden = g; console.log(` ${ad.padEnd(27)} hata=${im(kismi.hataVar).padEnd(6)} → ${im(g)}`); } ``` ``` dokunuldu gönderim önceden → gösterilir hayır hayır hayır hayır hayır hayır evet evet hayır evet hayır evet hayır evet evet evet evet hayır hayır evet evet hayır evet evet evet evet hayır evet evet evet evet evet adım adım bir alanın yaşamı boş alana '-' yazıldı hata=evet → hayır '-4' yazıldı hata=hayır → hayır alan silindi hata=evet → hayır alan terk edildi hata=evet → evet geri dönülüp '9' yazıldı hata=hayır → hayır '900' yapıldı hata=evet → evet ``` Tablonun ikinci satırı kuralın çekirdeğidir: alan henüz terk edilmemiş ve gönderim denenmemiş olsa bile, hata **bir kez gösterildiyse** gösterilmeye devam eder. Bunun sonucu, ikinci çıktı bloğunun son iki satırında görünüyor — alan bir kez hatalı bulunduktan sonra kullanıcı yazdıkça ileti anında güncelleniyor; düzeltme yapılınca kayboluyor, yeniden bozulunca dönüyor. İlk üç satırdaki davranış da bilinçlidir. Kullanıcı boş alana eksi işareti yazdığında değer henüz geçersizdir ama ileti çıkmaz; girdi devam ediyordur. İleti ilk kez alan terk edildiğinde belirir. Bu kural, önceki dersteki `dokunulan` kümesi ile `gonderimSayisi` sayacının neden ayrı tutulduğunu açıklıyor. İkisi de "bu alanı gösterebilir miyim" sorusunun girdisidir ve farklı anları işaretler. ## Canlı Bölge mi, Odak mı Sayfada beliren bir metnin ekran okuyucu tarafından okunmasının iki yolu vardır: odağı oraya taşımak ya da metni bir **canlı bölge** içine koymak. WCAG 4.1.3 ölçütü, odak almayan durum iletilerinin de duyurulmasını ister. Ayrım şu soruyla yapılır: kullanıcının o an bir şey yapması gerekiyor mu? **Odak taşıma** kullanıcıyı yönlendirir ve akışını keser. Gönderim reddedildiğinde uygundur; kullanıcı zaten bir sonuç bekliyordur ve devam etmek için bir şey yapması gerekir. Çıktıdaki özet kutusu `role="alert"` taşıyor; bu rol, kutunun içeriğini belirdiği anda duyurulacak biçimde işaretler ve odak taşımayla birlikte kullanılır. **Canlı bölge**, kullanıcının akışını kesmeden bilgi verir. Alan alan doğrulanan bir formda her ileti için odak taşınmaz; iletiler kibar öncelikli bir bölgede birikir ve kullanıcı yazmayı bıraktığında okunur. Aşırı bildirim gerçek bir kusurdur. Her tuşta güncellenen bir canlı bölge, ekran okuyucuyu sürekli konuşturur ve kullanıcının kendi yazdığını duymasını engeller. Bu yüzden alan alan doğrulama sonuçları gecikmeli tetiklemeyle seyreltilir, gönderim sonucu ise tek seferlik ve kesin bir duyuru olarak verilir. ## Özet - Renk tek gösterge olamaz ve konum programlı bir bağ değildir; ileti alana ek açıklama bağıyla açıkça iliştirilir. - Ek açıklama listesi hem ipucunu hem hatayı sırayla taşır; geçersizlik bildirimi iletinin yerine geçmez, onunla birlikte verilir ve hata düzeldiğinde kaldırılır. - Hata özeti belge sırasına göre dizilir, hata sayısını söyler ve her maddesi ilgili alana bağlantı verir. - Odak, tek hata varsa doğrudan alana, birden çok hata varsa özet kutusuna taşınır; taşıma yalnız kullanıcının kendi eylemine yanıt olarak yapılır. - İleti ilk kez alan terk edildiğinde ya da gönderim denendiğinde yazılır; bir kez yazıldıktan sonra her değişiklikte güncellenir. - Odağı kesmeyen bildirimler canlı bölgeyle verilir; her tuşta güncellenen bir bölge aşırı bildirim üretir ve gecikmeli tetiklemeyle seyreltilir. ## Sonraki Adım Ölçüm giriş formu artık değerini tutuyor, kurallarını iki tarafta aynı biçimde uyguluyor ve hatasını herkesin algılayabileceği biçimde sunuyor. Geriye formun sorduğu bir soru kaldı: bu ölçümü kim giriyor? Kuzey Yamaç kayıtlarına herkes yazamaz; gözlemcinin önce tanınması gerekir. Sonraki ders kimlik akışının istemci tarafını ele alır — sunucunun verdiği belirtecin tarayıcıda nerede saklanacağı ve bu kararın hangi riskleri açıp hangi riskleri kapattığı.