Odağı İlk Hataya Taşıma
Kullanıcıları doğrudan düzeltmeleri gereken yere yönlendirin.
Odağı İlk Hataya Taşıma, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
Gönderimden Sonra Odak Kayboluyor
Kullanıcı formu gönderir, sayfanın üstünde hatalar gösterilir, ancak odak düğmede kalır. Kullanıcı bir şeyin başarısız olduğunu hiç anlayamaz. 😕
Odağı Soruna Taşıyın
Gönderim başarısız olduğunda odağı ilk geçersiz alana taşıyın. Kullanıcı, herhangi bir arama yapmadan düzeltmeye başlaması gereken yere doğrudan gelir.
JS İçinde focus Kullanın
İlk hatalı denetimi bulun ve üzerinde focus() çağrısını yapın. Böylece hem klavye hem de ekran okuyucu kullanıcıları doğru yerden başlar.
const first = form.querySelector("[aria-invalid='true']");
if (first) first.focus();Adı, Türü ve Hatayı Okuyun
Odak oraya geldiğinde ekran okuyucu alanın adını, geçersiz olduğunu ve açıklanan hatasını aynı anda duyurur.
Rastgele Değil, İlk Olanı
Belge sırasındaki ilk hatayı her zaman hedefleyin. Daha sonraki bir alana atlamak, kullanıcının hâlâ ilgilenmesi gereken sorunları atlar.
Yalnızca Kaydırmayın
Hatayı görünür alana kaydırmak fare kullananlara yardımcı olur, ancak klavye ve ekran okuyucu kullanıcılarının gerçek odağının taşınması gerekir; yalnızca piksellerin yer değiştirmesi yeterli değildir.
Özet Kutusu Yardımcı Olur
Çok sayıda hata olduğunda önce üstteki bir hata özetine odaklanın. Her sorunu, ilgili alana atlayan bir bağlantı olarak listeleyin.
<div tabindex="-1" id="errors">
3 errors found
</div>Özeti Odaklanabilir Yapın
Bir başlık veya div varsayılan olarak odaklanabilir değildir. Betiğinizin odağı program aracılığıyla oraya taşıyabilmesi için tabindex="-1" ekleyin.
Hataları Alanlara Bağlayın
Özetin içinde her öğe, alanın id değerine giden bir bağlantıdır. Etkinleştirildiğinde odak doğrudan hatalı girdiye gider.
<a href="#email">Email is required</a>Odağı Erkenden Ele Geçirmeyin
Odağı yalnızca kullanıcının gönderme işlemesine yanıt olarak taşıyın; her tuş vuruşunda taşımayın. Yazarken odağı aniden çekmek sarsıcı ve istenmeyen bir davranıştır.
Düzelmeyi Onaylayın
Kullanıcı her şeyi düzelttikten sonra formu yeniden gönderdiğinde, sonunda işlemin başarılı olduğunu duyabilmesi için odağı bir başarı iletisine taşıyın.
Hızlı Kontrol
Form gönderimi başarısız olduğunda odak nereye gitmelidir?
Özet
Başarısızlık durumunda odağı ilk geçersiz alana veya odaklanabilir bir hata özetine taşıyın; doğrulama başarılı olduğunda ise bir başarı iletisine taşıyın. ✅
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Odağı İlk Hataya Taşıma” dersi ücretsiz mi?
Evet — “Odağı İlk Hataya Taşıma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.
“Odağı İlk Hataya Taşıma” dersinde ne öğreneceğim?
Kullanıcıları doğrudan düzeltmeleri gereken yere yönlendirin. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Odağı İlk Hataya Taşıma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Hataları aria-describedby ile Alanlara Bağlama
- Geçersiz Durumu aria-invalid ile İşaretleme
- Odağı İlk Hataya Taşıma
- Satır İçi, Odak Kaybında veya Gönderimde: Zamanlama Önemlidir