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, रेंडर किए जा रहे डीओएम के लिए सुलभता ट्री कैसे बनाता है. साथ ही, 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 के लिए एक अपडेट मिलेगा (क्योंकि इसकी चाइल्ड एंट्री बदल गई हैं). हालांकि, अगर हमने उस नोड को छोटा कर दिया होता, तो हमें यह पता करने में मुश्किल होती कि क्या अपडेट करना है.
- यह पक्का करता है कि सभी डीओएम नोड में एक सुलभता नोड है. ट्री के टॉगल होने पर, हम डीओएम ट्री में फ़िलहाल चुने गए नोड से जुड़े नोड को चुनते हैं. इसलिए, ऊपर दिए गए उदाहरण में, अगर कोई उपयोगकर्ता X से जुड़े DOM नोड को चुने जाने के दौरान ट्री को टॉगल करता है, तो हम नोड A और B के बीच X इंजेक्ट कर देते हैं और ट्री में X चुनते हैं. इससे उपयोगकर्ता को सभी डीओएम नोड के लिए सुलभता नोड की जांच करने में मदद मिलती है. साथ ही, यह तय करने में मदद मिलती है कि नोड को अनदेखा क्यों किया गया है.
आने वाले समय के लिए आइडिया
नए सुलभता ट्री को लॉन्च करना अभी सिर्फ़ एक शुरुआत है. हमारे पास आने वाले समय के प्रोजेक्ट के लिए कुछ आइडिया हैं, जिन्हें नए व्यू को ध्यान में रखकर बनाया जा सकता है. हालांकि, हमें आपके सुझाव, शिकायत या राय का इंतज़ार भी है!
फ़िल्टर करने के दूसरे विकल्प
जैसा कि ऊपर बताया गया है, हम फ़िलहाल उन नोड को फ़िल्टर कर देते हैं जिनमें दिलचस्पी नहीं है. हम इस व्यवहार को बंद करने और सभी नोड दिखाने का तरीका बता सकते हैं. इसके अलावा, हम वैकल्पिक फ़िल्टर भी उपलब्ध करा सकते हैं, जैसे कि लैंडमार्क नोड दिखाएं या हेडिंग दिखाएं.
a11y समस्याओं को हाइलाइट करें
हम ट्री के साथ “सुलभता के सबसे सही तरीके” विश्लेषण को शामिल कर सकते हैं और सुलभता से जुड़ी समस्याओं को सीधे तौर पर नुकसान पहुंचाने वाले नोड पर हाइलाइट कर सकते हैं.
DevTools में सुलभता से जुड़ी कार्रवाइयां दिखाना
फ़िलहाल, हम जो पेड़ दिखा रहे हैं वह पूरी तरह से एकतरफ़ा है: इससे हमें यह समझने में मदद मिलती है कि किसी खास वेबपेज को ब्राउज़ करते समय, सहायक टेक्नोलॉजी को कौनसी जानकारी दी जाएगी. सुलभता से जुड़ी कार्रवाइयां, कम्यूनिकेशन को दूसरी दिशा में दिखाती हैं: ये सहायक टेक्नोलॉजी को, प्रजेंट किए गए यूज़र इंटरफ़ेस (यूआई) पर काम करने की अनुमति देती हैं. हम DevTools में इस तरह की कार्रवाइयां दिखा सकते हैं, ताकि सहायक टेक्नोलॉजी के लिए उपलब्ध एपीआई का इस्तेमाल करके, पेज पर “क्लिक करना”, स्क्रोल करना या पेज पर वैल्यू में बदलाव करने जैसी कार्रवाइयां की जा सकें.