फ़ोकस क्रम विज़ुअलाइज़र क्या है?

कोई भी HTML पेस्ट करें और कीबोर्ड टैब ऑर्डर एक नज़र में देखें। फ़ोकस योग्य प्रत्येक एलिमेंट पर क्रमांकित मार्कर दिखते हैं ताकि आप नेविगेशन समस्याओं को तुरंत पहचान सकें। एक्सेसिबिलिटी ऑडिटर्स और डेवलपर्स के WCAG अनुपालन जाँच के लिए।

वि़ज़ुअलाइज़र लिंक, बटन, फॉर्म इनपुट, टेक्स्ट एरिया, सेलेक्ट मेनू, details/summary विजेट, contenteditable क्षेत्र और किसी भी स्पष्ट tabindex वाले एलिमेंट को पहचान लेता है। हर फ़ोकस योग्य एलिमेंट को क्रमांकित बैज मिलता है, साथ ही यह संकेत कि उसकी स्थिति DOM क्रम (प्राकृतिक) से है या tabindex द्वारा बदली गई (कस्टम) है। विश्लेषण को सादे टेक्स्ट रिपोर्ट के रूप में निर्यात किया जा सकता है।

उपयोग कैसे करें

1. HTML कोड को एडिटर में पेस्ट करें या टैब ऑर्डर जाँचने के लिए HTML फ़ाइल अपलोड करें।
2. प्रत्येक फ़ोकस योग्य एलिमेंट (लिंक, बटन, इनपुट) पर क्रमांकित मार्कर दिखते हैं जो टैब अनुक्रम दर्शाते हैं।
3. फ़ोकस ऑर्डर सूची की समीक्षा करें, क्रम से बाहर या गायब एलिमेंट की पहचान करें, फिर विश्लेषण को रिपोर्ट के रूप में एक्सपोर्ट करें।

कब उपयोग करें

• WCAG 2.1 AA प्रमाणन के लिए पेज भेजने से पहले की प्री-ऑडिट जाँच।
• लेआउट या कंपोनेंट के रिफैक्टर के बाद टैब-ऑर्डर रिग्रेशन ढूंढना।
• मॉडल या ऑफ़-कैनवस मेनू में फ़ोकस सही तरह कैद हो रहा है यह जाँचना।

परिणाम

एक एक्सेसिबिलिटी कंसल्टेंट क्लाइंट के साइनअप फ़ॉर्म का HTML पेस्ट करता है। विज़ुअलाइज़र दिखाता है कि गलत tabindex वैल्यू के कारण 'सबमिट' बटन 'सेवा शर्तें' चेकबॉक्स से पहले फ़ोकस प्राप्त करता है, जो WCAG 2.4.3 उल्लंघन को फ़्लैग करता है।

अक्सर पूछे जाने वाले प्रश्न

क्या tabindex में पॉज़िटिव नंबर देना हमेशा गलत होता है?

लगभग हमेशा हाँ। पॉज़िटिव tabindex (1, 2, 3…) एलिमेंट को DOM क्रम से बाहर खींच लेता है और कर्सर पेज पर अप्रत्याशित ढंग से कूदने लगता है। नॉन-इंटरैक्टिव एलिमेंट को फ़ोकस योग्य बनाने के लिए tabindex="0" लगाएँ, या प्रोग्रामेटिक फ़ोकस रखते हुए टैब चेन से हटाने के लिए tabindex="-1" का इस्तेमाल करें।

सूची में 'प्राकृतिक' और 'कस्टम' का क्या मतलब है?

प्राकृतिक मतलब टैब स्थिति एलिमेंट के HTML सोर्स स्थान से आ रही है। कस्टम मतलब पॉज़िटिव tabindex ने उसे किसी और स्लॉट में जबरन भेजा है। कस्टम स्थानों को इसलिए चिह्नित किया जाता है क्योंकि WCAG 2.4.3 की सबसे आम विफलता यहीं से आती है।

क्या छिपे हुए एलिमेंट फ़ोकस ऑर्डर में दिखते हैं?

अगर वे सच में छिपे हैं (display:none या visibility:hidden), तो ब्राउज़र खुद ही उन्हें छोड़ देता है, और वि़ज़ुअलाइज़र भी। पर अकेला aria-hidden फ़ोकस योग्यता नहीं हटाता, यह आम बग है। ऐसे एलिमेंट सूची में दिखेंगे और रेक्टैंगल डेटा से उनकी विज़िबिलिटी पता चलेगी।

क्या यह मॉडल में फ़ोकस ट्रैप गायब होने की पहचान करता है?

यह सिर्फ़ क्रम दिखाता है, यह नहीं बताता कि फ़ोकस मॉडल से बाहर भागता है या नहीं। मॉडल के खुले रूप का HTML पेस्ट करें और देखें कि पहला और आखिरी फ़ोकस योग्य एलिमेंट डायलॉग के अंदर हैं या नहीं। अगर क्रम बॉडी कंटेंट पर कूदता है, तो ट्रैप गायब है।

जो एलिमेंट मुझे फ़ोकस योग्य लगा, वह सूची में क्यों नहीं है?

डिसएबल्ड इनपुट, href रहित anchor और tabindex रहित div को ब्राउज़र फ़ोकस ही नहीं कर सकता, इसलिए छोड़ देता है। div को पहुँच में लाने के लिए tabindex="0" जोड़ें, anchor में href लगाएँ, या input से disabled हटाएँ।

संबंधित उपकरण