HTML Attributes के साथ वेबसाइट्स और ऐप्स को विकलांगों के लिए अधिक सुलभ बनाएं

आज के डिजिटल युग में वेबसाइट्स और ऐप्स तक पहुँच किसी के लिए भी सीमित नहीं होनी चाहिए। यह आवश्यक है कि वे सभी के लिए, विशेष रूप से विकलांग व्यक्तियों के लिए, सुलभ हों। यदि हम HTML के विभिन्न attributes (गुणों) का सही इस्तेमाल करें, तो हम आसानी से वेबसाइट्स और ऐप्स को अधिक accessible (सुलभ) बना सकते हैं।

इस ब्लॉग पोस्ट में, हम आपको HTML attributes के कुछ महत्वपूर्ण उपयोगों के बारे में बताएंगे, जो आपकी वेबसाइट को सुलभ बनाने में सहायक हो सकते हैं।

1. alt Attribute का उपयोग

Alt text (वैकल्पिक पाठ) का इस्तेमाल images के लिए किया जाता है। यह विशेष रूप से दृष्टिहीन या नेत्रहीन उपयोगकर्ताओं के लिए महत्वपूर्ण है, जो स्क्रीन रीडर का उपयोग करते हैं। Alt attribute का उद्देश्य यह है कि यदि कोई छवि लोड नहीं होती है या उपयोगकर्ता उसे देख नहीं सकता, तो यह टेक्स्ट उसे उस छवि के बारे में जानकारी देता है।

उदाहरण:

<img src="image.jpg" alt="पर्वत की खूबसूरत तस्वीर">

2. role Attribute का इस्तेमाल

Role attribute यह बताता है कि किसी HTML तत्व का उद्देश्य या भूमिका क्या है। यह स्क्रीन रीडर और अन्य सहायक तकनीकों के लिए विशेष रूप से सहायक होता है। Role attribute के माध्यम से उपयोगकर्ता को यह जानकारी मिलती है कि कोई विशेष तत्व नेविगेशन, बटन, या मेनू है।

उदाहरण:

<nav role="navigation">
    <ul>
        <li><a href="#">होम</a></li>
        <li><a href="#">संपर्क करें</a></li>
    </ul>
</nav>

3. tabindex और focus Attributes का महत्व

Tabindex का उपयोग यह नियंत्रित करने के लिए किया जाता है कि कौन से तत्व tab बटन दबाने पर पहले फोकस में आएंगे। यह नेविगेशन को और अधिक सुचारू बनाता है, खासकर तब जब उपयोगकर्ता केवल कीबोर्ड से नेविगेट कर रहे हों।

उदाहरण:

<button tabindex="1">सबमिट करें</button>
<button tabindex="2">रद्द करें</button>

4. label और for Attribute फॉर्म एलिमेंट्स के लिए

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

उदाहरण:

<label for="username">उपयोगकर्ता नाम:</label>
<input type="text" id="username" name="username">

5. lang Attribute का उपयोग

यदि आपकी वेबसाइट या ऐप बहुभाषी है, तो lang attribute का उपयोग यह बताने के लिए किया जा सकता है कि किस भाषा में सामग्री प्रस्तुत की गई है। यह स्क्रीन रीडर को सही उच्चारण और भाषा के नियमों का पालन करने में मदद करता है।

उदाहरण:

<p lang="hi">नमस्ते, आप कैसे हैं?</p>

6. title Attribute

Title attribute का उपयोग किसी तत्व के बारे में अतिरिक्त जानकारी देने के लिए किया जाता है। जब उपयोगकर्ता उस तत्व पर माउस होवर करते हैं, तो यह जानकारी प्रदर्शित होती है। यह उन लोगों के लिए सहायक हो सकता है, जिन्हें अतिरिक्त संदर्भ की आवश्यकता होती है।

उदाहरण:

<a href="about.html" title="हमारे बारे में अधिक जानें">हमारे बारे में</a>

ARIA Attributes क्या हैं?

ARIA (Accessible Rich Internet Applications) एक विशेष प्रकार का HTML मानक है, जिसे वेबसाइट्स और वेब एप्लिकेशन्स को अधिक सुलभ (accessible) बनाने के लिए डिज़ाइन किया गया है। इसका मुख्य उद्देश्य यह है कि विकलांग (विशेष रूप से दृष्टिहीन) उपयोगकर्ताओं को वेबसाइट या ऐप के साथ बेहतर तरीके से इंटरैक्ट करने में मदद मिले। ARIA attributes का उपयोग करके हम ऐसे वेब घटकों को भी सुलभ बना सकते हैं, जो सामान्य HTML द्वारा स्वचालित रूप से सुलभ नहीं होते।

ARIA का महत्व

वेबसाइट्स में कुछ इंटरैक्टिव एलिमेंट्स जैसे ड्रॉपडाउन मेनू, स्लाइडर, टैब्स आदि का सही प्रकार से स्क्रीन रीडर और अन्य सहायक उपकरणों द्वारा उपयोग करना मुश्किल होता है। ARIA attributes का उद्देश्य इन एलिमेंट्स को सुलभ बनाना है ताकि सभी उपयोगकर्ता इनका आसानी से उपयोग कर सकें, चाहे वे कीबोर्ड या स्क्रीन रीडर का इस्तेमाल कर रहे हों।

ARIA का उपयोग कब करें?

ARIA attributes तब उपयोग किए जाते हैं जब किसी HTML तत्व का मूलतः कोई semantic (अर्थपूर्ण) मान नहीं होता या उसका सही रूप से स्क्रीन रीडर द्वारा समझा नहीं जाता। सामान्य तौर पर, जहां हो सके, हमें HTML5 के semantic elements का उपयोग करना चाहिए क्योंकि वे पहले से ही सुलभ होते हैं। लेकिन जब जरूरत हो, ARIA attributes का इस्तेमाल वेबसाइट की सुलभता को बढ़ाने में मदद करता है।

ARIA Attributes के प्रकार

1. Role
   role attribute का उपयोग यह बताने के लिए किया जाता है कि कोई HTML तत्व क्या करता है या उसका कार्य क्या है। उदाहरण के लिए, कोई डिव एलिमेंट बटन का कार्य कर सकता है, तो हम उसे ARIA के द्वारा बटन की तरह व्यवहार करने के लिए निर्देशित कर सकते हैं।उदाहरण:

   <div role="button" tabindex="0">क्लिक करें</div>
   

    

2. aria-label
   aria-label का उपयोग उस एलिमेंट का नाम देने के लिए किया जाता है जिसे स्क्रीन रीडर पढ़ सकता है। यह विशेष रूप से तब उपयोगी होता है जब कोई विजुअल लेबल नहीं होता।उदाहरण:

   <button aria-label="बंद करें">X</button>
   

    

3. aria-labelledby
   यह attribute किसी तत्व को एक या एक से अधिक अन्य तत्वों से जोड़ता है, ताकि स्क्रीन रीडर उस लिंक्ड तत्व की सामग्री को पढ़ सके।उदाहरण:

   <h1 id="heading1">हमारे उत्पाद</h1>
   <div aria-labelledby="heading1">यहाँ हमारे उत्पादों की जानकारी दी गई है।</div>
   

    

4. aria-hidden
   aria-hidden का उपयोग यह बताने के लिए किया जाता है कि कोई विशेष तत्व स्क्रीन रीडर के लिए छिपा हुआ है और उसे पढ़ा नहीं जाना चाहिए। यह तब उपयोगी होता है जब कोई तत्व विज़ुअली मौजूद हो लेकिन उसका कोई सेंसरी मूल्य न हो।उदाहरण:

   <div aria-hidden="true">यह सामग्री छिपी हुई है</div>
   

    

5. aria-expanded
   इसका उपयोग यह बताने के लिए किया जाता है कि कोई तत्व, जैसे कि ड्रॉपडाउन मेनू या कॉलेप्सिबल कंटेंट, फिलहाल विस्तारित (expanded) है या नहीं।उदाहरण:

   <button aria-expanded="false">मेनू खोलें</button>
   

    

6. aria-live
   जब कोई कंटेंट डायनामिकली बदलता है, तो aria-live का उपयोग किया जाता है ताकि स्क्रीन रीडर को पता चल सके कि उस हिस्से में नया कंटेंट अपडेट हो गया है और उसे तुरंत पढ़ा जाए।उदाहरण:

   <div aria-live="polite">नया संदेश आया है</div>
   

    

7. aria-describedby Attribute

   aria-describedby एक ARIA attribute है जिसका उपयोग यह बताने के लिए किया जाता है कि कोई तत्व (जैसे बटन, फॉर्म फील्ड, या कंट्रोल) किस दूसरे तत्व द्वारा वर्णित (described) है। यह attribute स्क्रीन रीडर को उस तत्व से जुड़ी अतिरिक्त जानकारी पढ़ने में मदद करता है।

   उपयोग:

   यह attribute तब उपयोगी होता है जब किसी उपयोगकर्ता को किसी तत्व के बारे में विस्तृत जानकारी देने की आवश्यकता होती है, जैसे कि किसी फॉर्म फील्ड के लिए दिशानिर्देश या मदद।

   उदाहरण:

   <label for="username">उपयोगकर्ता नाम:</label>
   <input type="text" id="username" aria-describedby="usernameHelp">
   <p id="usernameHelp">उपयोगकर्ता नाम में केवल अक्षर और संख्याएँ होनी चाहिए।</p>
   

    

8. aria-controls Attribute

   aria-controls एक ARIA attribute है जिसका उपयोग यह संकेत देने के लिए किया जाता है कि कोई तत्व (जैसे बटन) किस अन्य तत्व को नियंत्रित (control) करता है। यह attribute तब उपयोगी होता है जब कोई इंटरैक्टिव तत्व, जैसे कि बटन या लिंक, किसी अन्य हिस्से (जैसे ड्रॉपडाउन मेनू, टैब पैनल, या स्लाइडर) को दिखाता या छिपाता है।

   उपयोग:

   aria-controls का उपयोग यह बताने के लिए किया जाता है कि कौन सा कंट्रोल किस UI एलिमेंट से जुड़ा हुआ है, जिससे स्क्रीन रीडर या अन्य सहायक तकनीकें इसे सही तरीके से इंटरप्रेट कर सकें।

   उदाहरण:

   <button aria-controls="dropdown1">मेनू खोलें</button>
   <ul id="dropdown1" style="display:none;">
       <li>विकल्प 1</li>
       <li>विकल्प 2</li>
       <li>विकल्प 3</li>
   </ul>
   

    

9. aria-selected Attribute

   aria-selected एक ARIA attribute है जिसका उपयोग यह संकेत देने के लिए किया जाता है कि कोई विकल्प या आइटम वर्तमान में चुना (selected) गया है या नहीं। इसका सबसे आम उपयोग टैब्स, लिस्ट आइटम, और अन्य चयन योग्य तत्वों में होता है, जहां एक से अधिक विकल्प उपलब्ध होते हैं और उनमें से कोई एक वर्तमान में चुना हुआ होता है।

   उपयोग:

   इस attribute का उपयोग विशेष रूप से टैब्स, चयन योग्य सूची आइटम, या रेडियो बटन जैसे तत्वों में किया जाता है। यह स्क्रीन रीडर को बताता है कि कौन सा विकल्प सक्रिय या चयनित है।

   उदाहरण:

   <ul role="tablist">
       <li role="tab" aria-selected="true">टैब 1</li>
       <li role="tab" aria-selected="false">टैब 2</li>
       <li role="tab" aria-selected="false">टैब 3</li>
   </ul>