सिमेंटिक HTML और CSS का उपयोग करके एक एक्सेसिबल वेबसाइट कैसे बनाएं

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

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

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

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

उदाहरण के लिए, एक <nav> टैग <div> टैग की तुलना में अधिक विवरण प्रदान करता है। इसी तरह, <div> अगला लेख </div> का उपयोग करने के बजाय, आपको स्पष्टता के लिए <button> अगला लेख </button> जोड़ना चाहिए। चूंकि <button> में पहले से ही कुछ डिफ़ॉल्ट शैली है, आप शायद इसे ओवरराइड करना चाहें। फिर भी, बिल्ट-इन कीबोर्ड एक्सेसिबिलिटी उपयोगकर्ताओं को टैब कुंजी का उपयोग करके बटनों के बीच नेविगेट करने की अनुमति देती है।

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

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

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

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

 <!--Good semantic HTML-->
<h1 class="hero-title">My heading</h1>
<p>Here's how you can make an accessible website using HTML and CSS</p>
<h2>My second heading</h2>
<!--Bad semantic HTML-->
<p style="font-size: 2.5em; font-weight: bold;">My heading</p>
<p>Here's how you can make an accessible website using HTML and CSS</p>

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

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

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

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

 <header>
<h1>This is a header</h1>
</header>
<nav>
<!--navbar for navigation-->
</nav>
<!--Main page content-->
<main>
<!--containing article-->
<article>
<h2>Article heading</h2>
<!--article content-->
</article>
<aside>
<h2>Related</h2>
<!--aside content-->
</aside>
</main>
<!--Website footer-->
<footer>
<!--footer content-->
</footer>

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

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

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

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

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

 <img src="flower.png" alt="A red flower" title="The red flower">

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

 <img src="flower.png" aria-labelledby="red-flower">
<p id="red-flower">A red flower ...</p>

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

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

पहुँच योग्य पृष्ठ सुविधाओं को स्टाइल करने का अर्थ है कि आपका डिज़ाइन पृष्ठ की मुख्य सामग्री के अनुसार व्यवहार करना चाहिए। उदाहरण के लिए, एक <h1>, <p>, और <li> तत्व के लिए, एक विशिष्ट सीएसएस होना चाहिए:

 h1 {
font-size: 4rem;
}
p, li {
font-size: 1.5rem;
color: blue;
}

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

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

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

 
a {
color: #ff0000;
}
a:active {
color: #000000;
background-color: #a60000;
}
a:hover, a:visited, a:focus {
color: #a60000;
text-decoration: none;
}

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

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

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

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

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

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

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

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

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

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