🔴 Advanced · Lesson 35
Accessibility: alt and ARIA
Accessibility: alt और ARIA
What Accessibility Means
Accessibility (often written "a11y") means building pages everyone can use — including people who are blind (using screen readers that speak the page aloud), can't use a mouse (keyboard only), have low vision, or are colour-blind. It isn't charity or an afterthought: it's part of quality. Bonus — accessible HTML is also better for SEO (Google is effectively a "blind user" reading your tags) and, in many countries, legally required for schools and businesses. The theme of this whole chapter: good semantic HTML is already 80% accessible.
The Easy Wins You Already Know
| Practice | Helps whom |
|---|---|
alt on images | Screen readers describe the image to blind users |
<label for> on inputs | Announces what each field is; bigger tap target |
| Semantic tags (nav, main...) | "Skip to main content", "list all links" navigation |
| Proper heading order | Blind users navigate by jumping between headings |
| Descriptive link text | "Download syllabus" not "click here" (screen readers list links out of context) |
Look at that list — you learned every one of these as normal HTML, not as "accessibility". That's the point: writing HTML correctly IS accessibility. The web became less accessible only when people replaced meaningful tags with div soup and unlabelled fields.
ARIA — When HTML Alone Isn't Enough
<!-- An icon-only button - no text for a screen reader to announce -->
<button aria-label="Close menu">✕</button>
<!-- A live region that announces updates automatically -->
<div aria-live="polite">3 items added to cart</div>
<!-- Role when no semantic tag fits -->
<div role="alert">Form submitted successfully</div>ARIA (Accessible Rich Internet Applications) adds accessibility information that plain HTML can't express — like giving a name to an icon-only button (
aria-label), or announcing dynamic changes. The golden rule of ARIA: "No ARIA is better than bad ARIA" — always prefer a real semantic element first (<button> over <div role="button">). Reach for ARIA only to fill genuine gaps, like icon buttons and live-updating regions.Keyboard Navigation
Tab → move to the next link/button/field
Shift+Tab → move back
Enter → activate a link/button
Space → toggle a checkbox, press a buttonMany users navigate entirely by keyboard (motor disabilities, or just power users). Test your own page: put the mouse away and Tab through it. Every interactive thing should be reachable and show a visible focus outline. Good news: real
<a>, <button>, <input> elements are keyboard-accessible automatically. Trouble starts only when a clickable <div> replaces a real button — it looks the same but can't be reached by keyboard. Yet another reason to use the right tag.Color and Contrast
- Enough contrast: light-gray text on white may look "modern" but is unreadable for low-vision users. Aim for strong dark-on-light or light-on-dark. Free contrast checkers grade it instantly.
- Never rely on colour alone: "fields in red are required" fails colour-blind users. Add a symbol or text too ("* required"). "Green = pass, red = fail" needs a word or icon alongside.
- Roughly 1 in 12 men has some colour blindness — this is a large, real audience, not an edge case.
Exam Corner
Q: What is web accessibility? Designing pages usable by everyone, including people with visual, motor or other disabilities.
Q: Name 3 HTML accessibility practices. alt text, form labels, semantic tags (also heading order, descriptive links).
Q: What is aria-label used for? Giving an accessible name to elements without visible text, like icon-only buttons.
Q: The golden rule of ARIA? No ARIA is better than bad ARIA — use real semantic elements first.
Q: Why not rely on colour alone to convey meaning? Colour-blind users can't distinguish it; add text or icons too.
Q: Name 3 HTML accessibility practices. alt text, form labels, semantic tags (also heading order, descriptive links).
Q: What is aria-label used for? Giving an accessible name to elements without visible text, like icon-only buttons.
Q: The golden rule of ARIA? No ARIA is better than bad ARIA — use real semantic elements first.
Q: Why not rely on colour alone to convey meaning? Colour-blind users can't distinguish it; add text or icons too.
Accessibility का मतलब
Accessibility (अक्सर "a11y" लिखा जाता है) मतलब आपकी website ऐसी बनाना कि हर कोई इस्तेमाल कर सके — जिनमें दृष्टिबाधित लोग शामिल हैं जो screen readers use करते हैं, जो mouse नहीं चला सकते और सिर्फ keyboard से navigate करते हैं, और वे जिन्हें रंग पहचानने में कठिनाई है. यह कोई अतिरिक्त feature नहीं; यह अच्छे HTML का स्वाभाविक नतीजा है. अच्छी खबर: अगर आपने इस course में semantic tags सीखे हैं, तो आप पहले से ही accessible HTML लिख रहे हैं. भारत में और दुनिया भर में, कई सरकारी और शैक्षिक websites के लिए यह कानूनी आवश्यकता भी है.
आसान जीतें जो आप पहले से जानते हैं
- हर image पर
alt: screen reader उसे ज़ोर से पढ़ता है. सजावटी image के लिएalt=""रखिए ताकि वह छोड़ी जाए. - Semantic tags:
<header>,<nav>,<main>,<footer>— screen readers इनसे सीधे किसी section पर कूद सकते हैं. सब कुछ<div>बनाने से यह क्षमता खत्म हो जाती है. - Headings का सही क्रम:
h1→h2→h3, बिना स्तर छोड़े. Users headings की सूची से पूरे page की रूपरेखा समझते हैं. - Form में
<label>: हर input का label उसकेidसे जुड़ा हो. बिना label वाला input screen reader के लिए अनाम box है. langattribute:<html lang="hi">screen reader को सही उच्चारण चुनने देता है.
ध्यान दीजिए इनमें से एक भी "अतिरिक्त accessibility code" नहीं है — ये सब सही HTML लिखने की आदतें हैं जो आप पहले ही सीख चुके. सही semantic HTML लगभग 80% accessibility मुफ्त में दे देता है. यही कारण है कि semantic tags पर इतना ज़ोर दिया जाता है.
ARIA — जब HTML काफी नहीं
<!-- Sirf icon wala button — screen reader ko kuch nahi milta -->
<button><svg>...</svg></button>
<!-- ARIA label se naam mil gaya -->
<button aria-label="Menu kholo"><svg>...</svg></button>
<!-- Dropdown ki sthiti bataana -->
<button aria-expanded="false">More</button>
<!-- Sirf sajavati icon chhupana -->
<span aria-hidden="true">★</span>ARIA (Accessible Rich Internet Applications) attributes assistive technology को अतिरिक्त जानकारी देते हैं जब HTML अकेले वह नहीं बता सकता. सबसे उपयोगी
aria-label है — जब button में सिर्फ icon हो और कोई text न हो, यह उसे नाम देता है. aria-expanded बताता है कि dropdown खुला है या बंद. aria-hidden="true" सजावटी चीज़ें screen reader से छुपाता है. पर पहला ARIA नियम यह है: कोई ARIA न होना बुरे ARIA से बेहतर है. जहां सही HTML tag मौजूद हो (<button>, <nav>), वहां उसे use कीजिए — ARIA सिर्फ अंतर भरने के लिए है.Keyboard Navigation
<!-- ✓ Yeh apne aap keyboard se chalta hai -->
<button onclick="save()">Save</button>
<a href="/about">About</a>
<!-- ✗ Yeh Tab se pahunch me nahi aata, Enter se chalta nahi -->
<div onclick="save()">Save</div>बहुत से users mouse बिल्कुल नहीं छूते — वे Tab से आगे बढ़ते हैं और Enter/Space से चीज़ें दबाते हैं. असली
<button> और <a> tags यह सब अपने आप देते हैं: वे focusable हैं, Enter पर चलते हैं, और screen reader उन्हें "button"/"link" बताता है. Clickable <div> कुछ नहीं देता. अपनी site की सबसे तेज़ accessibility जांच: mouse छोड़िए और सिर्फ Tab दबाकर पूरे page पर चलिए. अगर आप किसी चीज़ तक पहुंच न पाएं, या focus कहां है यह दिखे नहीं, तो वहां समस्या है. (याद रखिए: CSS में :focus outline कभी बिना बदले मत हटाइए.)Color और Contrast
Text और उसके background के बीच पर्याप्त अंतर होना चाहिए — हल्के भूरे background पर हल्का भूरा text कई लोगों के लिए अपठनीय है, खासकर धूप में phone देखते समय. WCAG मानक सामान्य text के लिए कम से कम 4.5:1 contrast ratio कहता है (बड़े text के लिए 3:1). Browser DevTools का color picker यह ratio दिखा देता है. दूसरा नियम: सिर्फ रंग से जानकारी मत दीजिए. "लाल fields ज़रूरी हैं" रंग-अंधता वाले user के लिए बेकार है — साथ में
* चिन्ह या "(required)" शब्द भी लिखिए. Error सिर्फ लाल border से नहीं, text message से भी बताइए.Exam Corner
Q: Accessibility क्या है? Website को ऐसा बनाना कि विकलांगता वाले लोगों सहित हर कोई उसे इस्तेमाल कर सके.
Q: Semantic tags accessibility में कैसे मदद करते हैं? Screen readers उनसे page की संरचना समझते हैं और सीधे sections पर कूद सकते हैं.
Q: aria-label कब चाहिए? जब element में दिखने वाला text न हो, जैसे सिर्फ icon वाला button.
Q: Clickable div के बजाय button क्यों? Button अपने आप keyboard-focusable है, Enter पर चलता है, और screen reader को उसका role बताता है.
Q: सामान्य text के लिए न्यूनतम contrast ratio? 4.5:1
Q: Semantic tags accessibility में कैसे मदद करते हैं? Screen readers उनसे page की संरचना समझते हैं और सीधे sections पर कूद सकते हैं.
Q: aria-label कब चाहिए? जब element में दिखने वाला text न हो, जैसे सिर्फ icon वाला button.
Q: Clickable div के बजाय button क्यों? Button अपने आप keyboard-focusable है, Enter पर चलता है, और screen reader को उसका role बताता है.
Q: सामान्य text के लिए न्यूनतम contrast ratio? 4.5:1
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.