Yerel ve Özel: Gerçek Bir Öğeye Ne Zaman Başvurmalı

Karşınıza çıkan herhangi bir denetim için tek bir seçim yaparsınız: yerel bir HTML ögesi kullanmak veya özel bir ögeyi elle oluşturmak. Yerel ögeler neredeyse her zaman kazanır.

Yerel bir düğme odaklanabilir; fare, klavye ve dokunmayla tıklanabilir ve doğru biçimde duyurulur. Bir etiket yazarsınız, geri kalanını platform halleder.

Bir span etiketini düğme gibi biçimlendirseniz bile rolü, odağı ve klavye desteği olmaz. Yalnızca gözü kandırır.

Özel bir denetimin çalışması için rol, tabindex ve Enter ile Space tuşları için tuş işleyicileri eklemeniz gerekir. Tek bir etiketi taklit etmek için bu oldukça fazla kod demektir.

Dikkatle hazırlanmış özel denetimler bile odak halkaları, devre dışı durumlar ve dokunma gibi uç durumları kaçırabilir. Yerel öğe bunların her birini zaten yönetir.

Bu, platformun tamamı için geçerlidir. Gerçek bir select, onay kutusu veya details, bir div taklidinin hiçbir zaman tam olarak eşleşemeyeceği davranışları ve erişilebilirliği size hazır olarak sunar.

Yerel form denetimleri form ile birlikte gönderilir, kendi doğrulamalarını yapar ve bir etiketle otomatik olarak eşleşir. Bunları elle yeniden oluşturmak nadiren buna değer.

Özel çözüme yalnızca sekmeli arayüz veya ağaç gibi bir örüntü için yerel öğe bulunmadığında başvurun. Ardından, kanıtlanmış bir oluşturma örüntüsünü dikkatle uygulayın.

Gerçek bir düğmenin sade görüneceğinden mi endişeleniyorsunuz? Yerel öğeleri CSS ile kapsamlı biçimde biçimlendirebilirsiniz. Anlamsal yapıyı koruyun, görünümü dilediğiniz şekilde değiştirin.

Gerçek öğeye yönelmek daha az JavaScript, daha az hata ve tarayıcı ile yardımcı teknoloji güncellemelerinden ücretsiz olarak yararlanan bir denetim anlamına gelir.

Bunu varsayılanınız yapın: önce yerel öğeyi kullanın, özel çözümü yalnızca son çare olarak tercih edin. Web platformu erişilebilirlik açısından büyük bir armağandır; işi onun yapmasına izin verin.

Önce yerel öğeyi seçin: gerçek bir düğme veya giriş alanı size odaklanmayı, tuşları ve anlamsal yapıyı ücretsiz olarak sunar. Yalnızca hiçbir öğe yoksa özel çözüme başvurun ve yerel öğeleri özgürce biçimlendirin. 🎉