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

सीडीसी (रोग नियंत्रण और रोकथाम केंद्र) के अनुसार, 60 मिलियन से अधिक अमेरिकी विकलांगता के साथ रहते हैं। वेब कंटेंट एक्सेसिबिलिटी दिशानिर्देशों का पालन करते हुए, आप कुछ प्रारंभिक विचार प्रस्तुत कर सकते हैं जो एक सुलभ वेबसाइट बनाने में योगदान देंगे। यहां वह सब कुछ है जो आपको HTML और CSS का उपयोग करके वेब एक्सेसिबिलिटी के साथ आरंभ करने की आवश्यकता है।

उचित शब्दार्थ के साथ संरचित HTML

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

उदाहरण के लिए, ए

अधिक पढ़ें: सरल HTML कोड उदाहरण जो आप 10 मिनट में सीख सकते हैं

सिमेंटिक HTML को विकसित करना आसान है क्योंकि आपको इसके साथ अतिरिक्त कार्यक्षमताएँ मिलेंगी। यह मोबाइल पर कमाल का काम करता है। साथ ही, जब आप अंदर लिपटे कीवर्ड को महत्व देते हैं

या टैग, यह SEO में मदद करता है।

स्क्रीन रीडर उपयोगकर्ताओं के लिए संरचित सामग्री

यहाँ अर्थपूर्ण HTML अच्छा बनाम का एक उदाहरण दिया गया है। बुरा।

अच्छा अर्थपूर्ण HTML
मेरा शीर्षक

यहां बताया गया है कि आप HTML और CSS का उपयोग करके एक सुलभ वेबसाइट कैसे बना सकते हैं

मेरा दूसरा शीर्षक

खराब अर्थपूर्ण HTML
मेरा शीर्षक

यहां बताया गया है कि आप HTML और CSS का उपयोग करके एक सुलभ वेबसाइट कैसे बना सकते हैं

पहला मामला स्क्रीन रीडर्स के लिए नेविगेट करना बहुत आसान है। यह शीर्षक और अनुच्छेद के बारे में सूचित करने वाले शीर्षलेख को पढ़ेगा। यह प्रत्येक तत्व के बाद एक सेकंड के लिए रुकेगा। आप कुछ शीर्षकों को छोड़ सकते हैं या एंटर/रिटर्न का उपयोग करके पिछले पर वापस जा सकते हैं। आप हेडर टैग का उपयोग करके सामग्री की तालिका भी बना सकते हैं।

जब आप सिमेंटिक एचटीएमएल (दूसरे मामले में) के बजाय प्रेजेंटेशनल एचटीएमएल लिखते हैं, तो लाइन अनावश्यक रूप से टूट जाती है और इसका परिणाम खराब अनुभव होता है। यह एक विशाल ब्लॉक तैयार करने जैसा है जिसे कैस्केड करना और हेरफेर करना कठिन है क्योंकि कोई संभावित चयनकर्ता नहीं हैं।

सुलभ वेबसाइट के लिए भाषा और लेआउट

आपको विस्तृत संक्षिप्त और संक्षिप्त शब्दों के साथ सटीक भाषा का उपयोग करना चाहिए। यदि संभव हो, तो 9-5 -> 9 से 5 लिखकर डैश से बचने का प्रयास करें। पहले HTML टेबल का उपयोग पेज लेआउट बनाने के लिए किया जाता था। यह नेस्टेड तालिकाओं के कारण सही रीडआउट में बाधा डालता था जो काफी जटिल लेआउट बनाते थे। यहाँ एक आधुनिक वेबसाइट संरचना है:

यह एक हेडर है



मुख्य पृष्ठ सामग्री

लेख युक्त

लेख शीर्षक

लेख सामग्री



वेबसाइट पाद लेख

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

UI नियंत्रणों, तालिकाओं और Alt पाठ पर पुनर्विचार करें

आमतौर पर, UI नियंत्रण आपके वेब दस्तावेज़ के बटन, प्रपत्र और लिंक नियंत्रण होते हैं। अंगूठे का नियम यह है कि उन्हें कीबोर्ड द्वारा हेरफेर किया जा सकता है। उनकी कुछ डिफ़ॉल्ट शैली है (विभिन्न ब्राउज़रों में भिन्न हो सकती है) जहां आप टैब कुंजी का उपयोग करके अन्य विकल्पों पर जा सकते हैं और किसी निष्कर्ष पर पहुंचने के लिए एंटर/रिटर्न दबा सकते हैं। आप "यहां क्लिक करें" के बजाय विशिष्ट और अर्थपूर्ण एंकर टेक्स्ट जोड़कर टेक्स्ट लेबल प्रबंधित कर सकते हैं।

सुलभ टेबल बनाने के लिए, टेबल हेडर जोड़ें

और स्कोप विशेषता का उपयोग करके पंक्तियों या स्तंभों को निर्दिष्ट करें। इसके अलावा, आप उपयोग कर सकते हैं या स्क्रीन पाठकों को तालिका की सामग्री का त्वरित अवलोकन देने के लिए सारांश विशेषता।

वैकल्पिक टेक्स्ट वेब क्रॉलर और स्क्रीन रीडर्स को छवि या वीडियो की प्रासंगिक जानकारी देता है। यदि आपकी छवि सजावटी उद्देश्यों के लिए है, तो बेहतर है कि ऑल्ट टैग को खाली छोड़ दें। अन्यथा, छवि का विस्तृत विवरण देने से बहुत मदद मिलती है।

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

एक लाल फूल...

आपने उस आईडी को संदर्भित करने के लिए aria-labelledby विशेषता का उपयोग किया है। यह स्क्रीन रीडर्स को उस पैराग्राफ के रूप में ऑल्ट टेक्स्ट का उपयोग करने की अनुमति देगा।

बेहतर पहुंच के लिए मानक सीएसएस

पहुँच योग्य पृष्ठ सुविधाओं को स्टाइल करने का अर्थ है कि आपका डिज़ाइन पृष्ठ की मुख्य सामग्री के अनुसार व्यवहार करना चाहिए। उदाहरण के लिए, a. के लिए

,

, तथा

तत्व, एक विशिष्ट सीएसएस होना चाहिए:

एच1 {
फ़ॉन्ट-आकार: 4रेम;
}
पी, ली {
फ़ॉन्ट-आकार: 1.5rem;
रंग नीला;
}

फ़ॉन्ट आकार, अक्षर रिक्ति, फ़ॉन्ट फ़ैमिली, आदि, एक आरामदायक पढ़ने में मदद करनी चाहिए। शीर्षकों को बॉडी टेक्स्ट से अलग दिखना चाहिए (डिफ़ॉल्ट स्टाइलिंग भी अच्छी है)। इसके अतिरिक्त, टेक्स्ट में से विपरीत रंग होना चाहिए सीएसएस के साथ आपके द्वारा चुनी गई पृष्ठभूमि.

स्टाइलिंग टेक्स्ट, लिंक और लेबल

सुलभ सीएसएस के साथ माइक्रो-इंटरैक्शन संभव है। यह लिंक को उचित तरीके से हाइलाइट करने के लिए टेक्स्ट पर जोर देने जितना छोटा हो सकता है। आप का उपयोग कर सकते हैं तथा विशिष्ट रूप से टैग करें। आप का उपयोग करके एक बिंदीदार रेखांकन जोड़ सकते हैं तत्व।

मानक लिंक को एक डिफ़ॉल्ट रंग के साथ रेखांकित किया जाना चाहिए: नीला और डिफ़ॉल्ट रंग के साथ पहले देखा गया लिंक: बैंगनी (आप इसे अनुकूलित कर सकते हैं)।

ए {
रंग: #ff0000;
}
ए: सक्रिय {
रंग: #000000;
पृष्ठभूमि-रंग: #a60000;
}
ए: होवर, ए: विज़िट किया गया, ए: फोकस {
रंग: #a60000;
पाठ-सजावट: कोई नहीं;
}

तो, माउस पॉइंटर में बदलाव के साथ, आपको फ़ोकस किए गए टेक्स्ट को हाइलाइट करना चाहिए। वेब एक्सेसिबिलिटी में पॉइंटर कर्सर और आउटलाइन महत्वपूर्ण भूमिका निभाते हैं।

प्रपत्र तत्वों और लेबलों को साफ-सुथरा रूप देने के लिए CSS का उपयोग करें। साथ ही, फ़ोकस/होवर स्थितियाँ तय करें जो अधिकांश ब्राउज़रों में संगत हों। याद रखें कि ये छोटे-छोटे संकेत लोगों को आपके वेब पेज को समझने में मदद करते हैं।

रंग कंट्रास्ट और छुपा मूल्य

वेबसाइट की रंग योजना को समायोजित करें ताकि अग्रभूमि (पाठ/छवि) का रंग पृष्ठभूमि के रंग के विपरीत हो मुख्य रूप से क्योंकि दृष्टिबाधित लोगों (जैसे, वर्णान्धता) के लिए सामग्री को पढ़ना कठिन होता है अच्छी तरह से। आप उपयोग कर सकते हैं रंग कंट्रास्ट चेकर WCAG मानदंड के अनुसार एक अच्छी रंग योजना प्राप्त करने के लिए। साथ ही, चेतावनियों या नियमों और शर्तों (सिर्फ एक रेड अलर्ट नहीं) के साथ मार्कअप संकेत (एक तारांकन की तरह) जोड़ने का प्रयास करें।

स्क्रीन रीडर्स को तब तक चिंता करने की कोई बात नहीं है जब तक कि सोर्स कोड ऑर्डर शालीनता से नहीं लिखा जाता। प्रदर्शन: कोई नहीं या दृश्यता: छिपे हुए गुणों का उपयोग करने से बचने का प्रयास करें क्योंकि वे स्क्रीन पाठकों से सामग्री छुपाते हैं।

स्टाइल को ओवरराइड करना आसान बनाएं

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

रैपिंग अप: HTML और CSS को मिलाएं

अब, आप अर्थपूर्ण HTML के साथ आरंभ करने और एक सुलभ वेबसाइट के लिए सही क्रम में एक समझदार स्रोत कोड लिखने की मूल बातें जानते हैं। HTML पर ध्यान दें और एक बार एक सुलभ CSS बनाने की दिशा में आगे बढ़ें।

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

वेबसाइट कैसे बनाएं: शुरुआती के लिए

आज मैं आपको शुरुआत से एक पूरी वेबसाइट बनाने की प्रक्रिया के बारे में बताऊंगा। अगर यह मुश्किल लगता है तो चिंता न करें। मैं आपको इसके माध्यम से हर कदम पर मार्गदर्शन करूंगा।

आगे पढ़िए

लेखक के बारे में

पूरी कहानी पढ़ने के लिए विस्तार करें