ARIA और नॉन-नेटिव एचटीएमएल सिमैंटिक के बारे में जानकारी
अब तक, हमने नेटिव एचटीएमएल एलिमेंट का इस्तेमाल करने को बढ़ावा दिया है, क्योंकि उनसे आपको फ़ोकस, कीबोर्ड सपोर्ट, और पहले से मौजूद सिमैंटिक मिलता है. हालांकि, कई बार ऐसा होता है कि एक सामान्य लेआउट और नेटिव एचटीएमएल से भी काम नहीं बनता. उदाहरण के लिए, फ़िलहाल एक आम यूज़र इंटरफ़ेस (यूआई) कंस्ट्रक्शन, पॉप-अप मेन्यू के लिए कोई स्टैंडर्ड एचटीएमएल एलिमेंट नहीं है. न ही कोई ऐसा एचटीएमएल एलिमेंट है जो सिमेंटिक फ़ीचर देता हो, जैसे कि "उपयोगकर्ता को इस बारे में जल्द से जल्द जानकारी चाहिए".
इस लेख में, हम ऐसे सिमैंटिक दिखाने का तरीका जानेंगे जिन्हें एचटीएमएल अपने-आप नहीं दिखा सकता.
वेब सुलभता इनिशिएटिव की सुलभता से जुड़ी रिच इंटरनेट ऐप्लिकेशन की खास बातें (डब्ल्यूएआई-ARIA या सिर्फ़ ARIA) सुलभता से जुड़ी समस्याओं वाले उन हिस्सों को जोड़ने के लिए अच्छी है जिन्हें नेटिव एचटीएमएल से मैनेज नहीं किया जा सकता. यह आपको उन एट्रिब्यूट को तय करने की अनुमति देता है जो सुलभता ट्री में किसी एलिमेंट का अनुवाद करने के तरीके में बदलाव करते हैं. आइए, एक उदाहरण देखते हैं.
यहां दिए गए स्निपेट में, हम सूची आइटम का इस्तेमाल एक तरह के कस्टम चेकबॉक्स के तौर पर करते हैं. सीएसएस "चेकबॉक्स" क्लास, एलिमेंट को ज़रूरी विज़ुअल विशेषताएं उपलब्ध कराती है.
<li tabindex="0" class="checkbox" checked>
Receive promotional offers
</li>
यह सुविधा देख सकने वाले उपयोगकर्ताओं के लिए ठीक से काम करती है, लेकिन स्क्रीन रीडर से यह पता नहीं चलता कि एलिमेंट को चेकबॉक्स के तौर पर बनाया गया है. इससे, कम दृष्टि वाले उपयोगकर्ताओं से भी यह काम कर सकता है.
हालांकि, ARIA एट्रिब्यूट का इस्तेमाल करके हम एलिमेंट में छूटी हुई जानकारी दे सकते हैं, ताकि स्क्रीन रीडर उसे सही तरीके से समझ सके. यहां हमने role और aria-checked एट्रिब्यूट जोड़े हैं, ताकि एलिमेंट की साफ़ तौर पर पहचान चेकबॉक्स के तौर पर की जा सके. साथ ही, यह भी बताया गया है कि यह डिफ़ॉल्ट रूप से चुना हुआ है. सूची में मौजूद आइटम को अब सुलभता ट्री में जोड़ दिया जाएगा
और एक स्क्रीन रीडर उसे सही तरीके से चेकबॉक्स के रूप में रिपोर्ट करेगा.
<li tabindex="0" class="checkbox" role="checkbox" checked aria-checked="true">
Receive promotional offers
</li>
ARIA, स्टैंडर्ड डीओएम सुलभता ट्री को बदलकर और उसे बेहतर करके काम करता है.
हालांकि, ARIA हमें पेज पर किसी भी एलिमेंट के लिए सुलभता ट्री में मामूली तौर पर (या मूल रूप से) बदलाव करने की सुविधा देता है, लेकिन इसमें सिर्फ़ यही एक बदलाव है. ARIA एलिमेंट के पहले से मौजूद व्यवहार को बेहतर नहीं बनाता, इससे एलिमेंट को फ़ोकस करने लायक नहीं बनाया जा सकता या उसे कीबोर्ड इवेंट लिसनर का ऐक्सेस नहीं दिया जा सकता. यह अभी भी हमारे डेवलपमेंट टास्क का हिस्सा है.
यह समझना ज़रूरी है कि डिफ़ॉल्ट सिमैंटिक को फिर से परिभाषित करने की ज़रूरत नहीं है. स्टैंडर्ड एचटीएमएल <input type="checkbox"> एलिमेंट का इस्तेमाल चाहे जो भी हो, सही तरीके से एलान करने के लिए, अतिरिक्त role="checkbox" ARIA एट्रिब्यूट की ज़रूरत नहीं होती.
यह भी ध्यान रखें कि कुछ एचटीएमएल एलिमेंट पर इस बात की पाबंदी होती है कि उन पर ARIA
की भूमिकाएं और एट्रिब्यूट इस्तेमाल किए जा सकते हैं. उदाहरण के लिए, हो सकता है कि स्टैंडर्ड <input
type="text"> एलिमेंट में कोई अतिरिक्त भूमिका/एट्रिब्यूट लागू न हो.
ज़्यादा जानकारी के लिए, एचटीएमएल एट्रिब्यूट में ARIA देखें.
आइए, देखते हैं कि ARIA की और क्या सुविधाएं हैं.
ARIA क्या कर सकता है?
जैसा कि आपने चेकबॉक्स वाला उदाहरण देखा था, ARIA मौजूदा एलिमेंट सिमैंटिक में बदलाव कर सकता है या उन एलिमेंट में सिमैंटिक जोड़ सकता है जहां कोई नेटिव सिमैंटिक मौजूद नहीं होता. यह ऐसे सिमैंटिक पैटर्न भी दिखा सकता है जो एचटीएमएल में बिलकुल मौजूद नहीं होते, जैसे कि मेन्यू या टैब पैनल. अक्सर, ARIA हमें विजेट-टाइप एलिमेंट बनाने की सुविधा देता है, जो सामान्य एचटीएमएल के साथ मुमकिन नहीं होता.
- उदाहरण के लिए, ARIA अतिरिक्त लेबल और जानकारी वाला टेक्स्ट जोड़ सकता है. यह टेक्स्ट सिर्फ़ सहायक टेक्नोलॉजी एपीआई को दिखाया जाता है.
<button aria-label="screen reader only label"></button>
- ARIA, स्टैंडर्ड पैरंट/चाइल्ड कनेक्शन को बढ़ाने वाले एलिमेंट के बीच सिमैंटिक संबंध व्यक्त कर सकता है. उदाहरण के लिए, एक कस्टम स्क्रोलबार, जो किसी खास क्षेत्र को कंट्रोल करता है.
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>
- और ARIA, पेज के कुछ हिस्सों को "लाइव" बना सकता है, ताकि वे बदलने पर सहायक टेक्नोलॉजी को तुरंत सूचना दे सकें.
<div aria-live="polite">
<span>GOOG: $400</span>
</div>
ARIA सिस्टम के मुख्य पहलुओं में से एक है, इसकी भूमिकाओं का कलेक्शन. सुलभता शर्तों में कोई भूमिका, किसी खास यूज़र इंटरफ़ेस (यूआई) पैटर्न के लिए, शॉर्टहैंड इंडिकेटर की तरह होती है. ARIA उन पैटर्न की शब्दावली उपलब्ध कराता है जिन्हें हम किसी भी एचटीएमएल एलिमेंट पर role एट्रिब्यूट की मदद से इस्तेमाल कर सकते हैं.
जब हमने पिछले उदाहरण में role="checkbox" को लागू किया था, तब हम सहायक टेक्नोलॉजी को यह बता रहे थे कि एलिमेंट को "चेकबॉक्स" पैटर्न का पालन करना चाहिए. इसका मतलब है कि हम इस बात की गारंटी देते हैं कि इसमें सही का निशान लगा होगा (चेक किया गया या नहीं चुना गया). साथ ही, यह भी पक्का किया जा सकता है कि स्टेटस को माउस या स्पेसबार का इस्तेमाल करके,
किसी स्टैंडर्ड एचटीएमएल चेकबॉक्स एलिमेंट की तरह टॉगल किया जा सकता हो.
स्क्रीन रीडर इस्तेमाल करते समय कीबोर्ड इंटरैक्शन की सुविधा बहुत अहम होती है. इसलिए, यह पक्का करना ज़रूरी है कि कस्टम विजेट बनाते समय, role एट्रिब्यूट हमेशा उसी जगह लागू किया जाए जहां tabindex एट्रिब्यूट लगा है. इससे यह पक्का होता है कि कीबोर्ड इवेंट सही जगह पर जाएं और फ़ोकस किसी एलिमेंट पर करने पर, एलिमेंट पर फ़ोकस सही तरीके से दिखाया जाए.
ARIA खास जानकारी में role एट्रिब्यूट और इससे जुड़े ARIA एट्रिब्यूट के लिए, संभावित वैल्यू की अलग-अलग कैटगरी बताई गई हैं. इनका इस्तेमाल इन भूमिकाओं के साथ किया जा सकता है. यह इस बारे में सबसे अच्छी जानकारी है कि ARIA के रोल और एट्रिब्यूट एक साथ कैसे काम करते हैं और उनका इस्तेमाल इस तरह से कैसे किया जा सकता है जो ब्राउज़र और सहायक टेक्नोलॉजी के साथ काम करता है.
हालांकि, इसमें बहुत सारी खास बातें बताई गई हैं. ARIA ऑथरिंग प्रैक्टिस दस्तावेज़ से शुरू करना ज़्यादा आसान होगा. इसमें, उपलब्ध ARIA रोल और प्रॉपर्टी का इस्तेमाल करने के सबसे सही तरीके बताए गए हैं.
ARIA में लैंडमार्क रोल की सुविधा भी मिलती है, जो HTML5 में उपलब्ध विकल्पों को बढ़ाती है. ज़्यादा जानकारी के लिए, लैंडमार्क रोल्स डिज़ाइन पैटर्न की खास जानकारी देखें.