कस्टम कंट्रोल में ARIA भूमिकाएं हैं

देखें कि सभी कस्टम कंट्रोल में सही role और ऐसे सभी ज़रूरी ARIA एट्रिब्यूट हैं जो उनकी प्रॉपर्टी और स्थिति के बारे में बताते हैं. उदाहरण के लिए, कस्टम चेकबॉक्स में स्थिति बताने के लिए, role="checkbox" और aria-checked="true|false" की ज़रूरत होती है. कस्टम कंट्रोल के लिए, ARIA के सिमैंटिक गुम हो सकने वाले तरीके किस तरह मौजूद हो सकता है, इस बारे में सामान्य खास जानकारी के लिए ARIA के बारे में जानकारी देखें.

मैन्युअल तरीके से टेस्ट करने का तरीका

सभी कस्टम इंटरैक्टिव कंट्रोल में ARIA के सही रोल हैं या नहीं, यह देखने के लिए Chrome DevTools के सुलभता पैनल या स्क्रीन रीडर का इस्तेमाल करके, पेज की जांच करें. JAWS और NVDA , Windows के लिए दो ज़्यादा लोकप्रिय स्क्रीन रीडर हैं. VoiceOver MacOS में पहले से मौजूद स्क्रीन रीडर है.

सीएसएस का इस्तेमाल करके, <div> और <button> एलिमेंट को इस तरह से स्टाइल किया जा सकता है कि वे एक जैसी विज़ुअल सुविधा दें, लेकिन स्क्रीन रीडर का इस्तेमाल करते समय ये दोनों बिलकुल अलग-अलग होते हैं. <div>, ग्रुप बनाने के लिए सिर्फ़ एक सामान्य एलिमेंट है. इसलिए, स्क्रीन रीडर सिर्फ़ <div> के टेक्स्ट कॉन्टेंट के बारे में बताता है. <button> को एक "बटन" के तौर पर बताया जाता है. यह उपयोगकर्ता के लिए एक मज़बूत सिग्नल होता है, जिससे वह इंटरैक्ट कर सकता है. सेमैंटिक और स्क्रीन रीडर भी देखें.

कैसे ठीक करें

इस समस्या का सबसे आसान और सबसे अच्छा समाधान यह है कि कस्टम इंटरैक्टिव कंट्रोल को पूरी तरह इस्तेमाल न किया जाए. उदाहरण के लिए, बटन की तरह काम करने वाले <div> को, असल <button> से बदलें.

अगर आपको <div> को रखना है, तो <div> में role="button" और aria-pressed="false" जोड़ें.

अब स्क्रीन रीडर, <div> की भूमिका और इंटरैक्टिव स्थिति के बारे में बताएंगे.

यह क्यों मायने रखता है

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

सुलभता की समीक्षा करने का तरीका भी देखें.

संसाधन

कस्टम कंट्रोल के लिए सोर्स कोड में ARIA की भूमिकाएं हैं ऑडिट