Chrome DevTools एक पूरा सुलभता ट्री लॉन्च कर रहा है. इससे डेवलपर को पूरे ट्री की खास जानकारी पाने में आसानी होगी. इस पोस्ट में जानें कि यह ट्री कैसे बनाया जाता है और अपने काम में इसका इस्तेमाल कैसे किया जाता है.
सुलभता ट्री क्या है?
स्क्रीन रीडर जैसी सहायक तकनीक, वेब कॉन्टेंट के साथ इंटरैक्ट करने के लिए, Chromium के सुलभता एपीआई का इस्तेमाल करती हैं. इस एपीआई का बुनियादी मॉडल, सुलभता ट्री है: सुलभता ऑब्जेक्ट का एक ट्री, जिस पर सहायक टेक्नोलॉजी, एट्रिब्यूट और प्रॉपर्टी के लिए क्वेरी कर सकती है और कार्रवाइयां कर सकती है. वेब डेवलपर, सुलभता ट्री को मुख्य रूप से डीओएम प्रॉपर्टी के ज़रिए आकार देते हैं और उसमें बदलाव करते हैं. जैसे, एचटीएमएल के लिए ARIA एट्रिब्यूट.
Chrome DevTools में, हम सुलभता पैनल उपलब्ध कराते हैं. इससे डेवलपर को यह समझने में मदद मिलती है कि उनके कॉन्टेंट को सहायक टेक्नोलॉजी के साथ कैसे दिखाया जाता है. खास तौर पर, जब DOM ट्री व्यूअर में कोई नोड चुना जाता है, तो उससे जुड़े सुलभता नोड की प्रॉपर्टी पैनल में दिखती हैं. साथ ही, नोड के पैरंट और उसके चाइल्ड का व्यू भी दिखता है.
ट्री मैप कैसे बनाया जाता है?
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 फ़्रंटएंड में इवेंट भेजने के लिए करता है. असल में, CDP बैकएंड, ट्री में होने वाले अपडेट को सुनता है. साथ ही, यह भी ट्रैक करता है कि किन नोड का अनुरोध पहले किया गया था. अगर इनमें से किसी नोड में बदलाव होता है, तो यह DevTools फ़्रंटएंड को इवेंट भेजता है.
कई पेड़ों की कहानी
सुलभता ट्री के बारे में जानकारी देकर, आपने जाना कि Blink, रेंडर किए जा रहे डीओएम के लिए सुलभता ट्री कैसे बनाता है. साथ ही, DevTools ने सीडीपी की मदद से इस ट्री को फ़ेच किया है. यह बात सही है, लेकिन हमने इस ब्यौरे में कुछ जटिलताओं के बारे में नहीं बताया है. असल में, Chromium में सुलभता ट्री को इस्तेमाल करने के कई तरीके हैं. DevTools के लिए नया ट्री व्यू डिज़ाइन करते समय, हमने Chromium की सुलभता सुविधाओं के किस हिस्से को दिखाना था, इसके लिए कुछ विकल्प चुने हैं.
प्लैटफ़ॉर्म
हर प्लैटफ़ॉर्म का अलग-अलग ऐक्सेसबिलिटी एपीआई होता है. हालांकि, सभी प्लैटफ़ॉर्म पर ट्री का आकार एक जैसा होता है, लेकिन ट्री के साथ इंटरैक्ट करने के लिए एपीआई अलग-अलग होता है. साथ ही, एट्रिब्यूट के नाम भी अलग-अलग हो सकते हैं. DevTools Chromium का इंटरनल ट्री दिखाता है, जहां भूमिकाएं और एट्रिब्यूट ARIA स्पेसिफ़िकेशन में बताई गई भूमिकाओं और एट्रिब्यूट से मेल खाते हैं.
कई फ़्रेम और साइट आइसोलेशन
Chromium, हर टैब के कॉन्टेंट को अलग-अलग रेंडरर प्रोसेस में डालता है. साथ ही, अलग-अलग साइट के दस्तावेज़ों को अलग-अलग रेंडरर प्रोसेस में अलग-अलग रखता है. इसलिए, हमें CDP के ज़रिए, प्रोसेस से बाहर के हर चाइल्ड दस्तावेज़ से अलग से कनेक्ट करना होगा और उसका ऐक्सेसबिलिटी ट्री फ़ेच करना होगा. इसके बाद, हम इन सबट्री को फ़्रंटएंड पर एक साथ जोड़ते हैं. इससे, एक पेड़ का भ्रम पैदा होता है. हालांकि, वे 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 में ऐसी कार्रवाइयों को दिखा सकते हैं, ताकि सहायक टेक्नोलॉजी के लिए उपलब्ध एपीआई का इस्तेमाल करके, पेज पर “क्लिक करने”, स्क्रोल करने या वैल्यू बदलने जैसी कार्रवाइयां की जा सकें.