सुलभता

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

कलर विज़न में कमी

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

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

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

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

ये ब्राउज़र के लिए खास टूल होते हैं. ऑपरेटिंग सिस्टम के लेवल पर, अलग-अलग तरह के विज़न को एम्युलेट किया जा सकता है.

Mac में, इस लिंक पर जाएं:

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

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

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

a {
  color: red;
}

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

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

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

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

• tota11y एक बुकमार्कलेट है जिसे आप अपने ब्राउज़र के टूलबार में जोड़ सकते हैं.
• VisBug एक ब्राउज़र एक्सटेंशन है, जो सभी प्रमुख डेस्कटॉप ब्राउज़र के लिए उपलब्ध है.
• Firefox का सुलभता जांचने वाला टूल, विज़ुअल कंट्रास्ट से जुड़ी समस्याओं की जांच कर सकता है.
• 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 pseudo-class का इस्तेमाल करें. आप उन स्टाइल को ज़्यादा आकर्षक बना सकते हैं.

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 का मतलब है, ऐक्सेस किए जा सकने वाले रिच इंटरनेट ऐप्लिकेशन. सही एचटीएमएल एलिमेंट उपलब्ध न होने पर, इसकी शब्दावली आपको सिमैंटिक जानकारी देने में मदद करती है.

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

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

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

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

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

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