सुलभता

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

रंगों की पहचान न कर पाना

अलग-अलग लोगों के लिए, रंग अलग-अलग होते हैं. प्रोटनोपिया से पीड़ित लोग, लाल रंग को अलग रंग के तौर पर नहीं देख पाते. ड्यूटेरानोपिया में, हरा रंग नहीं दिखता. नीला रंग न देख पाने की समस्या वाले लोगों के लिए, यह नीला होता है.

कुछ टूल से आपको यह पता चल सकता है कि अलग-अलग तरह से रंग देखने वाले लोगों को आपकी कलर स्कीम कैसी दिखती हैं.

Firefox के सुलभता टैब में, सिम्युलेट करें लेबल वाला एक ड्रॉप-डाउन मेन्यू होता है. इसमें विकल्पों की एक सूची होती है.

Chrome DevTools में, रेंडरिंग टैब की मदद से देखने से जुड़ी समस्याओं को एम्युलेट किया जा सकता है.

ये ब्राउज़र के हिसाब से टूल होते हैं. ऑपरेटिंग सिस्टम के लेवल पर, अलग-अलग तरह की दृष्टि की नकल भी की जा सकती है.

Mac पर, यहाँ जाएँ:

1. सिस्टम की सेटिंग
2. सुलभता
3. डिसप्ले
4. कलर फ़िल्टर
5. कलर फ़िल्टर चालू करना

कोई एक विकल्प चुनें.

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

a {
  color: red;
}

a {
  color: red;
  font-weight: bold;
}

कलर कंट्रास्ट

कुछ रंग के कॉम्बिनेशन से समस्या हो सकती है. अगर फ़ोरग्राउंड कलर और बैकग्राउंड कलर के बीच कंट्रास्ट ज़रूरत के मुताबिक नहीं है, तो टेक्स्ट को पढ़ना मुश्किल हो जाता है. वेब पर, रंग के कम कंट्रास्ट की समस्या, सुलभता से जुड़ी सबसे आम समस्याओं में से एक है. हालांकि, अच्छी बात यह है कि इसे डिज़ाइन प्रोसेस के शुरुआती चरण में ही ठीक किया जा सकता है.

यहां कुछ ऐसे टूल दिए गए हैं जिनका इस्तेमाल करके, टेक्स्ट और बैकग्राउंड के रंगों के कंट्रास्ट रेशियो की जांच की जा सकती है:

• VisBug एक ब्राउज़र एक्सटेंशन है. यह सभी मुख्य डेस्कटॉप ब्राउज़र के लिए उपलब्ध है.
• Firefox के Accessibility Inspector की मदद से, विज़ुअल कंट्रास्ट से जुड़ी समस्याओं की जांच की जा सकती है.
• Chrome DevTools की मदद से, कम कंट्रास्ट वाले टेक्स्ट का पता लगाया जा सकता है और उसे ठीक किया जा सकता है.
• Microsoft के Edge ब्राउज़र में, कलर पिकर का इस्तेमाल करके टेक्स्ट के रंग के कंट्रास्ट की जांच की जा सकती है.

सीएसएस में हमेशा color और background-color को एक साथ एलान करना बेहतर होता है. यह न मान लें कि बैकग्राउंड का रंग, ब्राउज़र का डिफ़ॉल्ट रंग होगा. लोग अपने ब्राउज़र के रंगों को बदल सकते हैं.

body {
  color: black;
}

body {
  color: black;
  background-color: white;
}

हाई कंट्रास्ट

कुछ लोग अपने ऑपरेटिंग सिस्टम को हाई-कंट्रास्ट मोड का इस्तेमाल करने के लिए सेट करते हैं. इसे अपने ऑपरेटिंग सिस्टम पर आज़माएं.

Mac पर, यहाँ जाएँ:

1. सिस्टम की सेटिंग
2. सुलभता
3. डिसप्ले

कंट्रास्ट बढ़ाने का विकल्प चुनें.

मीडिया फ़ीचर की मदद से यह पता लगाया जा सकता है कि किसी व्यक्ति ने हाई कॉन्ट्रास्ट मोड चालू किया है या नहीं. prefers-contrast मीडिया सुविधा के लिए, तीन वैल्यू के बारे में क्वेरी की जा सकती है: no-preference, less, और more. इस जानकारी का इस्तेमाल करके, अपनी साइट के कलर पैलेट में बदलाव किया जा सकता है.

लोग अपने ऑपरेटिंग सिस्टम में भी, रंगों को उलटा करने की सुविधा इस्तेमाल करने के लिए प्राथमिकता सेट कर सकते हैं.

Mac पर, यहाँ जाएँ:

1. सिस्टम की सेटिंग
2. सुलभता
3. डिसप्ले

रंगों को उलटने का विकल्प चुनें.

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

फ़ॉन्ट का साइज़

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

फ़ॉन्ट के साइज़ को बदलकर, इन सेटिंग के हिसाब से जवाब दिया जा सकता है. px जैसी यूनिट का इस्तेमाल न करें. इसके बजाय, rem या ch जैसी रिलेटिव यूनिट का इस्तेमाल करें.

अपने ब्राउज़र में, टेक्स्ट के डिफ़ॉल्ट साइज़ की सेटिंग बदलकर देखें. ब्राउज़र की सेटिंग में जाकर ऐसा किया जा सकता है. इसके अलावा, किसी वेब पेज पर जाते समय ज़ूम इन करके भी ऐसा किया जा सकता है. क्या डिफ़ॉल्ट फ़ॉन्ट साइज़ को 200%तक बढ़ाने पर भी आपकी वेबसाइट काम करती है? 400% कैसा रहेगा?

अगर कोई व्यक्ति डेस्कटॉप कंप्यूटर पर आपकी वेबसाइट पर आता है और फ़ॉन्ट का साइज़ 400% तक बढ़ा देता है, तो उसे वही लेआउट दिखना चाहिए जो छोटी स्क्रीन वाले डिवाइस पर आपकी साइट पर आने वाले व्यक्ति को दिखता है.

कीबोर्ड नेविगेशन

वेब पेजों पर नेविगेट करने के लिए, हर कोई माउस या ट्रैकपैड का इस्तेमाल नहीं करता. कीबोर्ड की मदद से भी किसी पेज पर नेविगेट किया जा सकता है. इसके लिए, tab बटन का इस्तेमाल करना सबसे सही होता है. उपयोगकर्ता, एक लिंक या फ़ॉर्म फ़ील्ड से दूसरे लिंक या फ़ॉर्म फ़ील्ड पर तेज़ी से जा सकते हैं.

:hover और :focus स्यूडो-क्लास का इस्तेमाल करके स्टाइल किए गए लिंक, उन स्टाइल को दिखाएंगे. इससे कोई फ़र्क़ नहीं पड़ता कि कोई व्यक्ति माउस, ट्रैकपैड या कीबोर्ड का इस्तेमाल कर रहा है. सिर्फ़ कीबोर्ड नेविगेशन के लिए अपने लिंक को स्टाइल करने के लिए, :focus-visible स्यूडो-क्लास का इस्तेमाल करें. इन स्टाइल को ज़्यादा ध्यान खींचने वाला बनाया जा सकता है.

a:focus,
a:hover {
  outline: 1px dotted;
}
a:focus-visible {
  outline: 3px solid;
}

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

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

अपने वेब पेजों की जांच करें. इसके लिए, अपने कीबोर्ड पर मौजूद tab कुंजी का इस्तेमाल करें. इससे यह पक्का किया जा सकेगा कि टैब का क्रम सही है.

Firefox ब्राउज़र के डेवलपर टूल के सुलभता पैनल में, टैबिंग का क्रम दिखाएं का विकल्प होता है. इसे चालू करने पर, फ़ोकस किए जा सकने वाले हर एलिमेंट पर नंबर दिखेंगे.

हलचल कम करें

ऐनिमेशन और मोशन, वेब डिज़ाइन को बेहतर बनाने के शानदार तरीके हैं. हालांकि, कुछ लोगों के लिए ये गतिविधियां बहुत भ्रमित करने वाली हो सकती हैं. साथ ही, इससे उन्हें उल्टी भी आ सकती है.

इसमें एक सुविधा क्वेरी होती है, जिससे यह पता चलता है कि उपयोगकर्ता को कम मोशन वाला कॉन्टेंट देखना है या नहीं. इसे prefers-reduced-motion कहते हैं. इसका इस्तेमाल वहां करें जहां सीएसएस ट्रांज़िशन या ऐनिमेशन का इस्तेमाल किया जा रहा है.

a:hover {
  transform: scale(150%);
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition-duration: 0.4s;
    transition-property: transform;
  }
}

prefers-reduced-motion मीडिया क्वेरी का इस्तेमाल, खास तौर पर स्क्रीन पर हलचल के लिए किया जाता है. अगर आपको किसी ऐसे एलिमेंट के रंग पर ट्रांज़िशन का इस्तेमाल करना है जिस पर prefers-reduced-motion का असर नहीं पड़ना चाहिए. ओपैसिटी और क्रॉस-फ़ेड को ट्रांज़िशन करना भी ठीक है. हलचल को कम करने की सुविधा का मतलब यह नहीं है कि ऐनिमेशन नहीं होगा.

Google Voice

लोग वेब का इस्तेमाल अलग-अलग तरीके से करते हैं. हर कोई आपकी वेबसाइट को स्क्रीन पर नहीं देख रहा है. स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी, स्क्रीन पर दिखने वाली जानकारी को बोलकर सुनाती हैं.

स्क्रीन रीडर, वेब ब्राउज़र के साथ-साथ हर तरह के ऐप्लिकेशन के साथ काम करते हैं. किसी वेब ब्राउज़र को स्क्रीन रीडर के साथ काम की जानकारी शेयर करने के लिए, ऐक्सेस किए जा रहे वेब पेज में काम की सिमैंटिक जानकारी होनी चाहिए.

आपने पहले सीखा था कि सिर्फ़ आइकॉन वाले बटन में एक एट्रिब्यूट शामिल करना ज़रूरी होता है. इससे दृष्टिबाधित लोगों को बटन के मकसद के बारे में पता चलता है. यह मज़बूत फ़ाउंडेशनल एचटीएमएल के महत्व का सिर्फ़ एक उदाहरण है.

हेडिंग

<h1>, <h2>, <h3> वगैरह जैसे हेडिंग का सही तरीके से इस्तेमाल करें. स्क्रीन रीडर, इन हेडिंग का इस्तेमाल करके आपके दस्तावेज़ की आउटलाइन जनरेट करते हैं. इस आउटलाइन पर कीबोर्ड शॉर्टकट की मदद से नेविगेट किया जा सकता है.

<div class="heading-main">Welcome to my page</div>

<div class="heading-secondary">About me</div>

<div class="heading-tertiary">My childhood</div>

<div class="heading-secondary">About this website</div>

<div class="heading-tertiary">How this site was built</div>

<h1>Welcome to my page</h1>
  <h2>About me</h2>
    <h3>My childhood</h3>
  <h2>About this website</h2>
    <h3>How this site was built</h3>

स्ट्रक्चर

अपने पेज के कॉन्टेंट को स्ट्रक्चर करने के लिए, लैंडमार्क एलिमेंट का इस्तेमाल करें. जैसे, <main>, <nav>, <aside>, <header>, और <footer>. इसके बाद, स्क्रीन रीडर का इस्तेमाल करने वाले लोग सीधे इन लैंडमार्क पर जा सकते हैं.

<div class="header">...</div>

<div class="navigation">...</div>

<div class="maincontent">...</div>

<div class="sidebar">...</div>

<div class="footer">...</div>

<header>...</header>
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

फ़ॉर्म

पक्का करें कि हर फ़ॉर्म फ़ील्ड से <label> एलिमेंट जुड़ा हो. <label> एलिमेंट पर for एट्रिब्यूट और फ़ॉर्म फ़ील्ड पर उससे जुड़े id एट्रिब्यूट का इस्तेमाल करके, किसी फ़ॉर्म फ़ील्ड के साथ लेबल जोड़ा जा सकता है.

<span class="formlabel">Your name</span>
<input type="text">

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

इमेज

alt एट्रिब्यूट का इस्तेमाल करके, हमेशा इमेज के बारे में टेक्स्ट में जानकारी दें.

<img src="dog.jpg">

<img src="dog.jpg" alt="A golden retriever sitting on the grass looking happy.">

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

<img src="texture.png">

<img src="texture.png" alt="">

जेक आर्किबाल्ड ने शानदार alt टेक्स्ट लिखने के बारे में एक लेख पब्लिश किया है.

लिंक

लिंक में जानकारी देने वाला टेक्स्ट शामिल करें. "यहां क्लिक करें" या "ज़्यादा" जैसे वाक्यांशों का इस्तेमाल न करें.

<p>To find out more about our latest offers, <a href="/offers.html">click here</a>.</p>

<p>Find out more about <a href="/offers.html"> our latest offers</a>.</p>

ARIA

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

कुछ इंटरफ़ेस विजेट में उनसे जुड़ा एचटीएमएल एलिमेंट नहीं होता. जैसे, कैरसेल, टैब, और अकॉर्डियन. इन्हें एचटीएमएल, सीएसएस, JavaScript, और ARIA के कॉम्बिनेशन का इस्तेमाल करके, स्क्रैच से बनाना होगा.

ARIA का मतलब Accessible Rich Internet Applications है. इसके शब्दकोश की मदद से, सिमैंटिक जानकारी दी जा सकती है. ऐसा तब किया जाता है, जब कोई सही एचटीएमएल एलिमेंट उपलब्ध न हो.

अगर आपको ऐसे इंटरफ़ेस एलिमेंट बनाने हैं जो अब तक एचटीएमएल एलिमेंट के तौर पर उपलब्ध नहीं हैं, तो ARIA के बारे में जानें.

JavaScript की मदद से जितनी ज़्यादा सुविधाएं जोड़ी जाएंगी, आपको ARIA के बारे में उतना ही ज़्यादा जानना होगा. अगर स्टैंडर्ड एचटीएमएल एलिमेंट का इस्तेमाल किया जाता है, तो हो सकता है कि आपको ARIA की ज़रूरत न पड़े.

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

असल लोगों के साथ टेस्टिंग करने से, आपको अपनी मान्यताओं के बारे में पता चल सकता है. अगले मॉड्यूल में, आपको यह जानने को मिलेगा कि लोग आपकी वेबसाइटों से कैसे इंटरैक्ट करते हैं. यह एक ऐसा क्षेत्र है जहां अनुमान लगाना बहुत आसान है.

देखें कि आपको कितना समझ आया

सुलभता के बारे में अपनी जानकारी की जांच करना