CSS Academy · पाठ

सुलभता परीक्षण: color-contrast और focus

रंग कंट्रास्ट अनुपात जाँचें और सुनिश्चित करें कि फ़ोकस संकेतक WCAG सुलभता मानकों पर खरे उतरते हैं।

पाठ 4, कुल 4 में से13 चरण

सुलभता परीक्षण: color-contrast और focus, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

CSS पहुँच-योग्यता को क्यों प्रभावित करता है

CSS रंग कंट्रास्ट, फ़ोकस संकेतक की दृश्यता, तत्व की दृश्यता (display:none उसे पहुँच-योग्यता ट्री से हटा देता है) और पढ़ने के क्रम को नियंत्रित करता है (flexbox order के माध्यम से दृश्य पुनर्क्रमण बनाम DOM क्रम)। CSS के विकल्प सीधे प्रभावित करते हैं कि दिव्यांग उपयोगकर्ता इंटरफ़ेस का उपयोग कर सकते हैं या नहीं।

WCAG रंग कंट्रास्ट आवश्यकताएँ

WCAG 2.1 AA में सामान्य पाठ के लिए 4.5:1 और बड़े पाठ के लिए 3:1 कंट्रास्ट अनुपात आवश्यक है (18px+ बोल्ड या 24px+ सामान्य)। AAA में क्रमशः 7:1 और 4.5:1 आवश्यक है। ये अनुपात अग्रभूमि के पाठ के रंग की ल्यूमिनेंस की तुलना पृष्ठभूमि के रंग की ल्यूमिनेंस से करते हैं।

DevTools में कंट्रास्ट की जाँच

DevTools में किसी भी पाठ तत्व पर क्लिक करें → स्टाइल पैनल। रंग स्वैच कंट्रास्ट अनुपात बैज दिखाता है। चेकमार्क सफल परीक्षण दर्शाता है; X विफलता दर्शाता है। रंग चयनकर्ता रंग ग्रेडिएंट पर AA/AAA की सीमा रेखाएँ दिखाता है।

स्वचालित कंट्रास्ट परीक्षण

axe-core, Lighthouse और Pa11y सभी पाठ तत्वों में कंट्रास्ट अनुपात का स्वचालित ऑडिट करते हैं। विकास के दौरान ब्राउज़र कंसोल में वास्तविक समय की कंट्रास्ट चेतावनियाँ पाने के लिए विकास परिवेश में @axe-core/react के साथ axe-core चलाएँ।

फ़ोकस संकेतक

फ़ोकस पर CSS outline: none या outline: 0 ब्राउज़र के डिफ़ॉल्ट फ़ोकस रिंग को हटा देता है, जिससे कीबोर्ड नेविगेशन अदृश्य हो जाता है। यह पहुँच-योग्यता की गंभीर विफलता है। फ़ोकस संकेतकों को पूरी तरह हटाने के बजाय उनकी जगह कस्टम, दृश्यमान फ़ोकस शैली दें।

<button autofocus>Keyboard-focused button</button>

:focus-visible बनाम :focus

:focus सभी फ़ोकस घटनाओं पर लागू होता है, जिनमें माउस क्लिक भी शामिल हैं (इससे क्लिक करने पर दृश्यमान रिंग दिखाई देती है, जो डिज़ाइनरों को पसंद नहीं आती)। :focus-visible केवल तब लागू होता है जब ब्राउज़र यह निर्धारित करता है कि कीबोर्ड नेविगेशन उपयोग में है—इससे कीबोर्ड उपयोगकर्ताओं को फ़ोकस रिंग मिलती है, लेकिन माउस क्लिक पर यह दिखाई नहीं देती।

WCAG फ़ोकस संकेतक आवश्यकताएँ

WCAG 2.2 में सफलता मानदंड 2.4.11 (फ़ोकस रूप AA) शामिल किया गया है: फ़ोकस संकेतकों का आस-पास के रंगों के मुकाबले कम-से-कम 3:1 कंट्रास्ट होना चाहिए और उन्हें घटक की पूरी परिधि को घेरना चाहिए। कस्टम फ़ोकस शैलियों का केवल मौजूद होना पर्याप्त नहीं है; उन्हें इन आवश्यकताओं को पूरा करना चाहिए।

बाध्य रंग मोड

Windows का उच्च कंट्रास्ट मोड CSS रंगों को उपयोगकर्ता द्वारा निर्धारित सिस्टम रंगों से बदल देता है। उच्च कंट्रास्ट मोड में काम करने वाली वैकल्पिक शैलियाँ देने के लिए @media (forced-colors: active) का उपयोग करें। Windows सेटिंग्स → पहुँच-योग्यता → उच्च कंट्रास्ट के साथ परीक्षण करें।

एकमात्र संकेतक के रूप में रंग

WCAG 1.4.1 सूचना देने के एकमात्र तरीके के रूप में रंग के उपयोग पर रोक लगाता है। केवल लाल रंग में बदलने वाली त्रुटि अवस्था इस मानदंड में विफल होती है। रंग के साथ आइकन, पाठ लेबल, पैटर्न या अंडरलाइन का उपयोग करें, ताकि रंग पर निर्भर न रहने वाली सूचना हमेशा मौजूद हो।

पाठ का आकार बदलना और अंतराल

WCAG 1.4.4 में सामग्री खोए बिना पाठ का आकार 200% तक बढ़ाने की आवश्यकता है। WCAG 1.4.12 में यह आवश्यक है कि पाठ-अंतराल के ओवरराइड (बढ़ा हुआ अक्षर-अंतराल, पंक्ति-ऊँचाई) लेआउट को न बिगाड़ें। दोनों आवश्यकताओं का समर्थन करने के लिए टाइपोग्राफी में सापेक्ष इकाइयों (rem, em) का उपयोग करें।

परीक्षण उपकरणों का समूह

व्यापक पहुँच-योग्यता CSS परीक्षण में विकास के लिए axe DevTools ब्राउज़र एक्सटेंशन, स्वचालित कार्यप्रवाह जाँचों के लिए Lighthouse CI, कमांड-लाइन पृष्ठ ऑडिट के लिए Pa11y और फ़ोकस संकेतक की दृश्यता व क्रम की पुष्टि के लिए Tab/Shift+Tab के साथ मैन्युअल कीबोर्ड नेविगेशन परीक्षण शामिल हैं।

ज्ञान-जाँच

किसी तत्व की :focus अवस्था के लिए outline: none को अंतिम CSS क्यों नहीं होना चाहिए?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

CSS पहुँच-योग्यता परीक्षण में रंग कंट्रास्ट अनुपात (न्यूनतम 4.5:1 AA), :focus-visible का उपयोग करने वाले दृश्यमान और WCAG 2.2-अनुरूप फ़ोकस संकेतक, सूचना के एकमात्र माध्यम के रूप में रंग से बचाव, forced-colors मोड का समर्थन और आकार बदलने के अनुपालन के लिए सापेक्ष टाइपोग्राफी इकाइयाँ शामिल हैं। स्वचालित उपकरण और मैन्युअल कीबोर्ड परीक्षण मिलकर व्यापक कवरेज सुनिश्चित करते हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “सुलभता परीक्षण: color-contrast और focus” पाठ निःशुल्क है?

हाँ—“सुलभता परीक्षण: color-contrast और focus” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“सुलभता परीक्षण: color-contrast और focus” में मैं क्या सीखूँगा?

रंग कंट्रास्ट अनुपात जाँचें और सुनिश्चित करें कि फ़ोकस संकेतक WCAG सुलभता मानकों पर खरे उतरते हैं। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“सुलभता परीक्षण: color-contrast और focus” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ