18. Web Accessibility (A11Y Architecture)
Aisi markup likhein jo Universal ho. Screen readers, keyboard-navigators aur legal compliance ke principles.
1. Accessibility is a Necessity, Not a Luxury
Basic: Disabled logo ko website padhne/samajhne mein help karna Web Accessibility (A11Y) kehlata hai.
Pro: Modern web standards (WCAG guidelines) legally enforce hote hain western countries mein. Agar aapki site blind user Screen Reader software (NVDA, Jaws, VoiceOver) pe access nahi kar pa rha, ya physically impaired banda Keyboard 'Tab' button se form nahi bhar pa rha, toh commercial apps legal lawsuits kha sakti hain. Markup ki shuruddhta iska pehla step hai.
2. Semantic Focus and Keyboard Navigation
Pro: Custom divs banakar React mein onClick lagana beginner mistake hai. <button> ya <a> tags inherently focusable hote hain. Jab user Tab Key dabata hai, browser UI events focus in elements par ghumata hai. Agar focusable state CSS (:focus-visible ring) mein prominent nahi hai, toh keyboard user blind feel karega.
3. The WAI-ARIA Specifications
Pro: Jab complex UI components (Jaise Custom Tabs, Modal Popups, Sliders) banaye jate hain, toh HTML tags fail ho jate hain. Wahan hum Accessible Rich Internet Applications (ARIA) attributes inject karte hain jo sirf Screen Readers process karte hain:
aria-hidden="true": UI element present hai par screen reader use skip kardega (e.g., purely decorative icon).aria-label="Close Box": Ek icon button jisme koi text nahi hai, screen reader is hidden text ko call out karega.aria-live="polite": Agar JS notification popup generate karti hai, toh reader beech screen context mein is live update ko announce karega.
4. Color Contrast and Forms
Pro: Text aur background ke beech luminance (brightness ratio) ka mathematical formula WCAG pass karna chahiye (usually 4.5:1 ratio for standard text). Color blind users ke liye UI design pass hona chahiye. Har Input Form field ke sath attached explicit <label for=""> zaroori hai tabhi field focus aane par form field ka maksad voice aayega.