जवाबों:
HTML5 ARIA विशेषता वह है जो आप खोज रहे हैं। यह आपके कोड में बूटस्ट्रैप के बिना भी उपयोग किया जा सकता है।
सुलभ रिच इंटरनेट एप्लिकेशन (ARIA) वेब सामग्री और वेब एप्लिकेशन (विशेष रूप से अजाक्स और जावास्क्रिप्ट के साथ विकसित) विकलांग लोगों के लिए अधिक सुलभ बनाने के तरीकों को परिभाषित करता है।
अपने प्रश्न के लिए सटीक होने के लिए, यहां आपकी विशेषताओं को ARIA विशेषता राज्य और मॉडल कहा जाता है
aria-labelledby: वर्तमान तत्व को लेबल करने वाले तत्व (या तत्वों) को पहचानता है।
aria-hidden (state): इंगित करता है कि तत्व और उसके सभी वंशज लेखक द्वारा लागू किए गए किसी भी उपयोगकर्ता के लिए दृश्यमान या विश्वसनीय नहीं हैं।
इन संपत्तियों के प्राथमिक उपभोक्ता उपयोगकर्ता एजेंट हैं जैसे कि अंधे लोगों के लिए स्क्रीन रीडर। तो बूटस्ट्रैप मोडल के मामले में, मोडल का divहै role="dialog"। जब स्क्रीन रीडर यह नोटिस करता है कि divयह जो भूमिका है, वह दिखाई देती है, तो वह उसके लिए लेबल बोलेगा div।
चीजों को लेबल करने के बहुत सारे तरीके हैं (और ARIA के साथ कुछ नए), लेकिन कुछ मामलों में <label>HTML टैग का उपयोग किए बिना किसी मौजूदा तत्व को लेबल (शब्दार्थ) के रूप में उपयोग करना उचित है । HTML मोडल्स के साथ लेबल आमतौर पर <h>हेडर होता है। इसलिए बूटस्ट्रैप मोडल केस में, आप जोड़ते हैं aria-labelledby=[IDofModalHeader], और स्क्रीन रीडर उस हेडर को बोल देगा जब मोडल दिखाई देता है।
आम तौर पर एक स्क्रीन रीडर बोलते हुए नोटिस किया जा रहा है कि जब भी DOM तत्व दृश्यमान या अदृश्य हो जाते हैं, तो aria-hiddenसंपत्ति अक्सर बेमानी हो जाती है और शायद ज्यादातर मामलों में छोड़ दी जा सकती है।
aria-hidden="true"ग्लिफ़िकॉन आइकनों जैसी सजावटी वस्तुओं को स्क्रीन पाठकों से छिपाएगा, जिसमें सार्थक उच्चारण नहीं है ताकि भ्रम पैदा न हो। यह अच्छी बात है कि अच्छी प्रैक्टिस की बात है।
ARIA कार्यक्षमता में बदलाव नहीं करता है, यह केवल स्क्रीन रीडर उपयोगकर्ताओं के लिए प्रस्तुत भूमिकाएं / गुण बदलता है। WebAIM का WAVE टूलबार पृष्ठ पर ARIA भूमिकाओं की पहचान करता है।
Aria का उपयोग दृष्टिहीन उपयोगकर्ताओं के उपयोगकर्ता अनुभव को बेहतर बनाने के लिए किया जाता है। दृष्टिबाधित यूजर्स हालांकि स्क्रीन रीडर सॉफ्टवेयर जैसे कि JAWS, NVDA, .. का उपयोग करके नेविगेट करते हैं, जबकि एप्लिकेशन के माध्यम से नेविगेट करते हुए, स्क्रीन रीडर सॉफ्टवेयर उपयोगकर्ताओं के लिए सामग्री की घोषणा करता है। Aria का उपयोग कोड में सामग्री जोड़ने के लिए किया जा सकता है जो स्क्रीन रीडर उपयोगकर्ताओं को नियंत्रण की भूमिका, स्थिति, लेबल और उद्देश्य को समझने में मदद करता है
आरिया नेत्रहीन कुछ भी नहीं बदलता है। (आरिया डिजाइनरों से भी डरती है)।
aria-छिपा हुआ:
aria- हिडन विशेषता का उपयोग नेत्रहीनों के लिए सामग्री को छिपाने के लिए किया जाता है, जो स्क्रीन रीडर (JAWS, NVDA, ...) का उपयोग करके एप्लिकेशन के माध्यम से नेविगेट करते हैं।
aria- छिपी विशेषता का उपयोग मूल्यों के साथ सही, गलत है।
कैसे इस्तेमाल करे:
<i class = "fa fa-books" aria-hidden = "true"></i><i>अनुप्रयोग में कोई दृश्य परिवर्तन के साथ स्क्रीन रीडर उपयोगकर्ताओं के लिए छुपा सामग्री पर aria- छिपे = "सच" का उपयोग करना।
aria-लेबल
aria- लेबल विशेषता स्क्रीन रीडर उपयोगकर्ताओं के लिए लेबल संवाद करने के लिए प्रयोग किया जाता है। आमतौर पर खोज इनपुट क्षेत्र में दृश्य लेबल (डिजाइनरों के लिए धन्यवाद) नहीं होता है। aria- लेबल का उपयोग स्क्रीन रीडर उपयोगकर्ताओं के लिए नियंत्रण के लेबल को संचार करने के लिए किया जा सकता है
कैसे इस्तेमाल करे:
<input type = "edit" aria-label = "search" placeholder = "search">अनुप्रयोग में कोई दृश्य परिवर्तन नहीं है। लेकिन स्क्रीन पाठक नियंत्रण के उद्देश्य को समझ सकते हैं
aria-labelledby
Aria- लेबल और aria-labelledby दोनों का उपयोग लेबल को संप्रेषित करने के लिए किया जाता है। लेकिन aria-labelledby का उपयोग पृष्ठ में पहले से मौजूद किसी भी लेबल को संदर्भित करने के लिए किया जा सकता है जबकि aria- लेबल का उपयोग उस लेबल को संप्रेषित करने के लिए किया जाता है जिसे मैंने नेत्रहीन प्रदर्शित नहीं किया है
दृष्टिकोण 1:
<span id = "sd"> Search </span>
<input type = "text" aria-labelledby = "sd">aria-labelledby का उपयोग स्क्रीन रीडर उपयोगकर्ताओं के लिए दो लेबल को संयोजित करने के लिए भी किया जा सकता है
दृष्टिकोण 2:
<span id = "de"> Billing Address </span>
<span id = "sd"> First Name </span>
<input type = "text" aria-labelledby = "de sd">