HTML5 Course in Roman Hindi/Urdu - Lecture 13: HTML5 Accessibility aur Internationalization - Fully Detailed
HTML5 Accessibility (ARIA Roles, Alt, Lang) - Inclusive Web Banane Ke Liye
Accessibility (a11y) web ko sabke liye usable banata hai, jaise screen readers, keyboard navigation. HTML5 semantic elements already help, lekin ARIA (Accessible Rich Internet Applications) attributes extra semantics add karte hain. Focus on alt for images, lang for languages, aur ARIA roles jaise role="button".
Key Principle: Semantic HTML first, ARIA fallback (no ARIA if native semantics work).
Alt Attribute - Images Aur Media Ke Liye
Purpose: Alternative text for non-sighted users, SEO ke liye bhi. Empty alt="" decorative images ke liye.
Best Practices: Descriptive lekin concise (under 125 chars), context-based.
Kab use karein: Har img, area, input[type=image].
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alt Attribute Example - Lecture 13</title>
</head>
<body>
<h1>Accessible Images</h1>
<!-- Descriptive alt -->
<img src="chart.png" alt="Sales chart showing 20% growth in Q3 2025" width="400" height="300">
<p>Context: The chart above illustrates quarterly sales.</p>
<!-- Decorative -->
<img src="divider.png" alt="" aria-hidden="true">
<!-- Longdesc for complex -->
<img src="infographic.jpg" alt="Infographic overview" longdesc="detailed.html">
</body>
</html>Alt screen readers ko padhega, longdesc detailed page link karega.
Lang Attribute - Language Specification
Purpose: Content ki language batana, pronunciation aur translation ke liye.
Syntax: lang="code" (ISO 639-1, jaise "hi" Hindi, "en-US" English US). Html root par set, subsections mein override.
Kab use karein: Multi-language pages, quotes.
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lang Example - Lecture 13</title>
</head>
<body>
<h1 lang="hi">नमस्ते दुनिया</h1>
<p>English section: Hello World.</p>
<blockquote lang="fr">Bonjour le monde.</blockquote>
<p dir="rtl" lang="ar">مرØبا بالعالم</p> <!-- RTL for Arabic -->
</body>
</html>Screen readers language switch karenge, dir="rtl" text direction ke liye.
ARIA Roles aur Attributes - Extra Semantics
Purpose: Non-semantic elements ko roles dena, jaise div ko button banana.
Common Roles: role="button/alert/dialog", aria-label (label bina visible text ke), aria-hidden="true" (hide from accessibility tree), aria-live="polite/assertive" (dynamic updates).
States/Properties: aria-checked="true/false", aria-expanded="true/false".
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARIA Example - Lecture 13</title>
</head>
<body>
<h1>ARIA Enhanced Elements</h1>
<!-- Custom button -->
<div role="button" tabindex="0" aria-label="Close modal" onclick="closeModal()">X</div>
<!-- Alert -->
<div role="alert" aria-live="assertive">Error: Invalid input!</div>
<!-- Dialog -->
<dialog role="dialog" aria-labelledby="modal-title" aria-describedby="modal-desc">
<h2 id="modal-title">Confirmation</h2>
<p id="modal-desc">Are you sure?</p>
</dialog>
<!-- Checkbox simulation -->
<span role="checkbox" aria-checked="false" tabindex="0" aria-label="Agree to terms">[ ] Terms</span>
</body>
</html>Role semantics add karega, aria-label invisible users ke liye, tabindex keyboard focus ke liye.
Tip: ARIA misuse avoid (semantic tags prefer), WAVE tool se test.
Internationalization (i18n) - Global Web Banane Ke Liye
i18n content ko multiple languages/regions ke liye adapt karta hai, jaise RTL support, date formats. HTML5 lang/dir attributes core hain, meta http-equiv="content-language" optional.
Key: Translate attributes bhi (alt, title), JS libraries jaise i18next advanced ke liye.
Dir Attribute - Text Direction
Purpose: LTR (left-to-right) ya RTL (right-to-left) set, jaise Urdu/Arabic.
Values: "ltr" (default), "rtl", "auto" (content detect).
<!DOCTYPE html>
<html lang="hi" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dir Example - Lecture 13</title>
</head>
<body>
<h1 dir="ltr">English: Left to Right</h1>
<p dir="rtl" lang="ur">اردو: دائیں سے بائیں</p> <!-- Urdu RTL -->
<p dir="auto" lang="ar">العربية: Auto Detect</p>
</body>
</html>Dir text flow change karega, auto script detect karega.
Date/Time aur Number Formats - i18n Attributes
Input Types: date, time, number with lang-based formats (en-US MM/DD/YYYY, hi-IN DD/MM/YYYY).
Meta: http-equiv="content-language" content="hi" (deprecated, lang prefer).
<form>
<label for="birthdate">Birth Date:</label>
<input type="date" id="birthdate" lang="hi-IN"> <!-- Indian format -->
<label for="temp">Temperature:</label>
<input type="number" id="temp" lang="fr-FR" step="0.5"> <!-- Decimal comma in French -->
</form>Browser lang ke hisab se format adjust karega.
Advanced i18n: Translate Elements
Purpose: Translatable content mark, jaise
Tip: RTL CSS: body[dir=rtl] { text-align: right; }, fonts Google Noto ke liye.
Tools: Google Translate API, but manual review zaroori cultural accuracy ke liye.
Practice Tasks (Detailed with Steps)
- Alt/Lang Practice: "accessibility-basic.html" banao. 3 images with alt (descriptive, decorative, complex), multi-lang sections with lang/dir.
- ARIA Practice: "aria-elements.html" mein custom button aur dialog banao ARIA roles ke saath, aria-label add karo.
- i18n Practice: "i18n-page.html" mein RTL section Urdu ke liye, date input different locales ke saath.
- Full Accessibility Practice: Purani lecture se page le lo, alt sab images mein add, ARIA live region ek dynamic alert ke liye.
- Combined: Multi-lang FAQ banao details/summary ke saath, ARIA roles add, dir auto use. WAVE tool se validate. 35 minutes mein complete karo.
FAQ (Common Doubts with Details)
- Q: Alt text kitna lamba?
- A: Short descriptive, max 100-125 chars; complex ke liye longdesc ya figure/figcaption.
- Q: ARIA kab add karein?
- A: Jab native semantics na ho (div as button), lekin semantic tags prefer (button tag).
- Q: Dir auto kaam karta?
- A: Haan modern browsers mein, scripts jaise Arabic auto RTL detect.
- Q: i18n testing?
- A: Browser lang change, screen readers (NVDA/VoiceOver), RTL simulators.
Next Lecture Teaser
Lecture 14: Advanced Semantic Elements (dialog, picture, figure) aur Microdata (Schema.org) – Modern structure aur SEO markup.
Yeh lecture complete. Ab aap accessibility aur i18n master kar chuke ho.
