Sadece düğme kullanın

• Web arayüzlerinde <div> yerine <button> kullanmak, erişilebilirlik ve işlevsellik açısından doğru tercihtir
• <div>, 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
• <button>, 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: <div> ile düğme yapmak

• React veya HTMX kullananlar arasında <div onclick="..."> biçiminde modal açma gibi etkileşimleri gerçekleştirme örnekleri yaygındır
  • Örnek kod:

    <div onclick="showSignIn()">Open Modal</div>
    

• 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, <button> öğesinin zaten varsayılan olarak sunduğu işlevleri karmaşık şekilde yeniden uygulamak anlamına gelir

<button> öğesinin sunduğu varsayılan işlevler

• <button> öğ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ışı <div> ile uygulamak için birden fazla öznitelik ve script gerekir, ancak
  <button> ile bu tek satırda çözülebilir

  <button onclick="showSignIn()">Open Modal</button>
  

Sonuç: en iyisi sadelik

• <button>, 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