CSS Accessibility

Keyboard Navigation और Focus States

Keyboard-only और visually impaired users webpages में chronologically navigate करने के लिए Tab key पर निर्भर करते हैं। आपको सुनिश्चित करना चाहिए कि हर interactive element का एक visible focus indicator (जैसे एक border outline) हो ताकि users देख सकें कि वे page पर कहाँ हैं।

उदाहरण: Keyboard Navigation and Focus States

<style>
a:focus-visible {
  outline: 3px solid orange;
}
</style>
<a href="#">Tab to me to see a visible focus outline</a>

Color Contrast और Text Legibility

Web Content Accessibility Guidelines (WCAG) माँग करती हैं कि आपके text colors background fill के against पर्याप्त contrast रखें। यह सुनिश्चित करता है कि visual impairments वाले users या bright sunlight में screens पढ़ने वाले लोग आपका content पढ़ सकें।

उदाहरण: Color Contrast and Text Legibility

<style>
.good { color: #111; background: #fff; }
.poor { color: #ccc; background: #fff; }
</style>
<p class="good">4.5:1 contrast, easy to read</p>
<p class="poor">Poor contrast, hard to read</p>

Screen Reader Only (.sr-only) Hack

कभी-कभी आपको specifically screen-reader users के लिए extra instructions या labels देने की ज़रूरत होती है बिना उन्हें screen पर visually दिखाए। .sr-only class text को visually hide करती है जबकि उसे screen readers के लिए पूरी तरह accessible रखती है।

उदाहरण: The Screen Reader Only (.sr-only) Hack

<style>
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
}
</style>
<button>🔍<span class="sr-only">Search</span></button>

prefers-reduced-motion से Motion Settings का सम्मान करना

कुछ users motion sickness या vestibular disorders से पीड़ित होते हैं जो तेज़, bouncing, या spinning web animations से trigger हो सकते हैं। prefers-reduced-motion media query आपको उनकी system settings के आधार पर automatically अपनी animations disable या धीमी करने देती है।

उदाहरण: Respecting Motion Settings with prefers-reduced-motion

<style>
.spin { width: 200px; padding: 20px; background: #cfe8ff; border: 2px solid #1e6fd9; animation: pulse 1s infinite alternate; transition: all 0.3s; }
@keyframes pulse { to { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}
</style>
<div class="spin">Motion off if you prefer reduced motion</div>

ARIA States को Style करना

interactive components (जैसे custom dropdown tabs या modals) बनाते समय, आपको screen readers को उनकी active states describe करने के लिए standard ARIA attributes (जैसे aria-expanded="true") इस्तेमाल करने ही चाहिए।

आप अपनी active states के आधार पर custom styles लागू करने के लिए इन attributes को सीधे अपनी stylesheets के अंदर भी target कर सकते हैं।

उदाहरण: Styling ARIA States

<style>
[aria-expanded="true"] {
  background: #eee;
}
</style>
<button aria-expanded="true">Open</button>