WCAG 2.1
Levels: A, AA (legal), AAA।
POUR Principles
Perceivable, Operable, Understandable, Robust।
Color Contrast
- Normal text 4.5:1, Large 3:1, UI 3:1
- Tools: WebAIM Contrast, Lighthouse
Semantic HTML ⭐
❌ <div onclick="...">Submit</div> ✅ <button>Submit</button> ✅ <nav>, <main>, <article>, <footer> ✅ h1→h6 hierarchical
ARIA
<button aria-label="Close">✕</button> <div role="alert">Error</div> <div role="dialog" aria-modal="true" aria-labelledby="t1"> <h2 id="t1">Confirm</h2> </div> <button aria-expanded="false" aria-controls="menu">Menu</button>
Native HTML prefer ARIA।
Keyboard Nav
Tab, Shift+Tab, Enter/Space, Esc, Arrow (widgets), focus visible, skip-to-main।
Screen Readers
NVDA (free Win), JAWS (Win), VoiceOver (Mac/iOS), TalkBack (Android)।
Image Alt
<!-- Informative --> <img alt="Persian cat sleeping"> <!-- Decorative --> <img alt=""> <!-- Functional --> <a><img alt="Print this page"></a>
Audit Tools
axe DevTools, Lighthouse, WAVE, Pa11y CI।
i18n
en.json: { "welcome": "Welcome, {name}!" }
bn.json: { "welcome": "স্বাগতম, {name}!" }
// react-i18next, vue-i18n, FormatJS
t("welcome", { name: "Rahim" });
l10n
- Date: 2024-01-15 vs ১৫ জানুয়ারি
- Number: 1,234.56 vs ১,২৩৪.৫৬
- Currency, plural rules
RTL
<html dir="rtl" lang="ar"> /* CSS logical */ margin-inline-start: 16px; padding-inline-end: 8px; text-align: start;
i18n Best Practices
- No hardcoded strings
- Avoid concatenation (word order)
- Plural-aware
- Allow text expansion (German 30% longer)
- Intl API for dates/numbers
- UTF-8 everywhere