ARIA और एचटीएमएल

ज़्यादातर डेवलपर हमारे आधुनिक वेब की स्टैंडर्ड मार्कअप लैंग्वेज, हाइपरटेक्स्ट मार्कअप लैंग्वेज (एचटीएमएल) के बारे में जानते हैं. हालांकि, शायद आपको सुलभता वाले रिच इंटरनेट ऐप्लिकेशन (ARIA) (जिसे पहले WAI-ARIA कहा जाता था): इसका इस्तेमाल क्या है, इसका इस्तेमाल कैसे किया जाता है, और कब—और कब नहीं—के बारे में आपको कम जानकारी होगी.

डिजिटल प्रॉडक्ट को ऐक्सेस करने लायक बनाने में, एचटीएमएल और ARIA अहम भूमिका निभाते हैं. खास तौर पर, जब स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी (AT) की बात हो. कॉन्टेंट को ब्रेल या लिखाई को बोली में बदलने की सुविधा (टीटीएस) जैसे वैकल्पिक फ़ॉर्मैट में बदलने के लिए, दोनों का इस्तेमाल किया जाता है.

आइए, ARIA के छोटे इतिहास पर नज़र डालते हैं. आइए, देखते हैं कि यह क्यों ज़रूरी है और इसका इस्तेमाल कब और कैसे करना चाहिए.

ARIA के बारे में जानकारी

ARIA को सबसे पहले 2008 में वेब ऐक्सेसिबिलिटी इनिशिएटिव (डब्ल्यूएआई) ग्रुप ने बनाया था. यह एक बहुत बड़े वर्ल्ड वाइड वेब कंसोर्टियम (W3C) का सबसेट है. यह इंटरनेट को मैनेज और कंट्रोल करता है.

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

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

द डब्ल्यूएआई ग्रुप

सुलभता ट्री

AT का इस्तेमाल करने वालों को बेहतर अनुभव देने के लिए, ARIA गलत या अधूरे कोड में बदलाव करता है.

सुलभता ट्री को ब्राउज़र बनाता है और स्टैंडर्ड डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) ट्री पर आधारित होता है. डीओएम ट्री की तरह, सुलभता ट्री में भी ऐसे ऑब्जेक्ट होते हैं जो सभी मार्कअप एलिमेंट, एट्रिब्यूट, और टेक्स्ट नोड को दिखाते हैं. सुलभता ट्री का इस्तेमाल प्लैटफ़ॉर्म के हिसाब से बने सुलभता एपीआई भी करते हैं. इससे, सहायक टेक्नोलॉजी को समझने में मदद मिलती है.

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

ARIA की तीन मुख्य सुविधाएं, भूमिकाएं, प्रॉपर्टी, और स्टेटस/वैल्यू हैं.

भूमिकाएं यह तय करती हैं कि कोई एलिमेंट, पेज या ऐप्लिकेशन पर क्या करता है या क्या करता है.

<div role="button">Self-destruct</div>

प्रॉपर्टी किसी ऑब्जेक्ट की विशेषताओं या संबंधों को दिखाती हैं.

<div role="button" aria-describedby="more-info">Self-destruct</div>

<div id="more-info">This page will self-destruct in 10 seconds.</div>

राज्य/वैल्यू, एलिमेंट से जुड़ी मौजूदा स्थितियों या डेटा वैल्यू को तय करते हैं.

<div role="button" aria-describedby="more-info" aria-pressed="false">
  Self-destruct
</div>

<div id="more-info">
  This page will self-destruct in 10 seconds.
</div>

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

हाल ही में, Chrome DevTools ने सभी सुलभता ट्री देखने का एक तरीका बनाया है. इससे डेवलपर आसानी से यह समझ पाएंगे कि उनके कोड, सुलभता पर किस तरह असर डालते हैं.

ARIA का इस्तेमाल कब करना चाहिए

साल 2014 में, W3C ने आधिकारिक तौर पर HTML5 सुझाव पब्लिश किया. इस अपडेट के बाद, कुछ बड़े बदलाव हुए हैं. इनमें <main>, <header>, <footer>, <aside>, <nav>, और hidden और required जैसे लैंडमार्क एलिमेंट शामिल हैं. इन नए HTML5 एलिमेंट और एट्रिब्यूट के साथ, ब्राउज़र पर बेहतर तरीके से काम करने की सुविधा के साथ, ARIA के कुछ हिस्सों की अब ज़रूरत कम हो गई है.

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

इससे हमें सबसे आखिर सवाल मिलता है: आपको ARIA का इस्तेमाल कब करना चाहिए? शुक्र है कि WAI ग्रुप ने ARIA के पांच नियम बनाए हैं, ताकि आपको यह तय करने में मदद मिल सके कि एलिमेंट को कैसे ऐक्सेस किया जा सकता है.

पहला नियम: ARIA का इस्तेमाल न करें

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

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

<a role="button">Submit</a>

<button>Submit</button>

किसी भी तरह का संदेह होने पर, सिमेंटिक एचटीएमएल एलिमेंट का इस्तेमाल करें.

नियम 2: HTML में ARIA (ग़ैर-ज़रूरी) न जोड़ें

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

<h2 role="tab">Heading tab</h2>

<div role="tab"><h2>Heading tab</h2></div>

जब आप एचटीएमएल एलिमेंट का इस्तेमाल सही तरीके से करते हैं, तो आपको कम मेहनत करनी चाहिए और कोड की परफ़ॉर्मेंस भी बेहतर होनी चाहिए.

नियम 3: कीबोर्ड नेविगेशन को हमेशा इस्तेमाल करें

सभी इंटरैक्टिव (बंद नहीं हैं) ARIA कंट्रोल, कीबोर्ड से ऐक्सेस किए जा सकने वाले होने चाहिए. ऐसे किसी भी एलिमेंट में Tabindex= "0" जोड़ा जा सकता है जिस पर फ़ोकस करने की ज़रूरत आम तौर पर कीबोर्ड फ़ोकस नहीं होती. जब भी हो सके, कीबोर्ड फ़ोकस के क्रम में संभावित समस्याओं से बचने के लिए, पॉज़िटिव इंटीजर वाले टैब इंडेक्स का इस्तेमाल न करें.

<span role="button" tabindex="1">Submit</span>

<span role="button" tabindex="0">Submit</span>

नियम 4: फ़ोकस करने लायक एलिमेंट न छिपाएं

जिन एलिमेंट पर फ़ोकस करना ज़रूरी है उनमें role= "presentation" या aria-hidden= "true" को शामिल न करें. इनमें tabindex= "0" वाले एलिमेंट भी शामिल हैं. जब इन भूमिकाओं/स्थितियों को एलिमेंट में जोड़ा जाता है, तो यह AT को एक मैसेज भेजता है कि ये एलिमेंट ज़रूरी नहीं हैं और उन्हें छोड़ देना चाहिए. इससे, उपयोगकर्ताओं को किसी एलिमेंट से इंटरैक्ट करने में उलझन हो सकती है या रुकावट आ सकती है.

<div aria-hidden="true"><button>Submit</button></div>

<div><button>Submit</button></div>

नियम 5: इंटरैक्टिव एलिमेंट के लिए ऐक्सेस किए जा सकने वाले नामों का इस्तेमाल करना

इंटरैक्टिव एलिमेंट का मकसद, उपयोगकर्ता को उसके साथ इंटरैक्ट करने से पहले उसके बारे में बताना ज़रूरी है. पक्का करें कि AT डिवाइस का इस्तेमाल करने वाले लोगों के लिए, सभी एलिमेंट में ऐक्सेस किया जा सकने वाला नाम हो.

ऐक्सेस किए जा सकने वाले नाम, ऐसा कॉन्टेंट हो सकता है जिसके आस-पास कोई एलिमेंट (<a> के मामले में), वैकल्पिक टेक्स्ट या लेबल हो.

यहां दिए गए कोड सैंपल में से हर एक के लिए, ऐक्सेस किया जा सकने वाला नाम "लाल लेदर के बूट" है.

<!-- A plain link with text between the link tags. -->
<a href="shoes.html">Red leather boots</a>

<!-- A linked image, where the image has alt text. -->
<a href="shoes.html"><img src="shoes.png" alt="Red leather boots"></a>

<!-- A checkbox input with a label. -->
<input type="checkbox" id="shoes">
<label for="shoes">Red leather boots</label>

किसी एलिमेंट का ऐक्सेस किया जा सकने वाला नाम देखने के कई तरीके हैं. जैसे, Chrome DevTools का इस्तेमाल करके सुलभता ट्री की जांच करना या स्क्रीन रीडर की मदद से उसकी जांच करना.

एचटीएमएल में ARIA

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

बेशक, एचटीएमएल में एआरए लागू करने के लिए सुझाव दिए गए हैं. सबसे ज़रूरी बात: डिफ़ॉल्ट एचटीएमएल भूमिकाओं को न बदलें, ग़ैर-ज़रूरी चीज़ों को कम करें, और अनचाहे साइड इफ़ेक्ट से सावधान रहें.

आइए कुछ उदाहरण देखें.

<a role="heading">Read more</a>

<a aria-label="Read more about some awesome article title">Read More</a>

<ul role="list">...</ul>

<ul>...</ul>

<details>
  <summary role="button">more information</summary>
  ...
</details>

<details>
  <summary>more information</summary>
  ...
</details>

ARIA की जटिलताएं

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

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

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

आपने जो सीखा है उसकी जांच करें

ARIA और एचटीएमएल के बारे में अपनी जानकारी की जांच करें