लोड हो रहा है...

HTML Accessibility

पिछले पाठ में datalist एक input पर सुझाव जोड़ता था। Accessibility व्यापक है: पूरी पृष्ठ कीबोर्ड, स्क्रीन रीडर और ज़ूम से उपयोगी। अच्छा HTML — landmark, label, alt, शीर्षक, असली बटन — नींव है।

accessibility क्यों मायने रखती है

कुछ माउस के बिना ब्राउज़ करते हैं, टेक्स्ट बड़ा करते हैं या पृष्ठ सुनते हैं। बिना alt का चार्ट मूक है; बिना label खोज बिना नाम; क्लिक करने योग्य div फोकस न ले। समावेशी मार्कअप सबकी मदद करता है। अक्सर HTML लिखते समय की आदतें।

सीधा उत्तर

1) Semantic क्षेत्र और मूल नियंत्रण। 2) हर नियंत्रण पर for/id वाला label। 3) सूचनात्मक छवियों के लिए अर्थपूर्ण alt; खाली alt केवल सजावट। 4) स्पष्ट h1 और तार्किक नेस्टिंग। 5) Tab से लिंक और बटन। 6) ARIA जब मूल HTML पर्याप्त न हो — पहले संरचना।

📊 Accessibility habits beginners use

Habit	Why it helps	Beginner tip
Semantic landmarks	Tools jump to regions	Prefer main/nav over anonymous divs
Labels on controls	Names fields clearly	for= must match the control id
Alt on images	Describes non-text content	Say what the image communicates
Logical headings	Outlines the page	Do not jump h1 → h4 for style
Keyboard-operable controls	Not everyone uses a pointer	Prefer button/a over clickable divs
Native before ARIA	Roles come built-in	Repair HTML; do not wallpaper broken markup

landmark के साथ लेबल वाली खोज

छोटी खोज पट्टी: accessible नाम वाला nav, लेबल वाला फ़ील्ड और असली बटन। स्क्रीन रीडर क्षेत्र और नाम बताता है; Tab इनपुट और बटन तक पहुँचता है।

Labeled search in a nav

html

<nav aria-label="Site">
<label for="q">Search</label>
<input id="q" name="q" type="search">
<button type="submit">Search</button>
</nav>

खोज डेमो पढ़ना

nav नेविगेशन landmark है; कई nav पर aria-label अंतर करता है
label for + input id accessible नाम देते हैं
name सबमिट के लिए — accessible नाम से अलग
type=search मूल है
असली button Enter/Space से
पिछला पाठ सुझाव; यहाँ नाम और पहुँच

शीर्षक, alt और असली बटन

दूसरा स्निपेट: h1, नेस्टेड h2, वर्णनात्मक alt वाली सूचनात्मक छवि और button क्रिया। «यहाँ क्लिक करें» और मूक चार्ट के विपरीत।

Headings alt and button

html

<main>
<h1>Monthly sales</h1>
<h2>Q1 results</h2>
<img src="chart.png" alt="Bar chart: sales rose from 10 to 18">
<p>Sales climbed through March.</p>
<button type="button">Download report</button>
</main>

संरचना डेमो पढ़ना

एक h1 विषय सेट करता है; नीचे h2 बिना h4 कूद
चार्ट का alt निष्कर्ष कहता है, सिर्फ «image» नहीं
सजावट: खाली alt; यह चार्ट सूचनात्मक है
क्रिया button है, div नहीं
main मुख्य सामग्री को landmark करता है
अगला पाठ JavaScript — ये HTML आदतें रखें

पहले क्या ठीक करें

बिना नाम फ़ील्ड: fancy placeholder से पहले label
मूक सूचनात्मक छवियाँ: alt लिखें
नकली नियंत्रण: क्लिक div को button/a से बदलें
शीर्षक गड़बड़ी: तार्किक रूपरेखा
केवल-ARIA पैच: मूल तत्व इस्तेमाल करें
कीबोर्ड बंद गली: जो क्लिक हो Tab से पहुँचे

अभ्यास — पूरे पृष्ठ की आदतें

खोज डेमो; label हटाएँ फिर for/id वापस
दूसरा nav अलग aria-label के साथ
चार्ट alt खाली करें; अर्थपूर्ण alt वापस
जानबूझकर h1→h4; फिर h1→h2 ठीक करें
बटन को div से बदलें; फिर असली button और Tab
वाक्य: accessibility HTML संरचना से शुरू होती है, ARIA वॉलपेपर से नहीं
अगला पाठ script जोड़ता है — label और बटन रखें

आसान गलतियाँ

बिना संदर्भ «यहाँ क्लिक करें» लिंक
सूचनात्मक छवियाँ बिना alt या खाली alt
क्लिक div जो कीबोर्ड नज़रअंदाज़ करें
केवल दृश्य आकार के लिए शीर्षक स्तर
label की जगह placeholder
टूटे मार्कअप पर ARIA भूमिकाएँ
भूलना कि datalist को भी label चाहिए था

सारांश

Accessibility = अधिक लोगों और टूल के लिए उपयोगी संरचना
Landmark, label, alt, शीर्षक और मूल बटन मायने रखते हैं
कीबोर्ड पहुँच काम का हिस्सा है
भारी ARIA से पहले ठोस HTML
Datalist एक नियंत्रण था; यह पाठ पृष्ठ देखता है
अगला: HTML पृष्ठों में JavaScript जोड़ना

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

अपने ज्ञान की परीक्षा करें

इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं

❓

प्रश्न

🎯

70%

पास करने के लिए

♾️

∞

समय

🔄

∞

प्रयास

📝 निर्देश

हर प्रश्न को ध्यान से पढ़ें
हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
आपकी प्रगति शीर्ष पर दिखाई जाएगी