Chrome DevTools, पूरी तरह से सुलभता ट्री लॉन्च कर रहा है. इससे डेवलपर आसानी से पूरे ट्री की खास जानकारी पा सकेंगे. इस पोस्ट में पता लगाएं कि यह ट्री कैसे बनाया गया है और अपने काम में इसका इस्तेमाल कैसे किया जा सकता है.
सुलभता ट्री क्या है?
स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी, वेब कॉन्टेंट से इंटरैक्ट करने के लिए, Chromium की Accessibility API का इस्तेमाल करती है. इस एपीआई का बुनियादी मॉडल सुलभता ट्री है: सुलभता ऑब्जेक्ट का एक ट्री, जिस पर सहायक टेक्नोलॉजी एट्रिब्यूट और प्रॉपर्टी के लिए क्वेरी कर सकती है और उस पर कार्रवाइयां कर सकती है. वेब डेवलपर, मुख्य रूप से एचटीएमएल के लिए ARIAए एट्रिब्यूट जैसी डीओएम प्रॉपर्टी के ज़रिए, सुलभता ट्री को आकार देते हैं और उसमें बदलाव करते हैं.
Chrome DevTools में, हमने सुलभता पैनल की सुविधा दी है. इससे डेवलपर को यह समझने में मदद मिलती है कि उनके कॉन्टेंट को सहायक टेक्नोलॉजी का इस्तेमाल किस तरह किया जा सकता है. इसका मतलब है कि जब डीओएम ट्री व्यूअर में कोई नोड चुना जाता है, तब उससे जुड़े सुलभता नोड की प्रॉपर्टी, पैनल में एक साथ दिखती है. साथ ही, वह नोड से जुड़े एलिमेंट और उससे जुड़े मौजूदा चाइल्ड एलिमेंट को भी दिखाती है.
ट्री कैसे बनाया जाता है?
DevTools में यह नया फ़ुल ट्री व्यू कैसा दिखता है, यह जानने से पहले, हमें कम शब्दों में यह जानना है कि ज़्यादा बेहतर शब्दों में सुलभता ट्री क्या है. सुलभता ट्री, डीओएम ट्री का डेरिवेटिव है. इसका स्ट्रक्चर करीब-करीब एक जैसा है. हालांकि, इसमें ऐसे नोड को हटा दिया गया है जिनमें सिमैंटिक कॉन्टेंट नहीं है. जैसे, <div> एलिमेंट का इस्तेमाल सिर्फ़ स्टाइलिंग के लिए किया जाता है. ट्री के हर नोड की भूमिका Button या Heading जैसी होती है. अक्सर यह एक नाम होता है, जो ARIA एट्रिब्यूट या नोड के कॉन्टेंट से लिया जा सकता है. अगर हम एक एचटीएमएल दस्तावेज़ देखें:
<html>
<head>
<title>How old are you?</title>
</head>
<body>
<label for="age">Age</label>
<input id="age" type="number" name="age" value="42">
<div>
<button>Back</button>
<button>Next</button>
</div>
</body>
</html>
Chromium में रेंडरर, जिसका नाम Blink है. इसे अंदरूनी सुलभता ट्री के बारे में इस तरह से बताया गया है.
role='rootWebArea' focusable name='How old are you?'
role='genericContainer' ignored
role='genericContainer' ignored
role='labelText'
role='staticText' name='Age'
role='spinButton' editable focusable name='Age' value='42'
role='genericContainer' editable
role='staticText' editable name='42'
role='genericContainer'
role='button' focusable name='Back'
role='staticText' name='Back'
role='button' focusable name='Next'
role='staticText' name='Next'
ध्यान दें कि इस प्रज़ेंटेशन में genericContainer रोल वाले कई ग़ैर-ज़रूरी नोड शामिल हैं, जो ऊपर बताए गए स्टेटमेंट से मेल नहीं खाता कि सुलभता ट्री, डीओएम ट्री का एक आसान डेरिवेटिव है. हालांकि, इनमें से ज़्यादातर नोड सिर्फ़ अंदरूनी ट्री में होते हैं और सहायक टेक्नोलॉजी के सामने नहीं आते. DevTools सीधे रेंडरर प्रोसेस से इसकी सुलभता जानकारी इकट्ठा करता है. इसलिए, DevTools इसी पेड़ का इस्तेमाल है.
DevTools में सभी सुलभता सुविधाएं
नया और पूरा सुलभता ट्री, डीओएम ट्री के साथ सिंक हो गया है, ताकि डेवलपर दो ट्री के बीच एक-दूसरे को आगे और पीछे स्विच कर सकें. हमें उम्मीद है कि यह नया पेड़ एक्सप्लोर करने लायक, मददगार, और इस्तेमाल करने में आसान होगा.
अब जब आपको पता है कि सुलभता ट्री कैसे काम करता है, तो DevTools का इस्तेमाल करके यह देखा जा सकता है कि नया ट्री व्यू कैसा दिखता है. इस एचटीएमएल दस्तावेज़ में एक टाइटल, हेडिंग, और दो बटन हैं. इसका इस्तेमाल ट्री दिखाने के लिए किया जाता है.
<!DOCTYPE html>
<title>Test</title>
<h1>Heading for example page</h1>
<div>
<button>Back</button>
<button>Next</button>
</div>
पिछले ट्री व्यू की मदद से, सिर्फ़ किसी एक नोड और उसके पहले के हिस्सों को एक्सप्लोर किया जा सकता है.
अब, नए ट्री को टॉगल करने पर, यह डीओएम ट्री व्यू को बदल देता है और आपको पेज की पूरी सुलभता ट्री देखने की सुविधा मिलती है:
लेज़ी ट्री बनाना
बड़ी जगहों पर पेड़ की परफ़ॉर्मेंस को बेहतर बनाने के लिए, जब इसे एक्सप्लोर किया जा रहा है, तब इसे सामने की तरफ़ लेज़ी तरीके से बनाया गया है. ट्री में किसी नोड को बड़ा करने के बाद, नोड के लिए चाइल्ड को Chrome DevTools प्रोटोकॉल (सीडीपी) की मदद से फ़ेच किया जाता है और ट्री को फिर से बनाया जाता है.
लाइव
अगर रेंडरर में सुलभता ट्री बदल जाता है, तो नया ट्री व्यू लाइव होता है और डाइनैमिक तौर पर अपडेट होता है. यह उसी तरह की तकनीक से जुड़ता है जो ट्री में होने वाले बदलावों के बारे में सहायक टेक्नोलॉजी को सूचना देती है. साथ ही, इसका इस्तेमाल अपडेट किए गए नोड के साथ DevTools फ़्रंटएंड पर इवेंट भेजने के लिए करती है. असल में, सीडीपी बैकएंड, ट्री से होने वाले अपडेट सुनता है और यह ट्रैक करता है कि पहले से किन नोड के लिए अनुरोध किया गया है. साथ ही, अगर इनमें से किसी भी नोड में बदलाव होता है, तो वह DevTools फ़्रंटएंड को इवेंट भेजता है.
कई पेड़ों की कहानी
सुलभता ट्री क्या है के ब्यौरे में, आपने जाना कि Blink, रेंडर किए जा रहे DOM के लिए एक सुलभता ट्री कैसे बनाता है. साथ ही, DevTools इस ट्री को सीडीपी के ज़रिए फ़ेच करता है. हालांकि, यह बात सही है, लेकिन हमने इस ब्यौरे में इनसे जुड़ी कुछ जानकारी छोड़ दी है. असल में, Chromium में सुलभता ट्री का अनुभव लेने के कई अलग-अलग तरीके हैं. DevTools के लिए नया ट्री व्यू डिज़ाइन करते समय, हमने Chromium की सुलभता सुविधाओं के अंदरूनी हिस्से को दिखाने के लिए कुछ विकल्प चुने हैं.
प्लैटफ़ॉर्म
हर प्लैटफ़ॉर्म का Accessibility API अलग होता है और सभी प्लैटफ़ॉर्म पर ट्री का आकार एक जैसा होता है. हालांकि, ट्री से इंटरैक्ट करने के लिए, एपीआई अलग-अलग होता है और एट्रिब्यूट के नाम भी अलग-अलग हो सकते हैं. DevTools, Chromium के इंटरनल ट्री को दिखाता है. यहां पर भूमिकाएं और एट्रिब्यूट, ARIA स्पेसिफ़िकेशन में बताए गए एट्रिब्यूट से मेल खाते हैं.
कई फ़्रेम और साइट आइसोलेशन
Chromium, हर टैब के कॉन्टेंट को न सिर्फ़ रेंडर करने की अलग-अलग प्रोसेस में रखता है, बल्कि रेंडर करने की अलग-अलग प्रोसेस में क्रॉस-साइट दस्तावेज़ों को अलग करता है. इसलिए, हमें प्रोसेस से बाहर वाले हर चाइल्ड दस्तावेज़ को सीडीपी पर अलग-अलग कनेक्ट करना होता है और उसके सुलभता ट्री को फ़ेच करना होता है. इसके बाद, हम इन सबट्री को फ़्रंटएंड पर एक साथ जोड़ देते हैं, ताकि एक ही पेड़ का भ्रम हो सके. हालांकि, Chromium में ये सब-ट्री अलग-अलग रेंडरर प्रोसेस में रहती हैं.
उपेक्षित और अ दिलचस्प नोड
हम हर डिफ़ॉल्ट नोड को छिपा देते हैं: अनदेखा किए गए नोड और बिना नाम वाली भूमिका “सामान्य” वाले नोड. इन नोड का कोई सिमैंटिक मतलब नहीं होता. साथ ही, अनदेखा किए गए नोड के मामले में, इन नोड का इस्तेमाल सहायक टेक्नोलॉजी के ज़रिए नहीं किया जाता. हम ट्री व्यू में गैर-ज़रूरी चीज़ों से बचने के लिए इन नोड को छिपा देते हैं. अगर हमने ऐसा नहीं किया है, तो ज़्यादातर वेब पेजों के लिए सुलभता ट्री कुछ ऐसा दिखेगा:
यहां चेतावनी यह है कि इसका मतलब है कि हमें बैकएंड पर उपलब्ध ट्री के बजाय एक और पेड़ बनाना होगा. उदाहरण के लिए, मान लें कि हमारे पास नोड A, B, C, और X हैं, जहां A का चाइल्ड X और B है और X का चाइल्ड C है. अगर X अनदेखा किया गया नोड है, तो हम ट्री से X हटा देते हैं और इसकी जगह एक ट्री बना देते हैं जहां C, A का चाइल्ड नोड होता है.
फ़्रंटएंड पर, हम अनदेखा किए गए नोड के साथ पूरा ट्री बनाते हैं और सिर्फ़ नोड को रेंडर करने से ठीक पहले उनकी काट-छांट करते हैं. हम ऐसा दो वजहों से करते हैं:
- इससे बैकएंड से नोड अपडेट को मैनेज करना ज़्यादा आसान हो जाता है, क्योंकि हमारे दोनों एंडपॉइंट पर एक ही ट्री स्ट्रक्चर है. उदाहरण के लिए, अगर उदाहरण में नोड B को हटा दिया गया है, तो हमें नोड X के लिए अपडेट मिलेगा (क्योंकि, इसके चाइल्ड बदल गए हैं). हालांकि, अगर हमने उस नोड को हटा दिया होता, तो हमें यह पता लगाने में मुश्किल होती कि क्या अपडेट करना है.
- इससे यह पक्का होता है कि सभी DOM नोड के पास एक सुलभता नोड है. ट्री को टॉगल किए जाने पर, हम डीओएम ट्री में चुने गए नोड से जुड़े नोड को चुनते हैं. इसलिए, पिछले उदाहरण में, अगर उपयोगकर्ता X से जुड़े DOM नोड को चुनने के दौरान ट्री को टॉगल करता है, तो हम नोड A और B के बीच X को इंजेक्ट करते हैं और ट्री में X चुनते हैं. इससे उपयोगकर्ता सभी डीओएम नोड के सुलभता नोड की जांच कर सकता है और यह पता लगा सकता है कि नोड को अनदेखा क्यों किया गया है.
आने वाले समय के लिए आइडिया
सुलभता सुविधाओं की नई सूची को लॉन्च करना तो बस एक शुरुआत है. हमारे पास आने वाले समय के प्रोजेक्ट के लिए कुछ आइडिया हैं, जिन्हें हम नए व्यू को ध्यान में रखकर तैयार कर सकते हैं. हालांकि, हम इसके लिए भी आपका सुझाव जानना चाहते हैं!
वैकल्पिक फ़िल्टर
जैसा कि ऊपर बताया गया है, हम फ़िलहाल उन नोड को फ़िल्टर कर देते हैं जो दिलचस्प नहीं लगते. हम इस व्यवहार को बंद करने और सभी नोड दिखाने का तरीका बता सकते हैं. इसके अलावा, लैंडमार्क नोड दिखाएं या हेडिंग दिखाएं जैसे विकल्प के तौर पर फ़िल्टर का इस्तेमाल भी किया जा सकता है.
a11y की समस्याओं को हाइलाइट करें
हम ट्री की मदद से “सुलभता सबसे सही तरीका” का विश्लेषण शामिल कर सकते हैं और सुलभता की समस्याओं को सीधे उल्लंघन करने वाले नोड पर हाइलाइट कर सकते हैं.
DevTools में सुलभता से जुड़ी कार्रवाइयां दिखाएं
फ़िलहाल, हम जो पेड़ दिखा रहे हैं वह पूरी तरह से एकतरफ़ा है: इससे हमें यह समझने में मदद मिलती है कि किसी खास वेबपेज को ब्राउज़ करते समय, सहायक टेक्नोलॉजी को कौनसी जानकारी दी जाएगी. सुलभता से जुड़ी कार्रवाइयों से, कम्यूनिकेशन की जानकारी मिलती है: ये सहायक टेक्नोलॉजी को यूज़र इंटरफ़ेस (यूआई) पर काम करने की अनुमति देती हैं. हम DevTools में ऐसी कार्रवाइयां दिखा सकते हैं, ताकि सहायक टेक्नोलॉजी के लिए उपलब्ध एपीआई का इस्तेमाल करके, पेज पर "क्लिक करने", स्क्रोल करने या वैल्यू बदलने जैसी कार्रवाइयां की जा सकें.