Accessibility Basics
Web accessibility ka matlab hai website use karne layak banana un logo ke liye bhi jo differently interact karte hain web se — blind/low-vision users (screen readers), motor disabilities wale users (keyboard-only navigation), deaf/hard-of-hearing users (captions), aur bahut kuch.
Semantic HTML (jo humne pehle dekha) accessibility ka FOUNDATION hai — proper headings, landmarks (header/nav/main), aur meaningful alt text automatically screen readers ko bahut kuch samjha dete hain, bina extra kaam ke.
<!-- Accessible: -->
<button onclick="submitForm()">Submit</button>
<img src="chart.png" alt="Sales grew 40% in Q2">
<!-- Non-accessible (looks same visually, screen reader confused): -->
<div onclick="submitForm()">Submit</div> <!-- keyboard navigate nahi ho sakta -->
<img src="chart.png"> <!-- alt missing, screen reader ko pata nahi kya hai -->- Accessibility = sabke liye web usable banana (visual, motor, hearing differences)
- Semantic HTML accessibility ka foundation hai
- Keyboard-only navigation ek quick accessibility test hai
tabindex="0" ek non-interactive element (jaise div) ko keyboard-focusable banata hai, natural tab order mein. tabindex="-1" element ko focusable banata hai (JavaScript se), lekin Tab key se skip ho jaata hai. Positive numbers (tabindex="1") AVOID karo — custom order confusing aur maintain karna mushkil hota hai.
<div tabindex="0" role="button">Custom clickable div</div>
<!-- ab Tab key se reach ho sakta hai -->
<div tabindex="-1" id="errorMessage">Error text</div>
<!-- JS se focus() kiya ja sakta hai, lekin Tab se skip hota hai -->
<!-- AVOID: -->
<!-- <input tabindex="5"> <input tabindex="2"> — confusing custom order -->Keyboard/screen-reader users ke liye, har page load par pehle navigation menu ke saare links traverse karna painful hai. "Skip to main content" link (page ke bilkul shuru mein, visually hidden until focused) unhe directly main content tak jump karne deta hai.
<body>
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>...</header>
<nav>...</nav>
<main id="main-content">
<!-- actual page content -->
</main>
</body>
<style>
.skip-link { position: absolute; top: -40px; }
.skip-link:focus { top: 0; } /* sirf tab dikhta hai jab keyboard focus mile */
</style>