HTML Accessibility: alt Text, Label, ARIA क्या है
4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन
Accessibility का मतलब है कि आपका पेज सबके लिए काम करे — उस visitor के लिए भी जो screen reader से पेज को सुनकर समझता है, और उस visitor के लिए भी जो mouse इस्तेमाल नहीं कर सकता और सिर्फ keyboard से चलता है। अच्छी खबर यह है: accessibility का ज़्यादातर हिस्सा सिर्फ अच्छा HTML है। अगर आप हर काम के लिए सही tag इस्तेमाल करते हैं, तो इसका ज़्यादातर हिस्सा मुफ्त में मिल जाता है।
Alt text जो सच में बताए
हर meaningful image को alt attribute चाहिए जो बताए कि तस्वीर में क्या है — क्योंकि वही text screen reader ज़ोर से पढ़ता है। "Students in the KAMALDNP computer lab" अच्छा alt text है। "image", "photo", या file का नाम "IMG_2041.jpg" अच्छे नहीं हैं — वे visitor को कुछ नहीं बताते। अगर कोई image सिर्फ सजावट के लिए है (कोई border, कोई background pattern), तो उसे खाली alt="" दीजिए ताकि screen reader किसी बेकार file नाम की घोषणा करने की जगह उसे छोड़ दे।
Labels, landmarks और keyboard focus
हर form control को <label> चाहिए जो for और id से जुड़ा हो — इसके बिना screen reader visitor को यह नहीं बता सकता कि क्या type करना है। Semantic landmarks (<header>, <nav>, <main>, <footer>) screen reader इस्तेमाल करने वाले को पूरा पेज सुनने की जगह सीधे content तक पहुँचा देते हैं। और keyboard से चलने वाले visitor Tab और Enter से चलते हैं — इसलिए click करने वाली चीज़ों के लिए असली <button> elements इस्तेमाल कीजिए, कभी <div> को button की तरह सजाकर नहीं, क्योंकि div को keyboard से focus नहीं किया जा सकता और न ही activate किया जा सकता है। Focus outline को CSS से कभी मत हटाइए, जब तक उसकी जगह कोई दिखने वाला outline न दें — वही outline बताता है कि keyboard user इस समय कहाँ है।
Aria-label — सिर्फ जहाँ सादा HTML कम पड़े
ARIA attributes (जैसे aria-label) screen readers के लिए जानकारी जोड़ते हैं। लेकिन ARIA का पहला नियम यह है: अगर सादा HTML ही काम कर दे तो ARIA मत इस्तेमाल कीजिए। एक <button> खुद ही अपने को button घोषित कर देता है; उस पर role="button" लगाना बेकार है। aria-label सिर्फ वहाँ इस्तेमाल कीजिए जहाँ HTML के पास कोई सादा जवाब नहीं है — जैसे icon-only button (बिना visible text वाला magnifying-glass search button) जहाँ aria-label="Search" screen reader को बताता है कि यह button क्या करता है।
| अभ्यास | ऐसा कीजिए | ऐसा नहीं |
|---|---|---|
| तस्वीरें | alt="Students in the computer lab" | alt="image" या बिल्कुल alt नहीं |
| Form fields | हर input पर <label for="email"> | सिर्फ placeholder text को label बनाना |
| Click करने वाली चीज़ें | असली <button> और <a> tags | Click handler वाला <div> |
| पेज की बनावट | <header>, <nav>, <main>, <footer> | हर चीज़ के लिए <div> |
| ARIA | Icon-only button पर aria-label | उन elements पर ARIA जिन्हें HTML पहले से बता देता है |
<label> screen पर रहता है और सबके लिए काम करता है — चाहें तो दोनों इस्तेमाल कीजिए, पर कभी सिर्फ placeholder नहीं।आम गलतियाँ
alt="image"लिखना — यह शोर जोड़ता है, जानकारी नहीं।- Form field पर सिर्फ placeholder text को label बनाना।
- Buttons को
<div>elements से बनाना जिन तक keyboard user पहुँच ही नहीं सकता। - Focus outline को CSS से हटाना और keyboard user को उसकी जगह कुछ न देना।
- हर जगह ARIA छिड़कना — बेकार ARIA, ARIA न होने से ज़्यादा screen readers को उलझा सकता है।
उदाहरण समझिए
<img src="lab.jpg" alt="Students in the KAMALDNP computer lab">— ऐसा alt text जो तस्वीर को बताता है, ताकि screen reader इस्तेमाल करने वाला जान सके कि उसमें क्या है।<label for="name">Your Name:</label>— असली label, इसलिए field सुनाया भी जाता है और उसके text पर click करके भी चुना जा सकता है।<button type="submit">Send</button>— असली button, keyboard से focus भी होता है और activate भी।<button aria-label="Search">🔍</button>— icon-only button, जहाँaria-labelसच में ज़रूरी है क्योंकि वहाँ कोई visible text नहीं है।<main>— वह landmark जो screen reader इस्तेमाल करने वालों को सीधे content तक पहुँचा देता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<title>Accessibility</title>
</head>
<body>
<header><h1>KAMALDNP Academy</h1></header>
<nav><a href="#">Home</a> | <a href="#">Courses</a></nav>
<main>
<img src="lab.jpg" alt="Students in the KAMALDNP computer lab">
<form action="/submit.php" method="post">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Send</button>
<button aria-label="Search">🔍</button>
</form>
</main>
<footer><p>© 2026 KAMALDNP Academy</p></footer>
</body>
</html>परिणाम
खुद करके देखें — लाइव एडिटर
नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।
संबंधित पाठ
अक्सर पूछे जाने वाले सवाल
इस पाठ के बारे में सबसे ज़्यादा पूछे जाने वाले सवाल — सवाल पढ़ें, फिर खोलकर जवाब देखें।
1. वेब पेज के लिए एक्सेसिबिलिटी का क्या अर्थ है?
पेज सबके लिए काम करे, जैसे स्क्रीन रीडर से सुनने वाला विज़िटर और सिर्फ़ कीबोर्ड से चलाने वाला विज़िटर भी उसे आसानी से चला सके।
2. अच्छा ऑल्ट टेक्स्ट कैसा होता है?
वह टेक्स्ट जो बताए कि तस्वीर में क्या दिख रहा है, जैसे कंप्यूटर लैब में छात्र, न कि सिर्फ़ इमेज, फ़ोटो या फ़ाइल का नाम।
3. एरिया-लेबल कब इस्तेमाल करना चाहिए?
सिर्फ़ तब जब एचटीएमएल में उसका कोई जवाब न हो, जैसे बिना टेक्स्ट वाले आइकन बटन पर, वरना एचटीएमएल पहले से ही काफ़ी होता है।
खुद क्यों सीखें — AI से पूछने के बजाय?
AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।
सर्टिफिकेट पाएँ — सिर्फ ₹10
सभी 35 पाठ पूरे करें, टेस्ट पास करें (80%), ₹10 दें और अपना सर्टिफिकेट पाएँ।
टेस्ट देंदेखकर सीखना पसंद है? वीडियो कोर्स में वही विषय एक-एक करके सिखाए जाते हैं।
Go further with a full course
Free tutorials teach you the basics. Our paid courses add live projects, mentorship and a certificate.
Browse all courses
