एक्सेसिबिलिटी: कस्टम वेब एप्लिकेशन में ARIA एट्रिब्यूट जोड़ना
ARIA एट्रिब्यूट, स्क्रीन रीडर जैसी असिस्टिव टेक्नोलॉजी को एलिमेंट के सिमैंटिक्स के बारे में अतिरिक्त जानकारी देते हैं। आप अपनी साइट के किसी भी कस्टम एलिमेंट या एप्लिकेशन में ARIA एट्रिब्यूट जोड़ सकते हैं।
ARIA एट्रिब्यूट जरूरी हैं, क्योंकि जब किसी एलिमेंट के नेटिव HTML से उसे एक्सेसिबल बनाना संभव नहीं होता, तब इनसे कस्टम एलिमेंट और एप्लिकेशन को एक्सेसिबल बनाया जा सकता है।
जरूरी:
यह फ़ीचर उन यूज़र्स के लिए है जिनके कस्टम एप्लिकेशन/एलिमेंट के लिए ARIA एट्रिब्यूट जरूरी हैं। अगर आपकी साइट पर ऐसे एप्लिकेशन या एलिमेंट नहीं हैं, तो आपको ARIA एट्रिब्यूट एडिट करने की जरूरत नहीं है।
ARIA एट्रिब्यूट जोड़ना
हमने साइट के ज्यादातर एलिमेंट के लिए ARIA एट्रिब्यूट पहले से हार्डकोड किए हैं। हालांकि, अगर आपने कस्टम एप्लिकेशन बनाए हैं, तो उन्हें एक्सेसिबल बनाने के लिए आप अपने ARIA एट्रिब्यूट जोड़ सकते हैं।
Studio एडिटर
Wix Editor
एलिमेंट में एट्रिब्यूट जोड़ने के लिए, Studio एडिटर में डेवलपर मोड (Velo by Wix) चालू करें। Velo की मदद से आप
कोड जोड़ सकते हैं, डेटाबेस बना सकते हैं और बहुत कुछ कर सकते हैं।
- एडिटर की बाईं ओर कोड
चुनें। - संबंधित एप्लिकेशन या एलिमेंट चुनें और मोर एक्शंस आइकन
पर क्लिक करें।
- एक्सेसिबिलिटी पर क्लिक करें।
- ऐड एट्रिब्यूट पर क्लिक करें।
- ड्रॉप-डाउन मेन्यू से कोई एट्रिब्यूट चुनें।
- लेबल डालें/लेवल या वैल्यू चुनें।
- ऐड पर क्लिक करें।
आप इन एलिमेंट्स में ARIA एट्रिब्यूट्स जोड़ सकते हैं:
| एलिमेंट | प्रॉपर्टीज |
|---|---|
लाइटबॉक्स | label |
टेक्स्ट | label, role [heading, status, alert], live, relevant, atomic, hidden, current, level |
कंटेनर बॉक्स | label, tabindex, role [region, group, none, status, alert], live, relevant, atomic, current, controls, hidden |
स्ट्रिप | label, tabindex, role [heading, status, alert], live, atomic, hidden, current |
रिपीटर | label, role [heading, status, alert] |
टेक्स्ट बटन | tabindex, pressed, expanded, haspopup |
हम लगातार और एलिमेंट्स में ARIA एट्रिब्यूट्स जोड़ने की सुविधा पर काम कर रहे हैं।
अगर ARIA एट्रिब्यूट्स को लेकर आपका कोई खास अनुरोध है, तो हमसे संपर्क करें।
अपने ARIA एट्रिब्यूट्स को एडिट करना
कस्टम ऐप्लिकेशन में एट्रिब्यूट्स जोड़ने के बाद, आप एक्सेसिबिलिटी आइकन
की मदद से उन्हें जब चाहें एडिट और अपडेट कर सकते हैं। जिन एलिमेंट्स से आपने एट्रिब्यूट्स कनेक्ट किए हैं, उनमें यह आइकन अपने-आप जुड़ जाता है।
की मदद से उन्हें जब चाहें एडिट और अपडेट कर सकते हैं। जिन एलिमेंट्स से आपने एट्रिब्यूट्स कनेक्ट किए हैं, उनमें यह आइकन अपने-आप जुड़ जाता है। एट्रिब्यूट को एडिट करने के लिए:
- अपने एडिटर में एलिमेंट/एप्लिकेशन चुनें।
- एक्सेसिबिलिटी आइकन
चुनें। - संबंधित एट्रिब्यूट पर होवर करें और मोर एक्शंस आइकन
चुनें।
- एडिट पर क्लिक करें।
- ज़रूरी बदलाव करें और सेव पर क्लिक करें।
ARIA एट्रिब्यूट्स के प्रकार
| एट्रिब्यूट का नाम | कैटेगरी | टोकन |
|---|---|---|
tabindex |
0, -1
| |
role | टोकन: प्रिमिटिव में दी गई डेफिनिशन के अनुसार | |
aria-level | int | |
aria-live | लाइव | टोकन: polite, assertive |
aria-multiline | डिस्क्रिप्शन | true, false |
aria-multiselectable | डिस्क्रिप्शन | true, false |
aria-pressed | स्टेट | true, false |
aria-relevant | लाइव | टोकन: all, additions, removals, text |
aria-activedescendant | रिलेशनशिप्स | ID_REF |
aria-atomic | लाइव | true, false |
aria-autocomplete | विवरण | true, false |
aria-controls | रिलेशनशिप | ID_REF |
aria-current | स्टेट | step, page, true, false |
aria-describedby | रिलेशनशिप | ID_REF (स्पेस से अलग किए गए आइटम) |
aria-expanded | true, false | |
aria-haspopup | रिलेशनशिप | dialog, menu, true, false |
aria-hidden | true, false | |
aria-invalid | स्टेट | true, false |
aria-label | स्ट्रिंग | |
aria-labelledby | रिलेशनशिप | ID_REF (स्पेस से अलग किए गए आइटम) |