HTML tabindex एट्रिब्यूट

परिचय

HTML tabindex एट्रिब्यूट HTML दस्तावेज़ में एक एलिमेंट के टैब क्रम (tab order) को परिभाषित करता है। यह एक ग्लोबल एट्रिब्यूट है, जिसका अर्थ है कि इसे किसी भी HTML एलिमेंट पर उपयोग किया जा सकता है। यह कीबोर्ड नेविगेशन और एक्सेसिबिलिटी के लिए महत्वपूर्ण है।

सिंटैक्स

<tagname tabindex="number"></tagname>

tabindex मान

उदाहरण

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  p {
    font-size: 1.2rem;
    margin: 1rem 0;
    padding: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  p:focus {
    outline: 2px solid #db133a;
    background: #fff3e0;
  }
</style>
<body>
<h1>HTML tabindex एट्रिब्यूट</h1>
<p tabindex="5">मैं पैराग्राफ हूँ (tabindex=5)।</p>
<p tabindex="4">मैं पैराग्राफ हूँ (tabindex=4)।</p>
<p tabindex="3">मैं पैराग्राफ हूँ (tabindex=3)।</p>
<p tabindex="2">मैं पैराग्राफ हूँ (tabindex=2)।</p>
<p tabindex="1">मैं पैराग्राफ हूँ (tabindex=1)।</p>
<p>अब, Tab कुंजी का उपयोग करके पैराग्राफ के माध्यम से नेविगेट करने का प्रयास करें।</p>
</body>
</html>

आउटपुट

पांच पैराग्राफ दिखाई देंगे। Tab कुंजी दबाने पर, फोकस tabindex=1 वाले पैराग्राफ पर जाएगा, फिर 2, 3, 4, 5 के क्रम में - DOM क्रम (ऊपर से नीचे) के विपरीत।

सर्वोत्तम अभ्यास

• धनात्मक tabindex से बचें - यह DOM क्रम से विजुअल क्रम को अलग करता है, जिससे एक्सेसिबिलिटी समस्याएं होती हैं
• प्राकृतिक DOM क्रम का उपयोग करें (तार्किक HTML संरचना)
• केवल tabindex="0" का उपयोग गैर-इंटरैक्टिव एलिमेंट्स को फोकसेबल बनाने के लिए करें
• tabindex="-1" का उपयोग प्रोग्रामेटिक फोकस के लिए करें (मोडल, टूलटिप्स)
• फॉर्म फील्ड्स, बटन, लिंक्स डिफ़ॉल्ट रूप से फोकसेबल हैं (tabindex की आवश्यकता नहीं)

एक्सेसिबिलिटी नोट

WCAG 2.1 दिशानिर्देशों के अनुसार, फोकस क्रम तार्किक और पूर्वानुमानित होना चाहिए। धनात्मक tabindex मान इस सिद्धांत का उल्लंघन कर सकते हैं।

ब्राउज़र समर्थन

सभी ब्राउज़रों में पूर्ण समर्थन।