ARIA लेबल और रिलेशनशिप

ऐक्सेस किए जा सकने वाले एलिमेंट के ब्यौरे बनाने के लिए, ARIA लेबल का इस्तेमाल करना

ऐलिस बॉक्सहॉल

डेव गैश

मेगिन किर्नी

लेबल

ARIA, एलिमेंट में लेबल और ब्यौरा जोड़ने के कई तरीके उपलब्ध कराता है. वास्तव में, ARIA के ज़रिए ऐक्सेस किया जा सकने वाला सहायता या जानकारी वाला टेक्स्ट जोड़ा जा सकता है. आइए, उन प्रॉपर्टी को देखते हैं जिन्हें ARIA ऐक्सेस किए जा सकने वाले लेबल बनाने के लिए इस्तेमाल करता है.

आरिया-लेबल

aria-label हमें ऐक्सेस किए जा सकने वाले लेबल के रूप में इस्तेमाल करने के लिए, किसी स्ट्रिंग को तय करने की अनुमति देता है. इससे लेबल करने के दूसरे सभी नेटिव तरीके बदल जाते हैं, जैसे कि label एलिमेंट — उदाहरण के लिए, अगर button में टेक्स्ट कॉन्टेंट और aria-label, दोनों हैं, तो सिर्फ़ aria-label वैल्यू का इस्तेमाल किया जाएगा.

आप aria-label एट्रिब्यूट का इस्तेमाल तब कर सकते हैं, जब आप किसी एलिमेंट के मकसद के बारे में बताते हैं. उदाहरण के लिए, ऐसा बटन जो टेक्स्ट के बजाय ग्राफ़िक का इस्तेमाल करता है, लेकिन आपको इस मकसद के बारे में उन सभी लोगों को साफ़ तौर पर बताना होगा जो विज़ुअल संकेत को ऐक्सेस नहीं कर सकते. उदाहरण के लिए, ऐसा बटन जो अपने मकसद के बारे में बताने के लिए सिर्फ़ इमेज का इस्तेमाल करता हो.

आरिया-लेबल किया गया

aria-labelledby की मदद से हम डीओएम में किसी दूसरे एलिमेंट के आईडी को एलिमेंट के लेबल के रूप में तय कर सकते हैं.

यह कुछ मुख्य अंतर के साथ, काफ़ी हद तक label एलिमेंट का इस्तेमाल करने जैसा है.

1. aria-labelledby का इस्तेमाल किसी भी एलिमेंट पर किया जा सकता है, न कि सिर्फ़ लेबल किए जा सकने वाले एलिमेंट पर.
2. label एलिमेंट, उस चीज़ के बारे में बताता है जिसे वह लेबल करता है. वहीं, aria-labelledby के मामले में संबंध इससे उलट होता है. लेबल वाली चीज़ उस चीज़ के बारे में बताती है जो उसे लेबल करती है.
3. लेबल किए जा सकने वाले किसी एलिमेंट के साथ सिर्फ़ एक लेबल एलिमेंट जोड़ा जा सकता है. हालांकि, एक से ज़्यादा एलिमेंट से लेबल बनाने के लिए aria-labelledby, IDREF की सूची का इस्तेमाल कर सकता है. लेबल को उसी क्रम में जोड़ा जाएगा जिस क्रम में IDREF दिए गए हैं.
4. aria-labelledby का इस्तेमाल करके, उन एलिमेंट के बारे में बताया जा सकता है जो छिपे हुए हैं. ऐसा न होने पर, वे सुलभता ट्री में नहीं दिखेंगे. जैसे, जिस एलिमेंट को लेबल करना है उसके बगल में छिपा हुआ span जोड़ा जा सकता है और aria-labelledby से इसका रेफ़रंस दिया जा सकता है.
5. हालांकि, ARIA सिर्फ़ सुलभता ट्री पर असर डालता है, इसलिए aria-labelledby आपको वह लेबल क्लिक करने का जाना-पहचाना तरीका नहीं बताता जो आपको label एलिमेंट का इस्तेमाल करने पर मिलता है.

अहम तौर पर, aria-labelledby किसी एलिमेंट के लिए, नाम वाले सभी अन्य सोर्स को बदल देता है. उदाहरण के लिए, अगर किसी एलिमेंट में aria-labelledby और aria-label, दोनों मौजूद हैं या aria-labelledby और नेटिव एचटीएमएल label, दोनों मौजूद हैं, तो aria-labelledby लेबल को हमेशा अहमियत दी जाएगी.

रिलेशनशिप

aria-labelledby, Relationship एट्रिब्यूट का एक उदाहरण है. रिलेशनशिप एट्रिब्यूट, पेज पर एलिमेंट के बीच सिमैंटिक संबंध बनाता है. इससे कोई फ़र्क़ नहीं पड़ता कि एलिमेंट का डीओएम संबंध है या नहीं. aria-labelledby के मामले में, वह संबंध "यह एलिमेंट उस एलिमेंट से लेबल किया गया है".

ARIA स्पेसिफ़िकेशन में, असर वाले आठ एट्रिब्यूट की सूची दी गई है. इनमें से छह, aria-activedescendant, aria-controls, aria-describedby, aria-labelledby, और aria-owns, एक या एक से ज़्यादा एलिमेंट का रेफ़रंस लेते हैं. इससे, पेज के एलिमेंट के बीच एक नया लिंक बनाया जा सकता है. हर मामले में अंतर यह होता है कि उस लिंक का क्या मतलब है और यह उपयोगकर्ताओं को कैसे दिखेगा.

आरिया-मालिक

aria-owns, सबसे ज़्यादा इस्तेमाल किए जाने वाले ARIA रिलेशनशिप में से एक है. इस एट्रिब्यूट की मदद से हम सहायक टेक्नोलॉजी को यह बता पाते हैं कि डीओएम में मौजूद किसी एलिमेंट को मौजूदा एलिमेंट का चाइल्ड एलिमेंट माना जाना चाहिए या मौजूदा चाइल्ड एलिमेंट को किसी दूसरे क्रम में फिर से व्यवस्थित किया जाना चाहिए. उदाहरण के लिए, अगर पॉप-अप सब-मेन्यू विज़ुअल तौर पर उसके पैरंट मेन्यू के पास रखा गया है, लेकिन वह अपने पैरंट मेन्यू का DOM चाइल्ड नहीं हो सकता, क्योंकि इससे विज़ुअल प्रज़ेंटेशन पर असर पड़ेगा, तो स्क्रीन रीडर पर सब-मेन्यू को पैरंट मेन्यू के चाइल्ड के तौर पर दिखाने के लिए aria-owns का इस्तेमाल किया जा सकता है.

आरिया-ऐक्टिव डिकेन्डेंट

aria-activedescendant इससे मिलती-जुलती भूमिका निभाता है. जिस तरह पेज का ऐक्टिव एलिमेंट उस पर फ़ोकस करता है जिस पर फ़ोकस होता है उसी तरह, किसी एलिमेंट के ऐक्टिव डिसेंडेंट को सेट करने से, हमें सहायक टेक्नोलॉजी को यह बताने में मदद मिलती है कि उस एलिमेंट को उपयोगकर्ता को फ़ोकस एलिमेंट के तौर पर तब दिखाया जाना चाहिए, जब उसके पैरंट एलिमेंट पर फ़ोकस मौजूद हो. उदाहरण के लिए, सूची बॉक्स में, हो सकता है कि आप पेज फ़ोकस को लिस्टबॉक्स कंटेनर पर छोड़ना चाहें. हालांकि, इसके aria-activedescendant एट्रिब्यूट को, चुने गए मौजूदा सूची आइटम में अपडेट करके रखना चाहें. इससे सहायक तकनीक पर वर्तमान में चुना गया आइटम इस तरह से दिखाई देता है, जैसे वह फ़ोकस किया गया आइटम हो.

आरिया-डीनाल्डबी

aria-describedby जिस तरह aria-labelledby के लिए लेबल देता है उसी तरह से, ऐक्सेस किया जा सकने वाला ब्यौरा दिखता है. aria-labelledby की तरह, aria-describedby भी ऐसे एलिमेंट का रेफ़रंस दे सकता है जो आम तौर पर नहीं दिखते. भले ही, वे एलिमेंट डीओएम से छिपाए गए हों या सहायक टेक्नोलॉजी इस्तेमाल करने वालों से छिपाए गए हों. यह एक उपयोगी तकनीक है, जब जानकारी देने वाले कुछ और टेक्स्ट की ज़रूरत उपयोगकर्ता को पड़ सकती है, चाहे वह सिर्फ़ सहायक टेक्नोलॉजी के उपयोगकर्ताओं पर लागू होता हो या सभी उपयोगकर्ताओं पर.

इसका एक सामान्य उदाहरण एक पासवर्ड इनपुट फ़ील्ड है, जिसमें कुछ जानकारी देने वाला टेक्स्ट होता है. यह टेक्स्ट, पासवर्ड की कम से कम ज़रूरी शर्तों की जानकारी देता है. किसी लेबल से अलग, यह जानकारी लोगों को दी जा सकती है और नहीं भी. हो सकता है कि उनके पास यह तय करने का विकल्प हो कि इस जानकारी को ऐक्सेस करना है या नहीं. इसके अलावा, यह दूसरी जानकारी के बाद आ सकता है या फिर इसे किसी और जानकारी के साथ दिखाया जा सकता है. उदाहरण के लिए, अगर उपयोगकर्ता जानकारी डाल रहा है, तो उसका इनपुट एक बार फिर से सुनाई देगा. इससे एलिमेंट के ब्यौरे में रुकावट आ सकती है. इसलिए, ब्यौरा, पूरक जानकारी देने का एक शानदार तरीका है. हालांकि, यह ज़रूरी नहीं है, क्योंकि इसका इस्तेमाल एलिमेंट के रोल जैसी ज़्यादा अहम जानकारी देने के लिए नहीं किया जा सकता.

आरिया-पॉज़िंसेट और आरिया-सेटसाइज़

संबंध बताने वाले बाकी एट्रिब्यूट थोड़े अलग होते हैं और एक साथ काम करते हैं. aria-posinset ("सेट में पोज़िशन") और aria-setsize ("सेट का साइज़"), किसी सेट में सिबलिंग एलिमेंट के बीच संबंध तय करने के बारे में बताता है, जैसे कि सूची.

अगर किसी सेट का साइज़ डीओएम में मौजूद एलिमेंट से तय नहीं किया जा सकता, जैसे कि जब लेज़ी रेंडरिंग का इस्तेमाल, एक ही समय में पूरी बड़ी सूची को बनाए रखने से बचने के लिए किया जाता है, तो सेट का साइज़ aria-setsize तय कर सकता है और aria-posinset सेट में एलिमेंट की जगह तय कर सकता है. उदाहरण के लिए, ऐसे सेट में जिसमें 1,000 एलिमेंट शामिल हो सकते हैं, यह कहा जा सकता है कि किसी खास एलिमेंट का aria-posinset है, भले ही वह डीओएम में पहले दिखता है. इसके बाद, डाइनैमिक एचटीएमएल तकनीकों का इस्तेमाल करके, यह पक्का किया जा सकता है कि उपयोगकर्ता मांग पर पूरी सूची को एक्सप्लोर कर सके.