बस button का उपयोग करें

(gomakethings.com)

10 पॉइंट द्वारा GN⁺ 2025-11-02 | अभी कोई टिप्पणी नहीं है. | WhatsApp पर शेयर करें

वेब इंटरफ़ेस में <div> की जगह <button> का उपयोग करना accessibility और functionality दोनों के लिहाज़ से सही विकल्प है
<div> को screen reader interactive element के रूप में नहीं पहचानते, और यह keyboard focus या Enter, Spacebar इनपुट पर भी प्रतिक्रिया नहीं देता
[role="button"] या [tabindex="0"] attributes जोड़ने पर भी focus order की गड़बड़ी और keyboard event handling की समस्या बनी रहती है
इन समस्याओं को हल करने के लिए कई event listeners और conditional statements जोड़ना अनावश्यक जटिलता पैदा करता है
<button> accessibility, focus, और keyboard input handling की सुविधाएँ डिफ़ॉल्ट रूप से देता है, इसलिए यह सरल और standard समाधान है

गलत तरीका: `<div>` से button बनाना

React या HTMX उपयोगकर्ताओं के बीच <div onclick="..."> के रूप में modal खोलने जैसी interactions लागू करने के उदाहरण बहुत मिलते हैं
- उदाहरण कोड:
```
<div onclick="showSignIn()">Open Modal</div>
```
इस तरीके की समस्याएँ
- screen reader इस element को interactive element के रूप में नहीं पहचानते
- keyboard से focus ले जाना संभव नहीं होता
- केवल click event चलता है, Enter या Spacebar इनपुट पर प्रतिक्रिया नहीं होती

[role="button"] attribute जोड़ने से screen reader पहचान की समस्या तो हल हो जाती है, लेकिन
focusability और keyboard input handling की समस्या फिर भी बनी रहती है
[tabindex="0"] जोड़कर focus संभव बनाया जा सकता है, लेकिन
focus order बिगड़ने या अप्रत्याशित रूप से focus move होने का जोखिम रहता है
keyboard input को संभालने के लिए keydown event को global (document) पर register करना पड़ता है, और
Enter या ' ' (space) key को detect करके focused element को ढूँढकर चलाना पड़ता है
```
document.addEventListener('keydown', (event) => {
  if (event.key !== 'Enter' && event.key !== ' ') return;
  const notRealBtn = document.activeElement.closest('[onclick]');
  if (!notRealBtn) return;
  // 실행 코드
});
```
नतीजे में, <button> जो सुविधाएँ डिफ़ॉल्ट रूप से देता है, उन्हीं को जटिल तरीके से दोबारा लागू किया जाता है

<button> element अपने आप निम्नलिखित को support करता है
- implicit role ([role="button"])
- automatic focusability
- focus की स्थिति में Enter और Spacebar इनपुट पर click event trigger होना
यही behavior <div> में लागू करने के लिए कई attributes और scripts की ज़रूरत पड़ती है,
जबकि <button> से यह एक ही लाइन में हो जाता है
```
<button onclick="showSignIn()">Open Modal</button>
```

<button> accessibility standards को पूरा करते हुए code की मात्रा कम करने का सबसे सरल तरीका है
अनावश्यक event handling या attributes जोड़े बिना standard HTML elements का उपयोग करना maintenance और efficiency दोनों के लिए बेहतर है
“जितने आलसी developer होंगे, उन्हें उतना ही सही element इस्तेमाल करना चाहिए” — यह संदेश
अनावश्यक जटिलता से बचने और built-in features का उपयोग करने वाली development आदतों के महत्व पर ज़ोर देता है