एचटीएमएल अभिगम्यता
एचटीएमएल अभिगम्यता
हमेशा सुलभता को ध्यान में रखते हुए HTML कोड लिखें!
उपयोगकर्ता को अपनी साइट पर नेविगेट करने और इंटरैक्ट करने का एक अच्छा तरीका प्रदान करें। अपने HTML कोड को यथासंभव अर्थपूर्ण बनाएं ।
सिमेंटिक एचटीएमएल
सिमेंटिक HTML का अर्थ है यथासंभव सही उद्देश्य के लिए सही HTML तत्वों का उपयोग करना। सिमेंटिक तत्व एक अर्थ वाले तत्व हैं; यदि आपको एक बटन की आवश्यकता है, तो <button>तत्व (और
<div>तत्व नहीं) का उपयोग करें।
सिमेंटिक
<button>Report an Error</button>
गैर-अर्थ
<div>Report an Error</div>
सिमेंटिक HTML स्क्रीन रीडर्स को संदर्भ देता है, जो किसी पेज की सामग्री को ज़ोर से पढ़ते हैं।
बटन उदाहरण को ध्यान में रखते हुए:
- डिफ़ॉल्ट रूप से बटनों की स्टाइल अधिक उपयुक्त होती है
- एक स्क्रीन रीडर इसे एक बटन के रूप में पहचानता है
- फ़ोकस करने योग्य
- क्लिक करने योग्य
केवल-कीबोर्ड नेविगेशन पर निर्भर लोगों के लिए एक बटन भी पहुंच योग्य है; यह माउस और कुंजियों दोनों के साथ क्लिक करने योग्य हो सकता है, और इसे बीच में टैब किया जा सकता है (कीबोर्ड पर टैब कुंजी का उपयोग करके)।
गैर-अर्थपूर्ण तत्वों के उदाहरण : <div>और <span>- इसकी सामग्री के बारे में कुछ नहीं बताता है।
सिमेंटिक तत्वों के उदाहरण : <form>, <table>, और <article>- इसकी सामग्री को स्पष्ट रूप से परिभाषित करता है।
शीर्षक महत्वपूर्ण हैं
शीर्षकों <h1>को <h6>टैग के साथ परिभाषित किया गया है:
उदाहरण
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
खोज इंजन आपके वेब पेजों की संरचना और सामग्री को अनुक्रमित करने के लिए शीर्षकों का उपयोग करते हैं।
उपयोगकर्ता आपके पृष्ठों को इसके शीर्षकों द्वारा स्किम करते हैं। दस्तावेज़ संरचना और विभिन्न वर्गों के बीच संबंधों को दिखाने के लिए शीर्षकों का उपयोग करना महत्वपूर्ण है।
स्क्रीन रीडर हेडिंग का उपयोग नेविगेशनल टूल के रूप में भी करते हैं। विभिन्न प्रकार के शीर्षक पृष्ठ की रूपरेखा निर्दिष्ट करते हैं।
<h1>शीर्षकों का उपयोग मुख्य शीर्षकों के लिए किया जाना चाहिए, उसके बाद <h2>शीर्षक, फिर कम महत्वपूर्ण
<h3>, और इसी तरह।
नोट: HTML शीर्षकों का उपयोग केवल शीर्षकों के लिए करें। टेक्स्ट को बड़ा या बोल्ड बनाने के लिए शीर्षकों का प्रयोग न करें ।
वैकल्पिक लेख
विशेषता एक छवि के altलिए एक वैकल्पिक पाठ प्रदान करती है, यदि उपयोगकर्ता किसी कारण से इसे नहीं देख सकता है (धीमे कनेक्शन के
src
कारण, विशेषता में त्रुटि, या यदि उपयोगकर्ता स्क्रीन रीडर का उपयोग करता है)।
विशेषता का मान altछवि का वर्णन करना चाहिए:
उदाहरण
<img src="img_chania.jpg" alt="A narrow city street with flowers in Chania">
यदि किसी ब्राउज़र को कोई छवि नहीं मिल रही है, तो वह alt
विशेषता का मान प्रदर्शित करेगा:
उदाहरण
<img src="wrongname.gif" alt="A narrow city street with flowers in Chania">
भाषा घोषित करें
वेब पेज की भाषा घोषित करने के लिए आपको हमेशा टैग lang
के अंदर विशेषता शामिल करनी चाहिए। <html>यह खोज इंजन और ब्राउज़र की सहायता करने के लिए है।
निम्नलिखित उदाहरण अंग्रेजी को भाषा के रूप में निर्दिष्ट करता है:
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
स्पष्ट भाषा का प्रयोग करें
हमेशा स्पष्ट भाषा का प्रयोग करें, जो समझने में आसान हो। साथ ही उन पात्रों से बचने का प्रयास करें जिन्हें स्क्रीन रीडर स्पष्ट रूप से नहीं पढ़ सकता है। उदाहरण के लिए:
- वाक्यों को यथासंभव छोटा रखें
- डैश से बचें। 1-3 लिखने के बजाय 1 से 3 लिखें
- संक्षेप से बचें। फरवरी लिखने के बजाय फरवरी लिखें
- अपशब्दों से बचें
अच्छा लिंक टेक्स्ट बनाएं
एक लिंक टेक्स्ट को स्पष्ट रूप से स्पष्ट करना चाहिए कि उस लिंक पर क्लिक करने से पाठक को क्या जानकारी मिलेगी।
अच्छे और बुरे लिंक के उदाहरण:
अच्छा
खराब
नोट: यह पेज वेब एक्सेसिबिलिटी में एक परिचय है। अधिक जानकारी के लिए हमारे एक्सेसिबिलिटी ट्यूटोरियल पर जाएँ।