ऐक्सेस करने लायक वेब ऐप्लिकेशन का डिज़ाइन, उपयोगकर्ताओं को अच्छा अनुभव देने और ऐप्लिकेशन के उपयोगकर्ताओं को ज़्यादा से ज़्यादा संतुष्टि देने का अहम हिस्सा है. ऐक्सेस किया जा सकने वाला वेब ऐप्लिकेशन, यह पक्का करता है कि अलग-अलग क्षमताओं वाले लोगों तक और अलग-अलग जगहों के लोगों को बराबर का ऐक्सेस मिले. जिन लोगों की सुनने की क्षमता, संज्ञानात्मक, बोलने या देखने या अपने वेब ऐप्लिकेशन का फ़्रंटएंड बनाते समय, सुलभता सुविधाओं का इस्तेमाल शुरू से ही इस्तेमाल करें. इससे सुलभता से जुड़ी समस्याओं से बचा जा सकता है. इसके लिए, बिल्ड प्रोसेस के दौरान फिर से कोई काम करना ज़रूरी हो. पक्का करें कि आपके ऐप्लिकेशन का कॉन्टेंट, वेब क्रॉलर और स्क्रीन रीडर से पता लगाया जा सके. साथ ही, उपयोगकर्ताओं को अच्छा उपयोगकर्ता अनुभव भी दिया जा सके.
कई देशों और उद्योगों में सुलभता एक कानूनी जवाबदेही होती है; आपको इन दिशा-निर्देशों को समझना होगा और अपने फ़्रंटएंड डिज़ाइन में सुलभता समाधानों को शामिल करना होगा. कई कारोबार के मामले में वेब कॉन्टेंट के लिए सुलभता की अहमियत को भी हाइलाइट किया गया है.
एमडीएन और डब्ल्यूसीएजी जैसे संसाधनों से, वेब ऐप्लिकेशन की सुलभता बढ़ाने के लिए ज़रूरी दिशा-निर्देश और सुझाव मिलते हैं. आप web.dev पर सुलभता जानें कोर्स भी दे सकते हैं.
अलग-अलग कॉम्पोनेंट की एक-दूसरे पर निर्भरता, किसी वेब ऐप्लिकेशन को अलग-अलग उपयोगकर्ताओं के लिए ऐक्सेस करने लायक बनाने का एक ज़रूरी पहलू है.
रंग और कंट्रास्ट
किसी वेब ऐप्लिकेशन की सुलभता का आकलन करने के लिए, मुख्य रूप से रंगों का इस्तेमाल करना ज़रूरी होता है. फ़्रंटएंड इस्तेमाल करने वाले लोगों को पेज पर मौजूद कॉन्टेंट को समझने में आसानी होनी चाहिए. साथ ही, कॉन्टेंट के रंग और कंट्रास्ट का असर उपयोगकर्ताओं की सोच पर पड़ता है. देखने की स्थितियां और देखने से जुड़ी दिक्कतें कुछ समय के लिए, स्थिति से जुड़ी हो सकती हैं या हमेशा के लिए हो सकती हैं. हालांकि, अपने वेब ऐप्लिकेशन का फ़्रंटएंड बनाते समय इन पर ध्यान देना ज़रूरी है. यूज़र इंटरफ़ेस पर इस्तेमाल किए गए रंगों के बीच सही कंट्रास्ट या चमक के अंतर से, आपका वेब ऐप्लिकेशन अलग-अलग तरह के लोगों के लिए ज़्यादा आसान बन जाता है. कंट्रास्ट अनुपात, बैकग्राउंड और टेक्स्ट की चमक में अंतर दिखाता है.
कंट्रास्ट मापने के लिए, कंट्रास्ट अनुपात फ़ॉर्मूला का इस्तेमाल करें, ताकि यह पक्का किया जा सके कि बैकग्राउंड पर टेक्स्ट या आइकॉन के लिए मिनिमम कंट्रास्ट मौजूद हो. रंग को पहचानने से जुड़ी कई तरह की समस्याओं को ध्यान में रखना चाहिए. हालांकि, रंगों के नए मॉडल यह पक्का कर सकते हैं कि कॉन्टेंट को ग्रेस्केल में देखे जाने के बाद भी उसे सही तरीके से पहचाना जाए.
अक्सर गहरे रंग वाली थीम का इस्तेमाल करने का सुझाव दिया जाता है, ताकि सुलभता सुविधाओं के लिए रंग और कंट्रास्ट सही से काम करें. सफ़ेद रोशनी और पढ़ने में कठिनाई की वजह से अक्सर विज़ुअल इनपुट के लिए गहरे रंग वाली थीम को प्राथमिकता दी जाती है. कॉन्टेंट पर चलने वाले ऐप्लिकेशन में ज़्यादा टेक्स्ट और इमेज शामिल होते हैं. इसलिए, उपयोगकर्ताओं की अलग-अलग ज़रूरतों को पूरा करने के लिए, रंगों और कंट्रास्ट अनुपात का सही तरीके से इस्तेमाल करना ज़रूरी है.
web.dev पर कलर और कंट्रास्ट के बारे में ज़्यादा जानें.
टाइपाेग्राफ़ी
टाइपोग्राफ़ी का मतलब, टेक्स्ट के चुने गए विकल्प और क्रम से लगाना है, ताकि अलग-अलग लोग उसे आसानी से पढ़ सकें और आसानी से पढ़ सकें. सुलभता सेटिंग में सबसे ज़्यादा बदलाव किए गए हैं, वह डिवाइस पर डिफ़ॉल्ट फ़ॉन्ट साइज़ है. कुछ उपयोगकर्ता स्क्रीन पर ज़्यादा से ज़्यादा टेक्स्ट को छोटे फ़ॉन्ट साइज़ में फ़िट करना या टेक्स्ट को जितना हो सके उतना बड़ा कर सकते हैं. इसलिए, टाइपोग्राफ़ी के साइज़ को लचीला और पढ़ने लायक बनाना बहुत ज़रूरी है. हर टेक्स्ट में भी ऐसे वर्ण होने चाहिए जिन्हें पाठक आसानी से समझ सकें. साथ ही, पूरा टेक्स्ट पढ़ने लायक होना चाहिए. अपने ऐप्लिकेशन के फ़्रंटएंड डिज़ाइन करते समय, ऐसे टाइप फ़ेस ज़रूर चुनें जिनमें टेक्स्ट पढ़ने में आसानी हो.
टाइपफ़ेस
आपके वेब ऐप्लिकेशन के लिए चुना गया टाइपफ़ेस या फ़ॉन्ट फ़ैमिली, कई तरह के पाठकों को आसानी से दिखना चाहिए. टाइपफ़ेस, आपके ऐप्लिकेशन के टेक्स्ट में इस्तेमाल किए गए अक्षरों का विज़ुअल डिज़ाइन होता है. कई अध्ययन वेब कॉन्टेंट की सुलभता का आकलन करते समय टाइपफ़ेस की अहमियत बताते हैं. ब्रैंड, यूज़र इंटरफ़ेस डिज़ाइन के लक्ष्यों, और आसानी से पढ़ने के लिए, ब्रैंड के बीच संतुलन ढूंढने से आपका ऐप्लिकेशन ज़्यादा से ज़्यादा उपयोगकर्ताओं के लिए ज़्यादा दिलचस्प बन जाता है. अपना फ़्रंटएंड बनाते समय, इस बात पर विचार करें कि टाइपफ़ेस विकल्प और उनमें मौजूद फ़ॉन्ट विकल्प किस तरह आपके ऐप्लिकेशन की सुलभता और पूरे डिज़ाइन में योगदान देते हैं.
फ़ॉन्ट साइज़
जिन लोगों को देखने में परेशानी होती है या जिन्हें रंग न देख पाने की समस्या है,
उन्हें ब्राउज़र ज़ूम करने की अनुमति दें. आपके वेब ऐप्लिकेशन पर मौजूद टेक्स्ट का फ़ॉन्ट अलग-अलग तरह के पाठकों को दिखना चाहिए. px से rem पर स्विच करके, फ़ॉन्ट के साइज़ के वैरिएशन हासिल किए जा सकते हैं. आरईएम यूनिट से फ़ॉन्ट का साइज़ सेट किया जा सकता है. यह फ़ॉन्ट साइज़, Wep ऐप्लिकेशन के रूट एलिमेंट के हिसाब से होता है. यह एक बहुमुखी विकल्प है, जिससे आपके वेब ऐप्लिकेशन
की पूरी पहुंच बढ़ेगी.
स्ट्रक्चर और लेआउट
अलग-अलग स्ट्रक्चर और लेआउट प्रॉपर्टी से, आपके इंटरफ़ेस की सुलभता पर असर पड़ता है. लेआउट सुविधाओं में टेक्स्ट ब्लॉक स्पेसिंग और अलाइनमेंट, साथ ही टेक्स्ट लाइनों और यहां तक कि अलग-अलग अक्षरों के बीच स्पेस भी शामिल है. ग्रिड का इस्तेमाल करें और उन कॉम्पोनेंट को विज़ुअलाइज़ करें जिन्हें आपको अपने डिज़ाइन में शामिल करना है. कॉन्टेंट का लेआउट और स्ट्रक्चर, उपयोगकर्ताओं के लिए दिलचस्प और दिलचस्प होना चाहिए. कई टेक्स्ट ब्लॉक वाले कॉम्प्लेक्स लेआउट या व्यस्त बैकग्राउंड कुछ लोगों के लिए मुश्किल हो सकते हैं. जैसे, एडीएचडी वाले उपयोगकर्ताओं के लिए. फ़्रंटएंड डिज़ाइन करने की प्रक्रिया के दौरान, सभी शामिल करने को प्राथमिकता दें.
ARIA और एचटीएमएल
ऐक्सेस करने लायक रिच इंटरनेट ऐप्लिकेशन (ARIA) में दिशा-निर्देशों और एट्रिब्यूट का सेट शामिल होता है. इससे वेब ऐप्लिकेशन को, उपयोगकर्ताओं के लिए ज़्यादा सुलभ बनाने में मदद मिलती है. ARIA एचटीएमएल को बेहतर बनाता है और ऐक्सेस किए जा सकने वाले JavaScript विजेट, लाइव कॉन्टेंट अपडेट, और गड़बड़ी के मैसेज वगैरह चालू करता है. अपने वेब ऐप्लिकेशन को ज़्यादा से ज़्यादा लोगों तक पहुंचाने के लिए, ARIA का सही इस्तेमाल ज़रूरी है. ARIA का गलत इस्तेमाल करने से गड़बड़ियां हो सकती हैं और इससे उपयोगकर्ता आपका ऐप्लिकेशन ऐक्सेस नहीं कर पाएंगे.
जहां संभव हो वहां ARIA
लेबल का इस्तेमाल करें. इससे ब्रेल और लिखाई को बोली में बदलने की सुविधा (टीटीएस) के साथ काम करने वाले दूसरे फ़ॉर्मैट लागू किए जा सकते हैं. ARIA भूमिकाओं और लेबल से सुलभता ट्री को तब बदला जाता है, जब यह डॉम ट्री से अलग होता है. ये लेबल, नॉन स्टैंडर्ड टैग का इस्तेमाल
करने के लिए भी ज़रूरी होते हैं, जैसे कि div को क्लिक किए जा सकने वाले बटन के तौर पर इस्तेमाल किया जा रहा है. ARIA की ज़रूरत तब होती है, जब किसी एचटीएमएल एलिमेंट में सुलभता सुविधा काम न करती हो. कॉन्टेंट पर आधारित ऐप्लिकेशन डिज़ाइन करते समय, पक्का करें कि आपके ऐप्लिकेशन को ज़्यादा से ज़्यादा उपयोगकर्ताओं तक पहुंचाने में मदद करने के लिए, स्क्रीन रीडर और दूसरे सहायक डिवाइस ठीक से काम करते हों.
web.dev पर ARIA और एचटीएमएल के बारे में ज़्यादा जानें.
अंतर्राष्ट्रीयकरण
अंतरराष्ट्रीयकरण का मतलब है ऐसा वेब ऐप्लिकेशन डिज़ाइन करना जिसे भाषा और सांस्कृतिक बैकग्राउंड के उपयोगकर्ता ऐक्सेस कर सकें. कोड में ज़रूरी बदलावों के बिना, आपका वेब ऐप्लिकेशन अलग-अलग भाषाओं, भौगोलिक क्षेत्रों, और सांस्कृतिक प्राथमिकताओं के हिसाब से काम करना चाहिए. अंतरराष्ट्रीयकरण के मुख्य कॉम्पोनेंट में कई भाषाओं में सहायता, स्थानीय भाषा के अनुसार कॉन्टेंट को अलग करना, कॉन्टेंट को अलग करना, तारीख और समय का फ़ॉर्मैट, टेक्स्ट के लिए निर्देश, और भाषा पर बातचीत करना वगैरह शामिल हैं.
अपने वेब ऐप्लिकेशन को अंतरराष्ट्रीय बनाकर, दुनिया भर की ऑडियंस को सभी के लिए बेहतर अनुभव दिया जा सकता है. ऐसे किसी भी वेब ऐप्लिकेशन के लिए अंतरराष्ट्रीयकरण ज़रूरी है जिसके उपयोगकर्ताओं की संख्या अलग-अलग हो या जिसका लक्ष्य अंतरराष्ट्रीय स्तर पर विस्तार करना हो.
लॉजिकल प्रॉपर्टी
सीएसएस में स्टाइल बनाते समय, पक्का करें कि आप top / down / left/ right जैसी प्रॉपर्टी के बजाय, start/ end का इस्तेमाल करें. इससे यह पक्का होता है कि मेन्यू और साइट लेआउट, RTL की भाषाओं के हिसाब से बदल जाते हैं.
वैकल्पिक कॉन्टेंट
अपनी सामग्री के लिए कस्टम मार्कअप उपलब्ध कराने के लिए, हेडर में वैकल्पिक दस्तावेज़ों के लिंक के साथ एचटीएमएल टैग में lang एट्रिब्यूट शामिल करें. अगर तय की गई भाषा, डिफ़ॉल्ट ब्राउज़र की भाषा से अलग है, तो ब्राउज़र को सही पेज चुनने में मदद मिलती है. इससे वेब ब्राउज़र और सर्च इंजन को पेज की भाषा समझने में मदद मिलती है. यह कॉन्टेंट को सही तरीके से रेंडर करने और एसईओ के लिए ज़रूरी है.
अंतरराष्ट्रीय स्तर पर
JavaScript में मौजूद Intl ऑब्जेक्ट, कई भाषाओं और संस्कृति की जानकारी देने वाले वेब ऐप्लिकेशन बनाने के लिए एक अहम टूल है. यह वेब ऐप्लिकेशन को अंतरराष्ट्रीय और स्थानीय भाषा के मुताबिक बनाने की सुविधाएं देता है. साथ ही, इससे पक्का होता है कि आपका इंटरफ़ेस और कॉन्टेंट, दुनिया भर के उपयोगकर्ताओं के लिए समझने लायक और सांस्कृतिक तौर पर सही है. Intl ऑब्जेक्ट से मिलने वाली सुविधाओं में तारीख और समय की फ़ॉर्मैटिंग, नंबर फ़ॉर्मैटिंग, और स्ट्रिंग कोलेशन शामिल हैं.
web.dev पर अंतरराष्ट्रीय बनाने के बारे में ज़्यादा जानें.
फ़ॉर्म
एचटीएमएल फ़ॉर्म, कॉन्टेंट पर चलने वाले वेब ऐप्लिकेशन का अहम हिस्सा होते हैं. ये कुकी, उपयोगकर्ता इंटरैक्शन को चालू करती हैं. साथ ही, इनके इस्तेमाल से उपयोगकर्ता की जानकारी इकट्ठा करने का तरीका भी तय होता है. अगर एचटीएमएल फ़ॉर्म का इस्तेमाल ज़्यादा लोग नहीं कर पाते, तो इससे उपयोगकर्ताओं को निराशा और असंतुष्टि हो सकती है.
एचटीएमएल फ़ॉर्म को ऐक्सेस करने लायक बनाने के लिए, फ़ॉर्म के सभी फ़ील्ड के लिए सिमैंटिक एचटीएमएल एलिमेंट का इस्तेमाल करें. इससे सहायक टेक्नोलॉजी को हर फ़ील्ड का मकसद समझने में मदद मिलती है. साथ ही, उपयोगकर्ता आसानी से इन फ़ील्ड को पूरा कर पाते हैं. साथ ही, पक्का करें कि सभी फ़ॉर्म फ़ील्ड को साफ़ तौर पर लेबल किया गया हो. इससे उपयोगकर्ताओं को सटीक और काम की जानकारी देने में मदद मिलती है. अपने एचटीएमएल फ़ॉर्म की सुलभता की जांच करना भी ज़रूरी है. ऐसा करने के लिए सहायक टेक्नोलॉजी का इस्तेमाल करें. इससे उपयोगकर्ता के अनुभव को सिम्युलेट किया जा सकता है कि आपके ऐप्लिकेशन के कॉन्टेंट को देखने के लिए ऐसी टेक्नोलॉजी की ज़रूरत पड़ती है.