CSS एक्सेसिबिलिटी
आप पहले से लेआउट, मोशन और आधुनिक टूलकिट ट्रिक शिप कर चुके हैं। CSS में एक्सेसिबिलिटी वही परत है जिसे लोग महसूस करते हैं: कीबोर्ड फोकस कहाँ है, दिखता है? टेक्स्ट पढ़ा जा सकता है? घूमती एनिमेशन किसी को बीमार तो नहीं करती? यह सत्र HTML का भंडार नहीं है (landmarks, alt, ARIA)। यहाँ वे स्टाइल आदतें हैं जो फोकस, कंट्रास्ट और मोशन को इस्तेमालयोग्य रखती हैं।
फोकस दिखता रहना चाहिए
कीबोर्ड उपयोगकर्ता Tab से लिंक और कंट्रोल पर जाते हैं। फोकस रिंग गायब हो जाए तो वे खो जाते हैं। :focus-visible को प्राथमिकता दें ताकि माउस क्लिक शांत रहें और कीबोर्ड फोकस साफ़ दिखे:
:root {
--focus-ring: #2563eb;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 3px;
}
.text-link:focus:not(:focus-visible) {
outline: none;
}
:focus-visible उन स्थितियों को पकड़ता है जहाँ रिंग सच में मदद करती है (आमतौर पर कीबोर्ड)। ऊँचे कंट्रास्ट की रिंग लगाएँ और थोड़ा outline-offset दें ताकि रिंग बॉर्डर से टकराए नहीं।
बिना विकल्प के outline: none नहीं
डिफ़ॉल्ट outline हटाना तभी ठीक है जब आप साफ़ कस्टम फोकस स्टाइल दें। नंगा *:focus { outline: none; } क्लासिक जाल है:
/* Bad: keyboard users lose the only cue */
.bad-button:focus {
outline: none;
}
/* Good: custom ring that still shows focus */
.good-button:focus-visible {
outline: none;
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #0f766e;
}
अगर ब्राउज़र outline बंद करते हैं, तो कुछ और फोकस वाले कंट्रोल को दिखाना चाहिए — box-shadow, बॉर्डर रंग, या ऐसा बैकग्राउंड जो हर थीम पर साफ़ रहे।
कंट्रास्ट एक CSS निर्णय है
ब्रांड रंग डिज़ाइन बोर्ड पर तेज़ लगते हैं और धूप में फोन पर धुँधले। foreground / background जोड़े को सिर्फ़ सजावट नहीं, एक्सेसिबिलिटी निर्णय मानें:
:root {
--surface: #0f172a;
--text: #f8fafc;
--muted: #cbd5e1;
--accent: #38bdf8;
--accent-text: #0c4a6e;
}
.hero {
background: var(--surface);
color: var(--text);
}
.hero .lede {
color: var(--muted);
}
.hero .cta {
background: var(--accent);
color: var(--accent-text);
font-weight: 700;
}
बॉडी टेक्स्ट और बटन पर मज़बूत कंट्रास्ट रखें। सजावटी ग्रे ग़ैर-ज़रूरी लेबल पर नरम रह सकते हैं, लेकिन मुख्य कॉपी और कंट्रोल पढ़ने योग्य रहने चाहिए। पैलेट शिप करने से पहले कंट्रास्ट चेकर से जोड़े जाँचें।
कम मोशन का सम्मान करें
एनिमेशन और बड़े transform असुविधा पैदा कर सकते हैं। ग़ैर-ज़रूरी मोशन को prefers-reduced-motion में लपेटें:
.banner {
transition: transform 0.4s ease, opacity 0.4s ease;
}
.banner.is-shown {
transform: translateY(0);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.banner,
.banner.is-shown {
transition: none;
transform: none;
}
.spinner {
animation: none;
}
}
जो लोग OS से कम मोशन माँगते हैं, उन्हें अंतिम UI स्थिति मिलनी चाहिए — बस यात्रा के बिना। ज़रूरी opacity या लेआउट बदलाव रखें; अंतहीन स्पिन और बड़े स्लाइड हटा दें।
हाई कंट्रास्ट और forced-colors
कुछ वातावरण आपकी पैलेट ओवरराइड करते हैं (Windows High Contrast / forced-colors)। नाज़ुक सजावट नरम करें और असली बॉर्डर रखें:
.card {
border: 1px solid #e2e8f0;
background: #fff;
box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}
@media (forced-colors: active) {
.card {
border: 1px solid CanvasText;
background: Canvas;
box-shadow: none;
color: CanvasText;
}
.card a {
color: LinkText;
}
}
सिस्टम रंग कीवर्ड जैसे Canvas, CanvasText और LinkText मदद करते हैं कि कंट्रोल दिखते रहें जब रंग उपयोगकर्ता तय करता है — आपका ब्रांड गाइड नहीं।
CSS-साइड चेकलिस्ट
📊 CSS accessibility habits
| Practice | CSS habit | Avoid |
|---|---|---|
| Keep focus findable | :focus-visible + strong ring / shadow |
outline: none with no replacement |
| Readable type | High-contrast text/background tokens | Light grey on white for body copy |
| Kind motion | @media (prefers-reduced-motion: reduce) |
Endless spins for everyone |
| Survive high contrast | Real borders; forced-colors tweaks |
Shadow-only “edges” |
| Reachable controls | Comfortable padding / hit area | Tiny icon-only targets with no focus style |
HTML अभी भी landmarks, लेबल और alt का मालिक है। CSS तय करता है कि स्टाइल के बाद वे कंट्रोल समझने योग्य रहें।
स्किप लिंक और focus-within
स्किप लिंक दोहराए गए क्रोम को पार करता है। उसे ऐसे स्टाइल करें कि फोकस पर दिखे। :focus-within किसी बच्चे के फोकस पर पूरे समूह को भी उजागर कर सकता है:
.skip-link {
position: absolute;
left: 1rem;
top: -3rem;
padding: 0.5rem 0.75rem;
background: #111827;
color: #fff;
border-radius: 0.375rem;
z-index: 20;
}
.skip-link:focus-visible {
top: 1rem;
outline: 3px solid #fbbf24;
outline-offset: 2px;
}
.nav:focus-within {
box-shadow: inset 0 0 0 2px #2563eb;
}
स्किप लिंक फोकस तक स्क्रीन से बाहर रहता है, फिर साफ़ हो जाता है। nav रिंग तब मदद करती है जब Tab बार के अंदर किसी चाइल्ड लिंक पर बैठे।
खुद आज़माएँ
- लिंक और बटन पर
:focus-visibleरिंग लगाएँ; Tab से घूमें और पुष्टि करें कि फोकस हमेशा दिखता है। - एक कम-कंट्रास्ट जोड़ा चुनें और गहरे टेक्स्ट या गहरी सतह से ठीक करें।
- किसी transition या animation को
prefers-reduced-motion: reduceमें लपेटें और OS सेटिंग (या DevTools emulation) टॉगल करें। - forced-colors emulation में देखें कि कार्ड्स पर असली बॉर्डर है।
- ऐसा स्किप लिंक स्टाइल करें जो केवल कीबोर्ड फोकस पर दिखे।
आम गलतियाँ
- ग्लोबल
outline: none(याoutline: 0) बिना कस्टम फोकस स्टाइल - सुंदर ब्रांड रंग जो बॉडी टेक्स्ट और प्राथमिक बटन पर कंट्रास्ट फेल करते हैं
- सबके लिए बड़ी एनिमेशन बिना
prefers-reduced-motionगेट - फोकसयोग्य कंट्रोल को सिर्फ़
opacity: 0से छिपाना जबकि वह अभी Tab लेता है - इस CSS पाठ को सिमेंटिक HTML और ARIA का पूरा विकल्प समझना
सार
- कीबोर्ड फोकस दिखता रखें —
:focus-visibleप्राथमिकता दें और मज़बूत संकेत के बिना outline मिटाएँ नहीं - रंग कंट्रास्ट को टेक्स्ट और कंट्रोल के लिए ज़रूरत मानें
prefers-reduced-motionका सम्मान करें औरforced-colorsके लिए स्टाइल मज़बूत करें- स्किप लिंक स्टाइल करें और जहाँ समूह को साझा संकेत चाहिए वहाँ
:focus-withinइस्तेमाल करें - अगला: CSS सार और अगले कदम (
summary) — मिनी प्रोजेक्ट से पहले कोर्स समेटना
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी