गाइड / वेब की बुनियादी बातें

वेबसाइट एक्सेसिबिलिटी की शुरुआत

ऐसी वेबसाइट बनाइए जो हर कोई इस्तेमाल कर सके: फ़ोटो का ब्योरा, पढ़ने में आसान रंग, साफ़ हेडिंग और बहुत कुछ।

एक्सेसिबिलिटी क्या है

एक्सेसिबल वेबसाइट वह है जिसे हर कोई इस्तेमाल कर सके। इसमें वे लोग भी आते हैं जो देख नहीं सकते और स्क्रीन रीडर से पेज सुनते हैं, जो माउस नहीं चला सकते, जिन्हें रंग पहचानने में दिक्कत होती है, और जिन्हें स्क्रीन पर हिलती चीज़ों से चक्कर आता है। इससे उन्हें भी मदद मिलती है जो तेज़ धूप में पढ़ रहे हैं, एक हाथ में बच्चा उठाए हैं, या पुराना फ़ोन चला रहे हैं।

वेबसाइट बनाने वाले जिस मुख्य गाइड को मानते हैं, उसका नाम WCAG है, यानी Web Content Accessibility Guidelines। अभी इसका वर्ज़न WCAG 2.2 है। शुरू करने के लिए पूरा पढ़ना ज़रूरी नहीं। नीचे दी गई आदतों में ज़्यादातर ज़रूरी बातें आ जाती हैं।

1. फ़ोटो को alt टेक्स्ट दें

स्क्रीन रीडर फ़ोटो देख नहीं सकता। वह फ़ोटो का alt टेक्स्ट पढ़कर सुनाता है। अच्छा alt टेक्स्ट एक छोटे वाक्य में बताता है कि फ़ोटो में क्या है, जैसे आप फ़ोन पर किसी दोस्त को बता रहे हों।

<!-- Not helpful -->
<img src="photo1.jpg" alt="image">

<!-- Helpful -->
<img src="photo1.jpg" alt="A baker pulling a tray of croissants from the oven">

• शुरुआत "...की फ़ोटो" या "...की तस्वीर" से मत कीजिए। स्क्रीन रीडर पहले ही बता देता है कि यह इमेज है।
• अगर फ़ोटो में कुछ लिखा है, तो वे शब्द alt टेक्स्ट में डालिए।
• अगर इमेज सिर्फ़ सजावट के लिए है और कोई जानकारी नहीं देती, तो खाली वैल्यू alt="" दीजिए, ताकि स्क्रीन रीडर उसे छोड़ दे। alt को कभी पूरी तरह हटाइए मत।

जो AI आपकी Kodebloc वेबसाइट बनाता है, वह अपनी डाली फ़ोटो का alt टेक्स्ट भी लिखता है, पर एक बार जांच लीजिए। फ़ोटो बदलने पर पुराना विवरण वहीं रह जाता है, इसलिए हो सकता है वह अब मेल न खाए। प्रीव्यू में फ़ोटो पर क्लिक कीजिए और चैट में लिखिए, जैसे "इस फ़ोटो का alt टेक्स्ट बदलिए ताकि वह फ़ोटो में दिख रही चीज़ बताए"। ज़्यादा जानकारी आपकी वेबसाइट की फ़ोटो में है।

2. रंग पढ़ने में आसान हों

कलर कॉन्ट्रास्ट का मतलब है कि टेक्स्ट का रंग पीछे के रंग से कितना अलग है। सफ़ेद पर हल्का ग्रे टेक्स्ट बहुत से लोगों के लिए पढ़ना मुश्किल होता है। WCAG कॉन्ट्रास्ट को एक रेशियो में नापता है:

• आम टेक्स्ट के लिए कम से कम 4.5:1 चाहिए।
• बड़े टेक्स्ट के लिए कम से कम 3:1। बड़ा मतलब करीब 24 पिक्सल या उससे बड़ा, या बोल्ड में करीब 19 पिक्सल या उससे बड़ा।
• आइकन, बटन के किनारे और फ़ॉर्म बॉक्स की बॉर्डर को अपने आस-पास की चीज़ से कम से कम 3:1 चाहिए।

हिसाब खुद लगाने की ज़रूरत नहीं। वेब पर मुफ़्त कॉन्ट्रास्ट चेकर हैं, जिनमें दो रंग डालते ही रेशियो दिख जाता है। Chrome और Edge में भी किसी टेक्स्ट को inspect करने पर डेवलपर टूल में यह दिखता है।

और कोई बात कभी सिर्फ़ रंग के भरोसे मत छोड़िए। अगर गलती होने पर फ़ॉर्म बस बॉक्स को लाल कर दे, तो जो लाल रंग नहीं देख पाते उन्हें कुछ पता नहीं चलेगा। साथ में शब्द भी लिखिए, जैसे "कृपया अपना ईमेल डालें"।

3. हेडिंग क्रम से रखें

स्क्रीन रीडर इस्तेमाल करने वाले बहुत से लोग एक हेडिंग से दूसरी पर कूदकर अपनी चीज़ ढूंढते हैं, जैसे किताब के अध्यायों के नाम पलटना। यह तभी काम करता है जब हेडिंग मिलकर एक साफ़ ढांचा बनाएं।

<h1>Rosa's Bakery</h1>
  <h2>Our breads</h2>
    <h3>Sourdough</h3>
    <h3>Rye</h3>
  <h2>Visit us</h2>

• पेज के मुख्य टाइटल के लिए एक <h1> रखिए।
• बीच के लेवल मत छोड़िए, जैसे <h2> से सीधे <h4> पर जाना।
• हेडिंग ढांचे में उसकी जगह देखकर चुनिए, फिर उसका साइज़ CSS से तय कीजिए।

Kodebloc पेज बनाते वक्त <header>, <nav>, <main> और <footer> जैसे सिमैंटिक एलिमेंट इस्तेमाल करता है। स्क्रीन रीडर से लोग सीधे इन हिस्सों पर भी जा सकते हैं। हमारी HTML गाइड इन्हें समझाती है।

4. लिंक के शब्द खुद ही बताएं

स्क्रीन रीडर पेज के सारे लिंक की लिस्ट सुना सकते हैं। "यहां क्लिक करें, यहां क्लिक करें, और पढ़ें" जैसी लिस्ट से सुनने वाले को कुछ पता नहीं चलता। लिंक के शब्दों में बताइए कि वह कहां ले जाता है।

<!-- Not helpful -->
<p>To see our menu, <a href="#menu">click here</a>.</p>

<!-- Helpful -->
<p>See <a href="#menu">our full menu</a>.</p>

5. कीबोर्ड से सब चले

कुछ लोग माउस या टच स्क्रीन नहीं चला सकते। वे Tab बटन से पेज पर आगे बढ़ते हैं और लिंक खोलने या बटन दबाने के लिए Enter दबाते हैं। अपनी वेबसाइट पर आज़माइए:

1. एड्रेस बार में क्लिक कीजिए, फिर बार-बार Tab दबाइए।
2. देखिए कि हर लिंक और बटन पर पहुंचते ही उस पर कोई साफ़ आउटलाइन या हाइलाइट दिखती है या नहीं।
3. जांचिए कि आप मेन्यू, हर बटन और हर फ़ॉर्म बॉक्स तक पहुंच पाते हैं।
4. पीछे जाने के लिए Shift+Tab और लिंक खोलने के लिए Enter दबाइए।

अगर पता न चले कि आप कहां हैं, तो फ़ोकस स्टाइल गायब है। <div> से बने क्लिक वाले बॉक्स की जगह असली <a> और <button> एलिमेंट इस्तेमाल कीजिए, क्योंकि ये अपने आप कीबोर्ड से चलते हैं। Kodebloc को कहा गया है कि हर क्लिक होने वाले हिस्से को hover और focus स्टाइल दे।

चीज़ों को टैप करना भी आसान रखिए। WCAG 2.2 कहता है कि टैप करने की चीज़ कम से कम 24 x 24 पिक्सल की हो, या छोटी हो तो उसके आस-पास काफ़ी जगह हो।

6. हर फ़ॉर्म बॉक्स का लेबल

फ़ॉर्म बॉक्स को एक लेबल चाहिए जो बताए कि क्या लिखना है। लेबल का for एट्रिब्यूट बॉक्स के id से मेल खाता है, इसलिए बॉक्स चुनते ही स्क्रीन रीडर लेबल पढ़ देता है। लेबल पर क्लिक करने से भी बॉक्स चुना जाता है, यानी क्लिक करने के लिए बड़ी जगह मिलती है।

<label for="email">Your email</label>
<input id="email" type="email" name="email" autocomplete="email">

बॉक्स के अंदर के हल्के ग्रे placeholder टेक्स्ट को ही लेबल मत मान लीजिए। कोई टाइप करना शुरू करते ही वह गायब हो जाता है। Kodebloc को कहा गया है कि कॉन्टैक्ट या बुकिंग फ़ॉर्म के हर बॉक्स को अपना दिखने वाला लेबल दे।

7. कम मोशन का ध्यान

फिसलने, ज़ूम होने और घूमने वाले इफ़ेक्ट से कुछ लोगों को चक्कर आ सकते हैं या जी मिचला सकता है। फ़ोन और कंप्यूटर में कम मोशन मांगने की एक सेटिंग होती है, और CSS उसे पढ़ सकता है:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

हर Kodebloc वेबसाइट में ऐसा नियम अपने आप जुड़ता है। अगर किसी विज़िटर ने अपने डिवाइस में कम मोशन चुना है, तो उसके लिए वेबसाइट के CSS ऐनिमेशन, ट्रांज़िशन और स्मूथ स्क्रॉलिंग बंद हो जाते हैं।

Kodebloc और क्या करता है

• पेज <html lang="en"> से बताता है कि वह किस भाषा में है, ताकि स्क्रीन रीडर सही आवाज़ इस्तेमाल करें। आप इसे साइट सेटिंग्स में, Search टैब पर, Language के नीचे बदल सकते हैं।
• एक से ज़्यादा पेज वाली वेबसाइट में, विज़िटर के नए पेज पर जाते ही स्क्रीन रीडर उस पेज का नाम बोल देता है।
• viewport टैग से विज़िटर फ़ोन पर ज़ूम कर सकते हैं।