पक्का करें कि सभी कस्टम कंट्रोल में सही role और सभी ज़रूरी ARIA एट्रिब्यूट हों, जिनमें उनकी प्रॉपर्टी और स्थिति की जानकारी दी गई हो.
उदाहरण के लिए, पसंद के मुताबिक बनाए गए चेकबॉक्स की स्थिति को सही तरीके से बताने के लिए, role="checkbox" और
aria-checked="true|false" की ज़रूरत होती है.
कस्टम कंट्रोल के लिए, सिमेंटिक एट्रिब्यूट को कब देना है, यह समझने के लिए ARIA और एचटीएमएल का इस्तेमाल करने का तरीका जानें.
टेस्ट करने का तरीका
यह देखने के लिए कि सभी कस्टम इंटरैक्टिव कंट्रोल में ARIA की सही भूमिकाएं हैं या नहीं, Chrome DevTools के सुलभता पैनल या स्क्रीन रीडर का इस्तेमाल करके, पेज की जांच करें.
JAWS और NVDA, Windows के लिए सबसे लोकप्रिय स्क्रीन रीडर हैं. VoiceOver, macOS में पहले से मौजूद स्क्रीन रीडर है.
सीएसएस की मदद से, <div> और <button> एलिमेंट को स्टाइल किया जा सकता है, ताकि विज़ुअल की एक जैसी सुविधाएं दी जा सकें. हालांकि, स्क्रीन रीडर इस्तेमाल करने पर इसका अनुभव काफ़ी अलग होता है. <div> सिर्फ़ एक सामान्य ग्रुपिंग एलिमेंट है. इसलिए, स्क्रीन रीडर सिर्फ़ <div> के टेक्स्ट कॉन्टेंट को पढ़कर सुनाता है.
<button> को "बटन" के तौर पर बोला जाता है. इससे उपयोगकर्ता को यह पता चलता है कि वह किसी ऐसी चीज़ से इंटरैक्ट कर सकता है.
सेमांटिक और स्क्रीन रीडर भी देखें.
कैसे ठीक करें
इस समस्या को हल करने का सबसे अच्छा तरीका यह है कि कस्टम इंटरैक्टिव कंट्रोल का इस्तेमाल बिलकुल न करें. उदाहरण के लिए, बटन की तरह काम करने वाले <div> को <button> से बदलें.
<button>Learn more</button>
अगर आपको <div> का इस्तेमाल करना है, तो role="button" और aria-pressed="false" जोड़ें.
<div role="button" aria-pressed="false">Learn more</div>
अब स्क्रीन रीडर, <div> के लिए भूमिका और इंटरैक्टिव स्टेटस की जानकारी देते हैं.
यह ज़रूरी क्यों है
अगर आपने पहले कभी सहायक टेक्नोलॉजी का इस्तेमाल नहीं किया है, तो हो सकता है कि आपको यह पता न हो कि सहायक टेक्नोलॉजी का इस्तेमाल करने वाले लोगों के लिए आपका कॉन्टेंट कैसा परफ़ॉर्म करता है. आम तौर पर, ऐसे उपयोगकर्ताओं से बात की जा सकती है जो सहायक टेक्नोलॉजी का नियमित तौर पर इस्तेमाल करते हैं. साथ ही, वे आपकी वेबसाइट या वेब ऐप्लिकेशन के परफ़ॉर्मेंस के बारे में सुझाव/राय दे सकते हैं.
सहायक तकनीक की मदद से जांच करके यह समझा जा सकता है कि सहायक तकनीक का इस्तेमाल करने वाले लोग आपके कॉन्टेंट को कैसे देखते हैं. स्क्रीन रीडर का इस्तेमाल करने से, आपको यह समझने में मदद मिलती है कि आपके कॉन्टेंट को किस तरह लेबल किया गया है. साथ ही, क्या नेविगेशन में कोई रुकावट आ रही है.
संसाधन
कस्टम कंट्रोल में ARIA भूमिकाएं हैं ऑडिट के सोर्स कोड को देखा जा सकता है