ARIA और एचटीएमएल

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

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

ARIA के इतिहास के बारे में खास जानकारी देखें. साथ ही, जानें कि यह क्यों ज़रूरी है और इसका सबसे सही तरीके से इस्तेमाल कब और कैसे किया जा सकता है.

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

ARIA को पहली बार 2008 में Web Accessibility Initiative (WAI) ग्रुप ने बनाया था. यह वर्ल्ड वाइड वेब कंसोर्टियम (W3C) का एक सबसेट है. W3C, इंटरनेट को कंट्रोल और रेगुलेट करता है.

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

"WAI-ARIA, Accessible Rich Internet Applications Suite, वेब कॉन्टेंट और वेब ऐप्लिकेशन को दिव्यांग लोगों के लिए ज़्यादा सुलभ बनाने का तरीका बताता है. यह खास तौर पर, लगातार अपडेट होने वाले कॉन्टेंट और एचटीएमएल, JavaScript, और उनसे जुड़ी टेक्नोलॉजी का इस्तेमाल करके बनाए गए बेहतर यूज़र इंटरफ़ेस कंट्रोल के लिए मददगार है."

The WAI group

सुलभता ट्री

ARIA, गलत या अधूरे कोड में बदलाव करता है, ताकि एटी का इस्तेमाल करने वाले लोगों को बेहतर अनुभव मिल सके. इसके लिए, वह ऐक्सेसिबिलिटी ट्री के कुछ हिस्सों में बदलाव करता है, उन्हें दिखाता है, और उन्हें बढ़ाता है.

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

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

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>

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

<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 को सही तरीके से शामिल करने से, एटी का इस्तेमाल करने वाले लोगों को आपकी वेबसाइट, ऐप्लिकेशन या अन्य डिजिटल प्रॉडक्ट का इस्तेमाल करने के लिए ज़रूरी सभी जानकारी मिल पाएगी. इससे वे इन प्रॉडक्ट का इस्तेमाल आसानी से और निष्पक्ष तरीके से कर पाएंगे.

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

ARIA का इस्तेमाल कब करें

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

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

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

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

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

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

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

<button>Submit</button>

अगर आपको यह तय करने में मुश्किल हो रही है कि कौनसे टैग का इस्तेमाल करना है, तो सिमेंटिक एचटीएमएल एलिमेंट का इस्तेमाल करें.

दूसरा नियम: एचटीएमएल में (ज़रूरत से ज़्यादा) ARIA न जोड़ें

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

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

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

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

तीसरा नियम: कीबोर्ड नेविगेशन की सुविधा हमेशा काम करनी चाहिए

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

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

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

चौथा नियम: फ़ोकस किए जा सकने वाले एलिमेंट न छिपाएं

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

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

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

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

उपयोगकर्ता को इंटरैक्टिव एलिमेंट के बारे में यह जानकारी पहले से होनी चाहिए कि वह किस काम के लिए है. पक्का करें कि एटी डिवाइसों का इस्तेमाल करने वाले लोगों के लिए, सभी एलिमेंट का सुलभ नाम हो.

सुलभ नाम, किसी एलिमेंट के आस-पास मौजूद कॉन्टेंट (<a> के मामले में), वैकल्पिक टेक्स्ट या लेबल हो सकता है.

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

<!-- 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 एलिमेंट जोड़े जा सकते हैं. उदाहरण के लिए, एआरआईए को एचटीएमएल के साथ उन पैटर्न में जोड़ा जा सकता है जिनमें एटी की बेहतर सुविधा की ज़रूरत होती है. ऐसा इसलिए, क्योंकि पर्यावरण से जुड़ी पाबंदियां होती हैं. इसके अलावा, एआरआईए को एचटीएमएल एलिमेंट के लिए फ़ॉल-बैक तरीके के तौर पर भी इस्तेमाल किया जा सकता है. ऐसा तब किया जाता है, जब सभी ब्राउज़र में एचटीएमएल एलिमेंट पूरी तरह से काम नहीं करते.

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

यहां कुछ उदाहरण दिए गए हैं.

<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 एक जटिल सुविधा है. इसलिए, इसका इस्तेमाल करते समय हमेशा सावधानी बरतनी चाहिए. इस लेसन में दिए गए कोड के उदाहरण काफ़ी आसान हैं. हालांकि, सुलभ कस्टम पैटर्न बनाना मुश्किल हो सकता है.

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

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