📝 Days 6–10 – Forms, Semantics और SEO · दिन 10
दिन 10: Accessibility (a11y) की ज़रूरी बातें
⏱ 75 min📶 Intermediate🎯 100% self-study
दिन 10 / 15
✅ आज आप सीखेंगे
- Accessibility किसे चाहिए (सोच से ज़्यादा लोग)
- नींव के रूप में semantic HTML
- Keyboard access, focus और skip links
- ARIA: कब इस्तेमाल करें – और कब नहीं
- 10-point accessibility audit
🏢 असली दुनिया में
कमज़ोर नज़र वाले retired teacher Mr. Kapoor मिठाई order करने के लिए phone का screen reader इस्तेमाल करते हैं। हाथ की चोट के बाद उनकी पोती सिर्फ़ keyboard चलाती है। अगर Sharma Sweets की website इनके लिए काम न करे, तो दुकान वफ़ादार customers खोती है – और कई देशों में inaccessible sites पर क़ानूनी कार्रवाई भी होती है।
किसे फ़ायदा?
🦯
Blind और कमज़ोर नज़रScreen readers (TalkBack, VoiceOver, NVDA) HTML ज़ोर से पढ़ते हैं।⌨️
सिर्फ़ keyboardMotor disabilities, चोट, power users – Tab, Enter, Space।🎨
Colour blind~8% पुरुष लाल और हरे में फ़र्क नहीं कर पाते।👵
हर कोई, कभी-कभीScreen पर धूप, टूटा हाथ, धीमा 3G, उम्र के साथ कमज़ोर आँखें।नियम 1: सही element लें
Inaccessible
- <div onclick="order()">Order</div>
- Tab से focus नहीं
- Screen reader सिर्फ़ “Order” कहता है
- Enter key कुछ नहीं करती
Accessible
- <button type="button">Order</button>
- अपने-आप focus होता है
- “Order, button” बोला जाता है
- Enter और Space चलते हैं
HTML
<div onclick="alert('div clicked')" style="display:inline-block;padding:6px 12px;background:#e34f26;color:#fff;border-radius:6px">Fake button (div)</div>
<button type="button" onclick="alert('button clicked')">Real button</button>
<p>Press <kbd>Tab</kbd> inside this box: only the real button gets focus.</p>नियम 2: सब कुछ keyboard से चले
HTML
<style>
.skip{position:absolute;left:-999px} .skip:focus{left:8px;top:8px;background:#fff;padding:6px;border:2px solid #e34f26}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
</style>
<a class="skip" href="#main">Skip to main content</a>
<nav><a href="#">Home</a> · <a href="#">Menu</a> · <a href="#">Contact</a></nav>
<main id="main" tabindex="-1"><h1>Sharma Sweets</h1>
<label>Search <input type="search"></label> <button>Go</button>
</main>| करें | बचें |
|---|---|
| Natural tab order (source order) रखें | tabindex="1", "2"… positive values |
| साफ़ focus outline दिखाएँ | बिना विकल्प के outline: none |
| पहले item के रूप में skip link | Keyboard traps (जिन modals से निकल न सकें) |
| tabindex="-1" सिर्फ़ script से focus के लिए | div/span पर सिर्फ़-click actions |
नियम 3: text विकल्प और साफ़ भाषा
- Images पर अर्थपूर्ण
alt; सजावट के लिएalt=""(Day 4)। - हर form field का दिखने वाला <label> (Day 6)।
- Link text बताए कहाँ जाएगा – “click here” कभी नहीं (Day 3)।
- Video के captions (<track kind="captions">), audio का transcript।
- html पर
lang="en"और Hindi text परlang="hi"ताकि screen readers सही आवाज़ लें।
HTML
<p lang="hi">ताज़ी मिठाइयाँ, रोज़ सुबह।</p> <video controls width="320" src="/assets/img/tutorials/html/shop.mp4"> <track kind="captions" srclang="en" label="English" src="captions-en.vtt"> </video>
नियम 4: रंग और contrast
HTML
<p style="color:#bbb">Light grey text on white – hard to read (contrast 1.9:1) ❌</p> <p style="color:#555">Dark grey on white – easy to read (contrast 7.5:1) ✅</p> <p><span style="color:red">Red = sold out</span> ❌ colour only</p> <p><span style="color:#b91c1c">✖ Sold out</span> ✅ icon + text + colour</p>
💡 Contrast के लक्ष्य
WCAG सामान्य text के लिए कम से कम 4.5 : 1 और बड़े text के लिए 3 : 1 माँगता है। Chrome DevTools colour inspect करने पर contrast ratio दिखाता है।
ARIA – आख़िरी उपाय
HTML
<button type="button" aria-label="Close offer banner">✕</button>
<button type="button" aria-expanded="false" aria-controls="m1"
onclick="const o=this.getAttribute('aria-expanded')==='true';this.setAttribute('aria-expanded',!o);document.getElementById('m1').hidden=o;">☰ Menu</button>
<ul id="m1" hidden><li>Home</li><li>Menu</li></ul>
<p>Cart: <span aria-live="polite" id="c">0 items</span>
<button type="button" onclick="c.textContent=(parseInt(c.textContent)+1)+' items'">Add ladoo</button></p>| ARIA | उद्देश्य |
|---|---|
| aria-label | सिर्फ़-icon control का नाम (✕, ☰, 🔍) |
| aria-labelledby / aria-describedby | Element का नाम/विवरण बताने वाले दिखते text की ओर इशारा |
| aria-expanded | Menu/accordion खुला है या नहीं |
| aria-live="polite" | बदलते content की घोषणा (cart count, form status) |
| aria-hidden="true" | सजावटी icons screen readers से छिपाएँ |
| role="alert" | Errors जैसे ज़रूरी संदेश |
⚠️ ARIA का पहला नियम
अगर कोई native HTML element पहले से काम करता है (button, nav, label, details), तो ARIA की जगह वही लें। ग़लत ARIA, बिना ARIA से बुरा है।
10-point quick audit
- Mouse हटा दें – क्या Tab, Enter, Space, Esc से पूरा page चलता है?
- क्या focus outline हमेशा दिखती है?
- क्या हर image का सही alt है?
- क्या हर field का label है?
- क्या ठीक एक h1 और तार्किक heading क्रम है?
- क्या link और button text बिना संदर्भ के भी साफ़ हैं?
- Contrast ≥ 4.5:1?
- 200% zoom – क्या content अब भी fit होता है?
- html lang set; Hindi हिस्से lang="hi"?
- Lighthouse चलाएँ (Chrome DevTools → Lighthouse → Accessibility) और list ठीक करें।
🏅 आज के Job Skills
✔ div-buttons की जगह native elements✔ Keyboard access, focus और skip links सुनिश्चित करना✔ Text विकल्प, captions और lang देना✔ ARIA सही इस्तेमाल करना और audit चलाना
Practice tasks
🏋️ Practice – ख़ुद करें
Task 1: इसे ठीक करें:
<div onclick="buy()">🛒</div> <img src="ladoo.jpg"> <input placeholder="Mobile">Solution देखें
HTML
<button type="button" onclick="alert('added')" aria-label="Add to cart">🛒</button>
<img src="/assets/img/tutorials/html/ladoo-400.webp" alt="Besan ladoo, ₹500 per kg" width="160" height="120">
<label for="mob">Mobile</label> <input id="mob" type="tel" autocomplete="tel">Task 2: रोज़ इस्तेमाल होने वाली किसी website पर Lighthouse Accessibility चलाएँ और उसकी तीन मुख्य समस्याएँ लिखें।
Task 3: TalkBack (Android) या VoiceOver (iPhone) चालू करके अपना Day 8 page दो मिनट चलाएँ। क्या उलझाने वाला था?
Quick quiz
🧠 Quick Quiz – ख़ुद को जाँचें
1. Click वाले action के लिए सबसे अच्छा element?
Keyboard और screen-reader support अंदर ही।
2. सामान्य text का न्यूनतम contrast (WCAG AA)?
बड़े text को 3:1।
3. सिर्फ़ ✕ icon वाले button को चाहिए…
Accessible name देता है।
4. aria-live="polite" किसलिए?
जैसे cart count।
5. Positive tabindex values (1, 2, 3)…
ये natural क्रम तोड़ते हैं।
Interview corner
💼 Interview Corner
ARIA का पहला नियम क्या है?
अगर native HTML element या attribute ज़रूरी semantics और व्यवहार देता है, तो ARIA न लें। Native elements में keyboard support और सही roles मुफ़्त मिलते हैं।
Accessibility कैसे test करते हैं?
जल्दी के सुधारों के लिए automated tools (Lighthouse, axe), फिर manual जाँच: सिर्फ़-keyboard navigation, screen reader (NVDA/TalkBack/VoiceOver), 200% zoom, contrast जाँच, और बेहतर हो तो disabled users के साथ testing।
सारांश
- Native semantic elements मुफ़्त में accessibility देते हैं।
- सब कुछ keyboard से चले, दिखते focus और skip link के साथ।
- Text विकल्प, labels, captions, lang और contrast ≥ 4.5:1।
- ARIA सिर्फ़ कमी भरता है; keyboard, screen reader और Lighthouse से audit।
➡️ आगे
Day 11: interactive HTML – details/summary, dialog, progress, meter, template और data attributes।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
क्या accessibility से SEO को मदद मिलती है?
हाँ – alt text, headings, link text और semantic ढाँचा search engines को भी page समझने में मदद करते हैं।
क्या India में accessibility का क़ानून है?
हाँ – Rights of Persons with Disabilities Act, 2016 और सरकारी guidelines (GIGW) WCAG के अनुसार accessible public websites माँगते हैं।
