पहुँच वृक्ष: स्क्रीन रीडर क्या सुनते हैं

ब्राउज़र आपके DOM को सुलभता वृक्ष नामक दूसरी संरचना में बदल देता है। यही वह संस्करण है जिसे सहायक तकनीक वास्तव में पढ़ती है।

सुलभता वृक्ष सीधे आपके HTML से बनाया जाता है। अच्छा अर्थविज्ञान देने पर समृद्ध वृक्ष मिलता है; div सूप देने पर खाली और बेकार वृक्ष मिलता है।

हर नोड में एक भूमिका होती है, जो बताती है कि वह क्या है: button, heading, link या list। वास्तविक button को बिना आपके किसी प्रयास के button भूमिका मिल जाती है।

हर नोड का एक सुलभ नाम भी होता है, यानी वह पाठ जिसे स्क्रीन रीडर बोलता है। button के लिए यह आमतौर पर उसके भीतर दिखाई देने वाला लेबल होता है।

इंटरैक्टिव नोड एक स्थिति भी बताते हैं, जैसे चयनित, विस्तृत या अक्षम। इसी तरह उपयोगकर्ता सुन पाता है कि कोई बॉक्स पहले से चिह्नित है।

इस प्रकार हर नोड अंततः भूमिका, नाम, स्थिति और मान में सिमट जाता है। यह छोटा-सा पैकेज स्क्रीन रीडर को किसी तत्व की घोषणा करने के लिए आवश्यक सब कुछ देता है।

display none या aria-hidden से छिपी कोई भी चीज़ वृक्ष से हटा दी जाती है। यदि वह वृक्ष में नहीं है, तो स्क्रीन रीडर उस तक नहीं पहुँच सकता।

रंग और आकार जैसी दृश्य शैलियाँ कभी सुलभता वृक्ष में शामिल नहीं होतीं। स्क्रीन रीडर उपयोगकर्ता को आपके लेआउट के बजाय अर्थ और संरचना मिलती है।

क्लिक किए जा सकने वाला div वृक्ष में बिना भूमिका और बिना नाम वाले सामान्य नोड के रूप में आता है। button जैसा दिखने के बावजूद उपयोगकर्ता को कोई उपयोगी जानकारी सुनाई नहीं देती।

ब्राउज़र DevTools किसी भी तत्व के लिए सक्रिय सुलभता वृक्ष दिखाते हैं। स्क्रीन रीडर वास्तव में क्या घोषित करेगा, यह पक्का करने का यह सबसे तेज़ तरीका है।

मुख्य सीख यह है: आपका मार्कअप वृक्ष का स्रोत है। HTML ठीक करने पर वृक्ष अपने-आप ठीक हो जाता है; किसी अतिरिक्त पैबंद की आवश्यकता नहीं होती।

सुलभता वृक्ष आपका DOM है, जिसे भूमिका, नाम, स्थिति और मान में संक्षिप्त किया गया है। मार्कअप ठीक करें और वृक्ष उसका अनुसरण करेगा। छिपी चीज़ें बाहर हो जाती हैं। 🎉