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

ARIA और नॉन-नेटिव एचटीएमएल सिमेंटिक्स के बारे में जानकारी

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

इस लेसन में हम जानेंगे कि सिमैंटिक को कैसे दिखाया जाए, जिसे एचटीएमएल नहीं दिखा सकता अपने बारे में खुलकर बताया.

वेब सुलभता इनिशिएटिव के ऐक्सेस किए जा सकने वाले रिच इंटरनेट ऐप्लिकेशन खास जानकारी (WAI-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"> एलिमेंट में कोई दूसरी भूमिका/एट्रिब्यूट लागू न हो.

एचटीएमएल स्पेसिफ़िकेशन में ARA देखें हमारा वीडियो देखें.

देखते हैं कि 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 में उपलब्ध विकल्पों को बढ़ाता है. यहां जाएं: Landmark Roles डिज़ाइन पैटर्न ज़्यादा जानकारी के लिए ज़रूरी शर्तें.