Sadece düğme kullanın

 (gomakethings.com)
10 puan yazan GN⁺ 2025-11-02 | 7 yorum | WhatsApp'ta paylaş
  • Web arayüzlerinde yerine kullanmak, erişilebilirlik ve işlevsellik açısından doğru tercihtir
  • ``, ekran okuyucular tarafından etkileşimli bir öğe olarak algılanmaz ve klavye odağına ya da Enter, Spacebar girişlerine tepki vermez
  • [role="button"] veya [tabindex="0"] öznitelikleri eklense bile odak sırası hataları ve klavye olayı işleme sorunları devam eder
  • Bu sorunları çözmek için birden fazla event listener ve koşul eklemek gereksiz karmaşıklık yaratır
  • ``, erişilebilirlik, odak ve klavye girdisi işleme özelliklerini varsayılan olarak sunar; bu yüzden basit ve standart çözümdür

Yanlış yaklaşım: `` ile düğme yapmak

  • React veya HTMX kullananlar arasında `` biçiminde modal açma gibi etkileşimleri gerçekleştirme örnekleri yaygındır
    • Örnek kod: 
      Open Modal
  • Bu yaklaşımın sorunları
    • Ekran okuyucular ilgili öğeyi etkileşimli bir öğe olarak algılamaz
    • Klavyeyle odağa geçilemez
    • Yalnızca click olayı çalışır; Enter veya Spacebar girişlerine tepki vermez

Erişilebilirlik “düzeltme” girişimlerinin sınırları

  • [role="button"] özniteliğini eklemek ekran okuyucu algılama sorununu çözer, ancak odaklanabilirlik ve klavye girdisi işleme sorunları hâlâ kalır
  • [tabindex="0"] eklenerek odaklanabilir hâle getirilebilir, ancak odak sırasının bozulması veya beklenmedik geçişlerin yaşanması riski vardır
  • Klavye girdisini işlemek için keydown olayını global olarak (document) kaydetmek ve Enter veya ' ' (space) tuşunu algılayarak odaktaki öğeyi bulup çalıştırmak gerekir 
    document.addEventListener('keydown', (event) => {
  if (event.key !== 'Enter' && event.key !== ' ') return;
  const notRealBtn = document.activeElement.closest('[onclick]');
  if (!notRealBtn) return;
  // 실행 코드
});
  • Sonuçta bu, `` öğesinin zaten varsayılan olarak sunduğu işlevleri karmaşık şekilde yeniden uygulamak anlamına gelir

`` öğesinin sunduğu varsayılan işlevler

  • `` öğesi aşağıdakileri otomatik olarak destekler
    • örtük rol ([role="button"])
    • otomatik odaklanabilirlik
    • odak durumundayken Enter ve Spacebar girişlerinde click olayını tetikleme
  • Aynı davranışı ile uygulamak için **birden fazla öznitelik ve script gerekir**, ancak ile bu tek satırda çözülebilir 
    Open Modal

Sonuç: en iyisi sadelik

  • ``, erişilebilirlik standartlarını karşılarken kod miktarını azaltmanın en basit yoludur
  • Gereksiz olay işleme veya öznitelik eklemeleri olmadan standart HTML öğeleri kullanmak, bakım kolaylığı ve verimlilik açısından avantaj sağlar
  • “Tembel geliştiriciler doğru öğeyi kullanmalı” mesajıyla, gereksiz karmaşıklıktan kaçınan ve varsayılan işlevlerden yararlanan geliştirme alışkanlıklarının önemi vurgulanır

İlgili okumalar

7 yorum

 
come2mecome 2025-11-04

Çok iyi bir yazı. Metnin özü, "HTML etiketlerini anlamlı şekilde kullanalım." diye özetlenebilir. Tıklama olayını div (veya başka bir) etiketiyle sağlıyorsak, bunun eskiden düzeni table etiketiyle kurduğumuz dönemden hiçbir farkı olmadığını düşünüyorum.
 
carnoxen 2025-11-11

Elbette aria-* niteliklerini eklemek bunu daha açık hale getirebilir, ama o kadar uğraşacağına doğrudan uygun etiketi kullanmak daha iyi lol
 
roxie 2025-11-06

Nostalji oldu lol
 
nemorize 2025-11-02

background, border, outline, appearance, -webkit-appearance, cursor
Geçersiz kılmam gereken varsayılan stil sayfası çok fazla :(
 
rtyu1120 2025-11-03

İşte bu yüzden CSS Reset var.
 
carnoxen 2025-11-02

Bizdeki resmi kurum siteleri `` etiketini çok kullanıyor gibi...
 
GN⁺ 2025-11-02
Hacker News görüşleri

  • Şikayetlerimden biri, web sitelerinin gezinmeyi onclick işleyicisi ile uygulaması Sadece `` etiketi kullansanız yeni sekmede açma, erişilebilirlik araçlarıyla entegrasyon, sağ tık menüsü gibi her şey otomatik olarak düzgün çalışır Eğer mesele gezinmeyse JavaScript çorbası yerine bağlantı kullanmak gerekir

    • Son birkaç yılda bunun gibi uygulamaların arttığını görüyorum Muhtemelen framework etkisi ya da umursamazlıktan kaynaklanıyor Yine de UX açısından geleneksel yöntem neredeyse her zaman daha iyidir `` etiketinin yerine başka bir şey koymaya çalışanların biraz zorlanmasını diliyorum
    • React ile başlayan geliştiricilerin temel HTML kavramlarını öğrenmeden doğrudan “eğlenceli şeylere” atlamasının sorun olduğunu düşünüyorum Bu insanlar hatalı kalıplar oluşturuyor ve sonraki geliştiriciler de aynısını takip ediyor `` öğesini buton gibi süslemem gereken durumlar son derece nadirdi
    • JS tabanlı kaydırma da ortadan kalkmalı Ben fare orta tuşuyla sık sık kaydırma yapıyorum ama birçok site bunu bozuyor
    • Bu konu bana Microsoft Office 365’in link checker özelliğini hatırlattı Sol tıklayınca güvenlik kontrol sayfası açılıyor ama orta tıklayınca doğrudan gidiyor
    • Yakın zamanda yer aldığım bir React projesinde de tüm gezinme onClick ile yapılmıştı Fiilen bağlantı olan öğelerin bile tamamı tıklama işleyicisiyle ele alınıyordu, bunu hiç anlamıyorum

  • Çoğu butonda type="button" açıkça belirtilmeli Varsayılan değer submit olduğu için formun içindeyse otomatik gönderim yapar Muhtemelen bazı geliştiriciler bunu bilmediği için `` kullanıyor

    • OP’nin uzun yazısında bu kritik bilginin eksik olduğunu düşünüyorum Varsayılan tipteki butonlar tuhaf davranıp JS işleyicilerini bile atlayabiliyor
    • Varsayılan değer ile aynıdır ve bundan farklı değildir
    • Ben de bunu bizzat yaşayarak öğrendim
    • kullanırsanız `type="submit"` sorunundan kaçınabilirsiniz baştan boş gelir, bu yüzden sadece ihtiyaç duyduğunuz işlevleri eklersiniz ve sonradan değiştirmesi de kolay olur Buna karşılık `` için varsayılan davranışı anlamak adına belgelere bakmanız gerekir Sonuçta mesele açık kontrol ile yerleşik özellikler arasındaki tercih meselesidir

  • Keşke yazı, “o amaç için üretilmiş HTML öğesini olduğu gibi kullanalım” yönünde genişletilseydi Birçok SPA geliştiricisi HTML öğelerinin anlamını iyi bilmediği için her seferinde tekerleği yeniden icat ediyor

    • Keşke öğeler biraz daha kolay stillendirilebilir olsaydı Örneğin varsayılan date picker çok çirkin olduğu için insanlar onu JS tabanlı bir şeyle değiştiriyor
    • “Platformu olduğu gibi kullanın” sözü HTML5’ten sonra frontend dünyasında sık duyuluyor ama hâlâ her yere yayılmış değil
    • Gerçekte geliştiricilerin çoğu HTML öğelerini neredeyse hiç bilmiyor ve tek bir DIV ile her şeyi çözmeye çalışıyor
    • 2010 civarında tarayıcıdan tarayıcıya buton stilleri farklıydı, bu yüzden elle yapmak gerekiyordu Yani özel yapım butonların ortaya çıkmasının tarihsel bir arka planı var

  • Günümüzde ekranda tıklanabilir alan bulmak için oraya buraya basan bir nesil oluştu 10 yıl önce biri bağlantı sürüklemeyi metin seçiminden daha önemli hâle getirdi ve artık metin seçmek neredeyse imkânsız Bunu düzeltmek için belki de tarayıcıyı fork etmek gerekir

    • Benim bağlantıyı sürükleyip arka plan sekmesinde açma alışkanlığım var Alt (veya Option) tuşuna basarsanız bağlantı içindeki metni seçebilirsiniz
    • iOS’te telefon numarasını kopyalamaya çalışırken otomatik olarak arama başlatılması da benzer şekilde sinir bozucu Gerçekten istenmeyen bir davranış
    • Seçilemeyen metin beni çıldırtıyor macOS’taki TextSniper uygulamasıyla bir alan seçip OCR ile metni kopyalayabiliyorsunuz Bu sayede Google Analytics bile biraz daha kullanılabilir hâle geliyor
    • Ben de bağlantı içindeki metnin sadece bir kısmını seçmeye çalışıp sık sık başarısız oluyorum Bu tür sorunlar daha sık dile getirilmeli
    • Bağlantı metni seçmek için tarayıcı eklentileri de var Eskiden Select Like A Boss, şimdi ise Drag-Select Link Text adıyla geçiyor

  • Chrome’un varsayılan stil sayfasında button {align-items: flex-start} olduğu için flexbox boyutlandırma hatası yüzünden uzun süre uğraştım Yine de mümkün olduğunca doğru HTML öğelerini kullanmaya çalışıyorum ama küçük yan projelerde bazen `` daha rahat olabiliyor

    • appearance: none özelliği buton stilini sıfırlamak için faydalı Ben .unbuttonify diye bir sınıf yapıyorum; böylece buton gibi davranıp farklı görünebiliyor
    • Frontend geliştiricisiyseniz CSS temellerini bilmeniz gerektiğini vurgulamak isterim

  • Mümkün olduğunca öğeleri asıl amaçlarına uygun şekilde kullanmak gerekir

  • Butonlarla ilgili iki şikayetim var Biri, eninde sonunda stillerini baştan vermek zorunda olmanız, diğeri de butonları iç içe koyamayacağınıza dair uyarı Bu pratikte oldukça sık karşımıza çıkıyor

  • LLM’ler bu tür hatalı kalıpları sık sık üretiyor Tarayıcının varsayılan özelliklerini yok sayıp gereğinden karmaşık uygulamalar çıkarıyorlar Ben Claude’a bu tarz kodları sadeleştirmesini sık sık söylüyorum TypeScript’te de hata işleme biçimini tuhaflaştırma eğilimleri var

    • LLM’ler kod yazma konusunda çok iyiler ama yazılım mühendisliği sezgileri zayıf
    • Token tahmini doğası gereği, LLM’ler karmaşık kalıpları daha sık seçiyor

  • Ben mümkün olduğunca varsayılan olarak buton kullanıyorum Ama gerçekte bağlantı gibi davranması gereken durumlarda `` etiketi kullanıyorum

    • URL değişiyorsa bağlantı, değişmiyorsa buton diye ayırıyorum
    • “Web uygulaması içinde başka bir yere götüren hiperlink” ise bu `` etiketidir

  • Neden `` kullanalım diyenler çıktığını merak etmiştim

    • Muhtemelen `` garip görsel özelleştirmeler için daha elverişli olduğu içindir Böylece ne butona benziyor ne de buton gibi çalışıyor
    • Örneğin TV Tropes gibi siteler uzun listeleri “klasör” biçiminde açıp kapatıyordu ve bunu `` ile uygulamışlardı
    • En yaygın sebep, varsayılan buton stilinin üzerine yazmakla uğraşmak istememeleri