Div mi, Button mu? Semantik HTML'in Gözden Kaçan Gücü

Bilmeyenimiz yok. Proje sabaha karşı bitmeye yakın, tasarım ekibi özel bir buton istiyor. Gradient arka plan, hover'da parlayan bir efekt, tıklandığında hafifçe kayma... Üstadımız div'e sarılırız, CSS yazarız, iş biter.

Figma'da muhteşem görünüyor. Demo'da sorunsuz çalışıyor. Sonra gerçek kullanıcı siteye gelir—klavyesiyle gezinmeye çalışır, formu gönderir, ekran okuyucu kullanır—ve her şey çöker.

Sorun CSS'te değil. Sorun, bir div'e buton olma görevi vermiş olman.

200 Satır JavaScript'in Hikayesi

Şöyle başlar: bir butona ihtiyacın var. <div class="btn"> yaratırsın, tasarıma uygun stil yazarsın. Güzel görünür. Sonra butonun gerçekten buton gibi davranması gerektiğini fark edersin.

Click handler eklerim, hover durumu eklerim, klavye kullanıcıları için focus hali eklerim. Space ve Enter tuşlarının çalışmadığını görürsün, keydown dinleyicileri eklersin. Buton bazen pasif olmalı—.disabled sınıfı eklenir, umarım tüm etkileşimleri engeller. Bir noktada role="button" ve tabindex="0" eklemeden edemezsin, erişilebilirlik araçları yokmuş gibi davranmasın diye.

Tebrikler. Tarayıcının ücretsiz verdiği şeyi taklit etmeye çalışan, yaklaşık 200 satır JavaScript gerektiren bir buton-kılıklı nesne inşa ettin.

İşte "kötü mimari kararların kirasını ödemek" dediğimiz şey bu. Her workaround satırı, yanlış element seçiminin faizi.

Bedava Gelen Sözleşme

Şu gerçeği düşün: tarayıcılar native HTML elementlerini inanılmaz bir yan hizmetle sunuyor. Çoğu geliştirici bu sözleşmeyi fark etmez ta ki... eksikliğini çekene kadar.

Gerçek bir <button> kullandığında neler alırsın:

• Klavye desteği hazır — Enter ve Space tuşları kullanıcının beklediği gibi çalışır
• Focus yönetimi otomatik — Tab sırasına doğal olarak girer, programatik odaklanma desteklenir
• Pasif durumu bedava — Tüm etkileşimi engeller, odaklanılamaz hale gelir, ekran okuyucular "pasif" diye duyurur
• Form katılımı — Formları gönderir, doğrulama kurallarına uyar, form.reset()'e katılır
• Erişilebilirlik anlamı — Ek ARIA yazmadan ekran okuyucular bunu buton olarak tanır
• Platform alışkanlıkları — Kullanıcılar butonların nasıl çalıştığını bilir, çünkü butonlar her yerde tutarlı davranır

Kılık değiştirmiş bir div kullanırsan... CSS'i alırsın. Geri kalan her şey senin sorumluluğunda. İşin kötü tarafı: ne kadar titiz davranırsan davran, kendi implementasyonun tarayıcının sunduklarının gerisinde kalır. Tarayıcılar bu davranışları tüm platformlar, edge case'ler ve yardımcı teknolojiler için optimize eden mühendis ekipleriyle geliştiriliyor. Senin özel butonunun ise sadece sen var.

Asıl Soru: "Stil Verebilir miyim?" Değil

Tasarımcı-geliştirici iş birliği ya burada parlıyor ya da teknik borç yaratıyor. Pek çok geliştirici "semantik HTML" derken "tarayıcının çirkin varsayılanlarını kabul etmek" anlıyor. Bu yanlış bir varsayım.

Sorun şu değil: "Bunu özel görünümlü yapabilir miyim?" — Yaparsın, tabii ki yaparsın. Soru şu: "Hangi native davranışlar stil sürecinden sağ çıkmalı?"

Bir <button> istediğin her görsel tedaviyi alabilir. Varsayılan stilleri appearance: none ile sıfırlarsın. Gradient, gölge, animasyon, özel font ekle—tasarım ne isterse. Tarayıcının interaction contract'ı butonun neye benzediğini umursamıyor.

Bir div'le kolayca yapamayacağın şey, tarayıcının otomatik verdiği şeyleri taklit etmek. O zaman savaşını doğru yerde ver: enerjini ürününü özel kılan şeylere harca, butonu yeniden icat etmeye değil.

Gerçek Kullanıcılar İçin İnşa Etmek

Kullanıcıların siteni ideal koşullarda kullandığını sanma. Ellerinde klavye var, alanlar arasında Tab ile geçiyorlar. Sesli komutla navigasyon yapıyorlar. Ekranı %300 yakınlaştırmışlar, çünkü onlar için öyle çalışıyor. Farklı tarayıcılar, farklı işletim sistemleri, farklı yardımcı teknolojiler.

Web platformu semantik HTML ile dev bir avantaj sunuyor. Native elementler varsayılan olarak erişilebilir, varsayılan olarak klavye navigasyonuna uygun, varsayılan olarak cross-platform. Bu altyapıyla savaştığında sadece kendine iş çıkarmıyorsun—kullanıcılar için farklı şekillerde başarısız olacak componentler yaratıyorsun.

Bir sonraki sefere role="button" ile bir div'e uzanacağın zaman, kendine sor: Gerçekten özel bir implementasyona mı ihtiyacım var, yoksa sadece <button> etiketinden mi kaçıyorum? Çünkü sıradan çözüm çoğu zaman doğru çözümdür. "Tarayıcı doğru çalışıyor" bir özelliktir, kısıtlama değil.

Semantik web kurallara uymakla ilgili değil. İş için tasarlanmış araçları kullanmakla ilgili. Enerjini gerçekten fark yaratan yere harcamakla ilgili.