ARIA: ज़हर या ऐंटीडोट?

ARIA क्या है?

ARIA की मदद से, वेब लेखक एक वैकल्पिक रिएलिटी बना सकते हैं. इसे सिर्फ़ स्क्रीन रीडर देख सकते हैं.

कभी-कभी, वेब कॉन्टेंट में क्या हो रहा है, इस बारे में स्क्रीन रीडर को बताने के लिए, सच्चाई के बारे में ज़्यादा जानकारी देना या फिर सीधे तौर पर "झूठ" बोलना ज़रूरी होता है. उदाहरण के लिए, "ध्यान खींचना सच में यहां है!" या "यह सच में एक स्लाइडर है!". यह ठीक वैसा ही है जैसे आपके वर्कबेंच में मौजूद टूल और विजेट के ऊपर, जादुई नोट जोड़े जा सकते हैं. इन जादुई स्टिकी नोट पर लिखी गई बातों पर सभी लोग यकीन करते हैं.

जब कोई जादुई स्टिकी नोट मौजूद होता है, तो यह इस बात पर असर डालता है कि हर टूल क्या है या क्या करता है. उदाहरण के लिए, अगर आपने ARIA एट्रिब्यूट के तौर पर "यह चीज़ यहां एक ग्लू गन है!" जोड़ा है. भले ही, यह एक खाली नीला बॉक्स है, लेकिन मैजिकल चिपकने वाली नोट से हमें पता चलता है कि यह एक ग्लू गन है. हम "और यह 30% भरा हुआ है!" भी जोड़ सकते हैं. स्क्रीन रीडर अब बताता है कि ग्लू गन में 30% ग्लू है.

वेब पर, इसके बराबर का कोई एलिमेंट बनाने के लिए, एक सादा div बनाएं और उसमें एक इमेज डालें. इसके बाद, ARIA का इस्तेमाल करके बताएं कि यह एक स्लाइडर है और इसकी वैल्यू 100 में से 30 है. ARIA, div को स्लाइडर नहीं बनाता है. यह सिर्फ़ स्क्रीन रीडर को बताता है कि यह एक स्लाइडर है.

ARIA का इस्तेमाल करने से, वेब पेज के दिखने के तरीके या माउस या कीबोर्ड का इस्तेमाल करने के तरीके पर कोई असर नहीं पड़ता. सिर्फ़ सहायक टेक्नोलॉजी के उपयोगकर्ता ही ARIA के असर को देखते हैं. वेब डेवलपर, उन उपयोगकर्ताओं को प्रभावित किए बिना कोई भी आर्बिट्रेरी ARIA जोड़ सकते हैं जो सहायक टेक्नोलॉजी नहीं चला रहे हैं.

आपने सही पढ़ा है: ARIA, कीबोर्ड फ़ोकस या टैब ऑर्डर के लिए कुछ नहीं करता. यह एचटीएमएल में किया जाता है. कभी-कभी, इसमें JavaScript का इस्तेमाल भी किया जाता है.

ARIA कैसे काम करता है?

स्क्रीन रीडर या अन्य सहायक तकनीक, ब्राउज़र से हर एलिमेंट के बारे में जानकारी मांगती है. जब किसी एलिमेंट पर ARIA मौजूद होता है, तो ब्राउज़र उस एलिमेंट के बारे में स्क्रीन रीडर को बताई जाने वाली जानकारी में बदलाव करता है.

यहां एरिया के कुछ सामान्य इस्तेमाल के उदाहरण दिए गए हैं.

• एचटीएमएल में मौजूद नहीं होने वाले खास कॉम्पोनेंट जोड़ें. जैसे, अपने-आप पूरा होने वाला टेक्स्ट, ट्री या स्प्रेडशीट.
• एचटीएमएल में मौजूद कॉम्पोनेंट जोड़ें, लेकिन लेखक ने इसे नए सिरे से इस्तेमाल करने का फ़ैसला लिया. इसकी वजह यह हो सकती है कि वे स्टैंडर्ड एलिमेंट के व्यवहार या लुक में बदलाव करना चाहते हों. उदाहरण के लिए, एचटीएमएल <input type="range"> एलिमेंट, मूल रूप से एक स्लाइडर होता है. हालांकि, लेखक इसे अलग तरह से दिखाना चाहते हैं.
  • ज़्यादातर मामलों में, सीएसएस की मदद से इस समस्या को हल किया जा सकता है. हालांकि, range के लिए सीएसएस का इस्तेमाल करना मुश्किल है. लेखक अपना स्लाइडर बना सकते हैं और aria-valuenow की मदद से role="slider" का इस्तेमाल करके, कीबोर्ड को मौजूदा वैल्यू बता सकते हैं.
• स्क्रीन रीडर को पेज के किसी हिस्से में हुए ज़रूरी बदलावों के बारे में बताने के लिए, लाइव रीजन शामिल करें.
• हेडिंग जैसे लैंडमार्क बनाएं. लैंडमार्क की मदद से, स्क्रीन रीडर इस्तेमाल करने वाले लोग अपनी पसंद के कॉन्टेंट को तेज़ी से ढूंढ सकते हैं. लैंडमार्क में, उससे जुड़ा पूरा इलाका शामिल हो सकता है. उदाहरण के लिए, "यह कंटेनर पेज का मुख्य हिस्सा है" और "यह कंटेनर यहां एक नेविगेशन पैनल है".

ARIA क्यों?

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

मेन्यू बार का उदाहरण

मान लें कि स्थानीय वेब स्टोर पर, हमारे काम के सभी विजेट नहीं मिलते. हालांकि, हम MacGyver हैं. हम बस दूसरे विजेट से अपने विजेट का आविष्कार कर सकते हैं! यह ठीक वैसा ही है जैसे किसी वेब लेखक को मेन्यू बार बनाना हो.

<nav> एलिमेंट मौजूद होने के बावजूद, मेन्यू बार को अक्सर divs, इमेज, बटन, क्लिक हैंडलर, बटन दबाने पर होने वाली कार्रवाइयों के हैंडल, और ARIA का इस्तेमाल करके एक साथ जोड़ा जाता है.

माउस के उपयोगकर्ताओं के साथ काम करना

आइए, मिलकर एक मेन्यू बार बनाते हैं. हम कई आइटम को divs नाम के सामान्य बॉक्स एलिमेंट में दिखाते हैं. जब भी कोई उपयोगकर्ता किसी डायव पर क्लिक करता है, तो वह उससे जुड़ा निर्देश लागू करता है. वाह, यह माउस क्लिक करने वाले लोगों के लिए काम करता है!

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

मेन्यू के कुछ आइटम पैरंट होते हैं. ये चाइल्ड सबमेन्यू बनाते हैं. जब भी कोई उपयोगकर्ता इनमें से किसी एक आइकॉन पर कर्सर घुमाता है, तो हम एक ऐनिमेशन शुरू करते हैं. यह ऐनिमेशन, चाइल्ड सबमेन्यू को स्लाइड करके बाहर निकालता है.

वेब पर मौजूद कई चीज़ों की तरह, इनका ऐक्सेस पाना काफ़ी मुश्किल है.

हमारे मेन्यू बार के कीबोर्ड को ऐक्सेस करने की सुविधा जोड़ना

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

जिस तरह वेब पेज, माउस के निर्देशों का पालन करता है उसी तरह कीबोर्ड के निर्देशों का भी पालन करता है. हमारा JavaScript, होने वाले सभी कीस्ट्रोक को सुन सकता है और यह तय कर सकता है कि कीस्ट्रोक काम का है या नहीं. अगर ऐसा नहीं है, तो इसे किसी मछली की तरह पेज पर वापस भेज दिया जाता है, जो खाने के हिसाब से बहुत छोटी होती है. हमारे नियम कुछ इस तरह के हैं:

• अगर उपयोगकर्ता ऐरो बटन दबाता है, तो आइए अपने मेन्यू बार के ब्लूप्रिंट देखें और तय करें कि नया ऐक्टिव मेन्यू आइटम क्या होना चाहिए. हम मौजूदा हाइलाइट हटा देंगे और नए मेन्यू आइटम को हाइलाइट करेंगे, ताकि जो व्यक्ति देख रहा है उसे पता चल सके कि वह कहां है. इसके बाद, वेब पेज को event.preventDefault() को कॉल करना चाहिए, ताकि ब्राउज़र सामान्य कार्रवाई (इस मामले में, पेज को स्क्रोल करना) न कर सके.
• अगर उपयोगकर्ता Enter बटन दबाता है, तो हम इसे क्लिक की तरह ही इस्तेमाल कर सकते हैं और ज़रूरी कार्रवाई कर सकते हैं. इसके अलावा, हम कोई दूसरा मेन्यू भी खोल सकते हैं.
• अगर उपयोगकर्ता किसी ऐसे बटन को दबाता है जिससे कोई और काम करना चाहिए, तो उसे वापस पेज पर भेजें. उदाहरण के लिए, हमारे मेन्यू बार को Tab बटन की ज़रूरत नहीं है, इसलिए उसे वापस फेंक दें! इसे सही करना मुश्किल है. उदाहरण के लिए, मेन्यू बार के लिए ऐरो बटन की ज़रूरत होती है, लेकिन Alt+ऐरो या Command+ऐरो की ज़रूरत नहीं होती. ये आपके ब्राउज़र टैब के वेब इतिहास में, पिछले और अगले पेज पर जाने के लिए शॉर्टकट हैं. अगर लेखक सावधान नहीं है, तो मेन्यू बार उन्हें खा जाएगा. इस तरह की गड़बड़ी अक्सर होती है. हमने अभी तक ARIA का इस्तेमाल शुरू भी नहीं किया है!

हमारे मेन्यू बार का स्क्रीन रीडर ऐक्सेस

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

लेकिन यह सही नहीं है! मेन्यू बार, ऐसे उपयोगकर्ता के लिए ठीक से काम करता है जो देख सकता है.

ARIA की मदद से. ARIA की मदद से, हम स्क्रीन रीडर को यह बता सकते हैं कि फ़ोकस किसी मेन्यू बार पर है. अगर लेखक ने सब कुछ सही तरीके से किया है, तो स्क्रीन रीडर के लिए हमारा कस्टम मेन्यू बार, डेस्कटॉप ऐप्लिकेशन के मेन्यू बार की तरह ही दिखेगा.

ARIA का पहला झूठ aria-activedescendant एट्रिब्यूट है. एट्रिब्यूट को चालू मेन्यू आइटम के आईडी पर सेट करें. साथ ही, जब भी कोई बदलाव हो, उसे अपडेट करना न भूलें. उदाहरण के लिए, aria-activedescendant="settings-menuitem". इस वजह से, स्क्रीन रीडर हमारे ARIA ऐक्टिव आइटम को फ़ोकस के तौर पर लेता है. इसे तेज़ आवाज़ में पढ़कर सुनाया जाता है या ब्रेल डिसप्ले पर दिखाया जाता है.

फ़ोकस किए गए मेन्यू बार से किसी खास मेन्यू आइटम पर जाने के लिए, aria-activedescendant का इस्तेमाल करने से स्क्रीन रीडर को अब यह पता चल जाता है कि उपयोगकर्ता कहां गया है. हालांकि, उसे ऑब्जेक्ट के बारे में और कोई जानकारी नहीं मिलती. आखिर यह div क्या है? ऐसी ही स्थिति में भूमिका एट्रिब्यूट का इस्तेमाल होता है. हम पूरी चीज़ के लिए, एलिमेंट में role="menubar" का इस्तेमाल करते हैं. इसके बाद, आइटम के ग्रुप के लिए role="menu" का इस्तेमाल करते हैं. साथ ही, role="menuitem" का इस्तेमाल … ड्रमरोल … मेन्यू के अलग-अलग आइटम के लिए करते हैं.

अगर मेन्यू आइटम से चाइल्ड मेन्यू खुलता है, तो क्या होगा? उपयोगकर्ता को यह जानकारी होनी चाहिए. जिन लोगों को देखना आता है उनके लिए, मेन्यू के आखिर में एक छोटा त्रिकोण दिख सकता है. हालांकि, स्क्रीन रीडर को फ़िलहाल इमेज अपने-आप पढ़ने की सुविधा नहीं है. हम हर उस मेन्यू आइटम पर aria-expanded="false" जोड़ सकते हैं जिसे बड़ा किया जा सकता है. इससे यह पता चलता है कि कुछ ऐसा है जिसे बड़ा किया जा सकता है और वह बड़ा नहीं किया गया है. इसके अलावा, लेखक को img त्रिकोण पर role="none" डालना चाहिए, ताकि यह पता चल सके कि यह सिर्फ़ सुंदरता के लिए है. इससे स्क्रीन रीडर, इमेज के बारे में ऐसी कोई जानकारी नहीं देता जो ज़रूरी नहीं है.

कीबोर्ड से जुड़ी गड़बड़ियां ठीक करना

कीबोर्ड ऐक्सेस, मुख्य एचटीएमएल का हिस्सा है. हालांकि, इसे आसानी से बदला जा सकता है. जैसे:

• चेकबॉक्स को टॉगल करने के लिए, स्पेसबार का इस्तेमाल किया जाता है. हालांकि, लेखक ने preventDefault() को कॉल करना भूल गया. अब स्पेसबार, दोनों चेकबॉक्स को टॉगल करता है और पेज को नीचे ले जाता है, जो स्पेसबार के लिए ब्राउज़र का डिफ़ॉल्ट व्यवहार है.
• ARIA मोडल डायलॉग, टैब नेविगेशन को इसके अंदर ट्रैप करना चाहता है. अगर लेखक, डायलॉग बॉक्स में रहते हुए, Control+Tab का इस्तेमाल करके नया टैब खोलने की अनुमति नहीं देता है, तो यह सुविधा उम्मीद के मुताबिक काम नहीं करेगी.
• एक लेखक चयन सूची बनाता है और अप और डाउन कुंजियों को लागू करता है. हालांकि, लेखक को अब भी होम, एंड, पेजअप, पेजडाउन या पहले अक्षर पर नेविगेट करने की सुविधा जोड़नी होगी.

लेखकों को जाने-पहचाने पैटर्न का इस्तेमाल करना चाहिए. ज़्यादा जानकारी के लिए, संसाधन सेक्शन देखें.

कीबोर्ड ऐक्सेस से जुड़ी समस्याओं का पता लगाने के लिए, स्क्रीन रीडर का इस्तेमाल न करें या वर्चुअल ब्राउज़र मोड बंद करें. इससे आपको कीबोर्ड से जुड़ी गड़बड़ियों का पता चल सकता है. ऐसा इसलिए, क्योंकि कीबोर्ड ऐक्सेस को ARIA के बजाय एचटीएमएल की मदद से लागू किया जाता है. आखिरकार, ARIA का असर कीबोर्ड या माउस के व्यवहार पर नहीं पड़ता. इसके बजाय, यह स्क्रीन रीडर को बताता है कि वेब पेज पर क्या है, फ़िलहाल किस पर फ़ोकस किया गया है वगैरह.

वेब कॉन्टेंट में कीबोर्ड की गड़बड़ियां हमेशा मौजूद होती हैं, खास तौर पर उनके एचटीएमएल और JavaScript में, ARIA में नहीं.

इतने सारे क्यों हैं?

लेखक के पास ARIA का गलत इस्तेमाल करने के कई तरीके हैं. हर गलती से, ऐप्लिकेशन पूरी तरह से काम करना बंद कर सकता है या उसमें छोटे-मोटे अंतर हो सकते हैं. छोटी-मोटी समस्याएं और भी खराब हो सकती हैं, क्योंकि पब्लिश करने से पहले लेखक को उनका पता नहीं चल पाता है.

आखिरकार, जब तक लेखक स्क्रीन रीडर का इस्तेमाल करने में माहिर नहीं होता, तब तक ARIA में कुछ गड़बड़ी हो सकती है. हमारे मेन्यू बार वाले उदाहरण में, लेखक सोच सकता है कि "मेन्यू आइटम" के सही होने पर "विकल्प" वाली भूमिका का इस्तेमाल किया जाना था. हो सकता है कि वे aria-expanded का इस्तेमाल करना भूल जाएं, सही समय पर aria-activedescendant को सेट और हटाना भूल जाएं या अन्य मेन्यू वाले मेन्यू बार को इस्तेमाल करना भूल जाएं. मेन्यू आइटम की संख्या के बारे में क्या? आम तौर पर, स्क्रीन रीडर मेन्यू आइटम को "पांच में से तीसरा आइटम" जैसे कुछ के साथ दिखाते हैं, ताकि उपयोगकर्ता को पता चले कि वे कहां हैं. आम तौर पर, ब्राउज़र अपने-आप इसकी गिनती करता है. हालांकि, कुछ मामलों में और कुछ ब्राउज़र में स्क्रीन रीडर के कॉम्बिनेशन में, गलत संख्याओं का हिसाब लगाया जा सकता है. ऐसे में, लेखक को इन संख्याओं को aria-posinset और aria-setsize का इस्तेमाल करके बदलना होगा.

और यह सिर्फ़ मेन्यू बार है. देखें कि कितने तरह के विजेट हैं. अगर आप चाहें, तो ARIA स्पेसिफ़िकेशन या कॉन्टेंट लिखने के तरीकों पर एक नज़र डालें. हर पैटर्न के लिए, ARIA का गलत इस्तेमाल करने के 12 तरीके हैं. ARIA, लेखकों पर भरोसा करता है कि वे क्या कर रहे हैं. इसकी क्या गलती हो सकती है, क्योंकि ज़्यादातर लेखक स्क्रीन रीडर उपयोगकर्ता नहीं हैं?

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

खास जानकारी

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

ARIA एक मार्कअप लेयर है, जो अन्य विकल्पों को बदल देती है. जब कोई स्क्रीन रीडर पूछता है कि क्या हो रहा है, अगर ARIA मौजूद है, तो उपयोगकर्ता को सच का ARIA वर्शन मिलता है.

अन्य संसाधन

W3C के ARIA ऑथराइज़ेशन तरीकों में, हर उदाहरण के लिए कीबोर्ड नेविगेशन की अहम विशेषताओं के बारे में बताया गया है. साथ ही, इसमें काम करने वाली JavaScript, CSS, और ARIA की जानकारी दी गई है. इन उदाहरणों में, फ़िलहाल काम करने वाले तरीकों के बारे में बताया गया है. इनमें मोबाइल के बारे में नहीं बताया गया है.

Accessibility API क्या है?

सुलभता एपीआई की मदद से, स्क्रीन रीडर या अन्य सहायक तकनीक को यह पता चलता है कि पेज पर क्या है और उस पर क्या हो रहा है. उदाहरण के लिए, MSAA, IA2, और UIA. Accessibility API के दो हिस्से होते हैं:

• ऑब्जेक्ट का "ट्री", जो कंटेनर की हैरारकी दिखाता है. उदाहरण के लिए, किसी दस्तावेज़ में कई पैराग्राफ़ हो सकते हैं. पैराग्राफ़ में टेक्स्ट, इमेज, लिंक, और टेक्स्ट डेकोरेशन शामिल हो सकते हैं. ऑब्जेक्ट ट्री के हर आइटम में प्रॉपर्टी हो सकती हैं, जैसे कि भूमिका (मैं क्या हूं?), नाम या लेबल, उपयोगकर्ता की डाली गई वैल्यू, ब्यौरा, और बूलियन स्टेट, जैसे कि फ़ोकस करने लायक, फ़ोकस करने लायक, ज़रूरी, सही का निशान लगाया गया. ARIA, इनमें से किसी भी प्रॉपर्टी को बदल सकता है.
  • स्क्रीन रीडर, वर्चुअल बफ़र मोड में नेविगेट करने में उपयोगकर्ताओं की मदद करने के लिए ट्री का इस्तेमाल करते हैं. जैसे, "कृपया अगली हेडिंग पर जाएं".
• ट्री में होने वाले बदलावों की जानकारी देने वाले इवेंट की सीरीज़, जैसे कि "फ़ोकस अब यहां है!". स्क्रीन रीडर, उपयोगकर्ता को यह बताने के लिए इवेंट का इस्तेमाल करता है कि अभी क्या हुआ. जब ज़रूरी एचटीएमएल या ARIA मार्कअप में बदलाव होता है, तो स्क्रीन रीडर को यह बताने के लिए एक इवेंट ट्रिगर होता है कि कोई बदलाव हुआ है.

एचटीएमएल, इन सुलभता एपीआई के साथ अच्छी तरह से काम करता है. जब एचटीएमएल काफ़ी नहीं होता, तो ARIA जोड़ा जा सकता है, ताकि स्क्रीन रीडर को ऑब्जेक्ट ट्री या इवेंट भेजने से पहले, ब्राउज़र एचटीएमएल सेमेटिक्स को बदल दे.