अपने पेजों को अलग-अलग स्क्रीन साइज़ के हिसाब से काम करने की अनुमति देना, यह पक्का करने का बस एक तरीका है कि आपकी वेबसाइट ज़्यादा से ज़्यादा लोगों के लिए उपलब्ध हो. इन बातों का भी ध्यान रखें.
रंगों की पहचान न कर पाना
अलग-अलग लोगों का रंग अलग-अलग होता है. इससे पीड़ित लोगों को लाल रंग का रंग अलग नहीं दिखता. हरा रंग न देख पाने की समस्या होती है. नीला रंग नीला पड़ जाता है.
कुछ टूल आपको इस बारे में सामान्य जानकारी दे सकते हैं कि अलग-अलग तरह की कलर विज़न वाले लोगों को आपकी कलर स्कीम कैसी दिखती है.
Firefox के सुलभता टैब में विकल्पों की सूची के साथ सिम्युलेट लेबल वाला ड्रॉपडाउन शामिल होता है.
Chrome DevTools में 'रेंडरिंग टैब' की मदद से, दिखने से जुड़ी समस्याओं को एम्युलेट करने की सुविधा मिलती है.
ये ब्राउज़र के लिए खास तौर पर बने टूल हैं. ऑपरेटिंग सिस्टम के स्तर पर अलग-अलग दृष्टि प्रकार की नकल करना भी संभव है.
Mac पर, इस लिंक पर जाएं:
- सिस्टम की सेटिंग
- सुलभता
- डिसप्ले
- कलर फ़िल्टर
- रंग फ़िल्टर सक्षम करें
कोई एक विकल्प चुनें.
आम तौर पर, अलग-अलग एलिमेंट के बीच फ़र्क़ करने के लिए, सिर्फ़ रंग पर भरोसा करना अच्छा नहीं होता. उदाहरण के लिए, आप अपने लिंक को आस-पास के टेक्स्ट के लिए अलग रंग बना सकते हैं और ऐसा भी करना चाहिए. हालांकि, आपको कुछ और स्टाइलिंग इंडिकेटर भी लागू करने चाहिए. जैसे, लिंक को अंडरलाइन करना या उन्हें बोल्ड बनाना.
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 पर, इस लिंक पर जाएं:
- सिस्टम की सेटिंग
- सुलभता
- डिसप्ले
कंट्रास्ट बढ़ाने के लिए विकल्प चुनें.
मीडिया की एक सुविधा यह पता लगाती है कि किसी ने हाई कंट्रास्ट मोड को चालू किया है या नहीं. prefers-contrast मीडिया सुविधा को तीन वैल्यू के लिए क्वेरी किया जा सकता है: no-preference, less, और more. इस जानकारी का इस्तेमाल, अपनी साइट के रंग पटल को अडजस्ट करने के लिए किया जा सकता है.
लोग अपने ऑपरेटिंग सिस्टम में, उलटे रंग का इस्तेमाल करने की प्राथमिकता भी सेट कर सकते हैं.
Mac पर, इस लिंक पर जाएं:
- सिस्टम की सेटिंग
- सुलभता
- डिसप्ले
रंग उलटने का विकल्प चुनें.
पक्का करें कि आपकी वेबसाइट अब भी उस व्यक्ति के लिए सही है जो उलटे रंग की मदद से ब्राउज़ कर रहा है. बॉक्स शैडो का ध्यान रखें—रंग उलटने पर, इनमें बदलाव करना पड़ सकता है.
फ़ॉन्ट साइज़
ब्राउज़र में इस्तेमाल होने वाले अलग-अलग रंग ही नहीं, बल्कि डिफ़ॉल्ट फ़ॉन्ट साइज़ भी बदल सकते हैं. जैसे-जैसे बच्चों की आंखों की रोशनी कम होती जाती है, वे समय के साथ अपने ब्राउज़र या ऑपरेटिंग सिस्टम के डिफ़ॉल्ट फ़ॉन्ट साइज़ में बदलाव करते जाते हैं.
मिलते-जुलते फ़ॉन्ट साइज़ का इस्तेमाल करके, इन सेटिंग को दिया जा सकता है. 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 का असर नहीं होना चाहिए. अपारदर्शिता और क्रॉस-फ़ेड का ट्रांज़िशन भी किया जा सकता है. कम मोशन का मतलब ऐनिमेशन नहीं है.
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 की ज़रूरत न पड़े.
अगर ऐसा है, तो स्क्रीन रीडर इस्तेमाल करने वाले लोगों से टेस्ट करें. इससे न सिर्फ़ आपको उनके वेब पर नेविगेट करने के तरीके की बेहतर जानकारी मिलेगी, बल्कि सुलभता को ध्यान में रखते हुए डिज़ाइन करने का अनुमान भी लगाना होगा.
वास्तविक लोगों के साथ टेस्ट करके, आप जो भी अनुमान लगा रहे हैं, उसे सबके सामने लाने का एक बेहतरीन तरीका है. अगले मॉड्यूल में, आपको उन अलग-अलग तरीकों के बारे में पता चलेगा जिनसे लोग आपकी वेबसाइटों से इंटरैक्ट करते हैं—यह एक और ऐसा क्षेत्र है जहां अनुमान लगाना बहुत आसान है.
आपने जो सीखा है उसकी जांच करें
सुलभता के बारे में अपनी जानकारी को परखें
सीएसएस की मदद से डेवलपर, उपयोगकर्ता की पसंद को ओवरराइड कर सकते हैं. जैसे कि फ़ॉन्ट का साइज़, सबसे खराब के लिए?
body { font-size: 12px; } का इस्तेमाल करना काफ़ी है.उपयोगकर्ता की फ़ॉन्ट साइज़ की प्राथमिकता ओवरराइट होने से बचने के लिए, क्या करना है?
px जैसी एब्सलूट इकाइयां.rem.दुनिया में हर कोई माउस का इस्तेमाल करता है.
अगर किसी इमेज में वैकल्पिक एट्रिब्यूट मौजूद नहीं है, तो इसका मतलब है कि क्या होगा?