प्रॉम्प्ट और संदर्भ
एक डिज़ाइन सिस्टम को बटनों, इनपुट्स, मेनूज़ और कस्टम कंट्रोल्स के लिए एक समान कीबोर्ड-फोकस ट्रीटमेंट की आवश्यकता है। वर्तमान कार्यान्वयन केवल बॉर्डर का रंग बदलता है, कम-कंट्रास्ट वाले थीम पर गायब हो जाता है, और फोकस आने पर कंपोनेंट का आकार बदल देता है। एक पुन: प्रयोज्य (reusable) दृष्टिकोण और एक टेस्ट गेट डिज़ाइन करें।
WCAG 2.2 इंडिकेटर एरिया और आस-पास के रंगों के साथ कंट्रास्ट के बारे में एक सफलता मानदंड (success criterion) के रूप में Focus Appearance जोड़ता है। यह इंटरव्यू यह परखता है कि क्या कोई उम्मीदवार केवल एक आउटलाइन जोड़ने के बजाय उस आवश्यकता को कंपोनेंट स्टेट्स, CSS टोकन्स, कीबोर्ड पाथ्स और मापने योग्य जांचों में बदल सकता है।
इंटरव्यूअर क्या मूल्यांकन कर रहा है
इंडिकेटर और कंपोनेंट के बीच अंतर, एरिया और कंट्रास्ट की गणना, एक ऐसा ट्रीटमेंट जो केवल-रंग (color-only) पर निर्भर न हो, गैर-आयताकार और गोल कंट्रोल्स, कोई लेआउट शिफ्ट न होना, मूल (native) सिमेंटिक्स, और :focus-visible, पॉइंटर इनपुट व forced-colors मोड का कवरेज देखें।
स्पष्टीकरण के लिए प्रश्न
- क्या लक्ष्य WCAG 2.2 AA है या AAA, और कौन से पाथ कीबोर्ड द्वारा संचालित होते हैं?
- क्या रिंग कंपोनेंट के बाहर है, अंदर है, या ऑफसेट है?
- कौन से थीम टोकन्स और forced-colors नियम मौजूद हैं?
- क्या कस्टम कंट्रोल्स नेटिव एलिमेंट्स का उपयोग करते हैं या सही रोल्स और स्टेट्स का?
- फोकस, होवर, सिलेक्टेड और इनवैलिड स्टेट्स एक साथ कैसे काम करते हैं?
- गोल कंट्रोल्स, स्क्रॉलिंग और इमेज बैकग्राउंड्स का परीक्षण कैसे किया जाएगा?
30-सेकंड का उत्तर
"मैं संचालित होने योग्य एलिमेंट्स की सूची बनाऊंगा, जहाँ संभव हो नेटिव कंट्रोल्स का उपयोग करूँगा, और एक ऐसा :focus-visible इंडिकेटर प्रदान करूँगा जो केवल रंग पर आधारित न हो। एक आउटलाइन या स्यूडो-एलिमेंट का उपयोग करें जो लेआउट को न बदले, जिसमें रिंग ज्योमेट्री और कंपोनेंट व आस-पास के बैकग्राउंड दोनों के मुकाबले कंट्रास्ट के लिए टोकन हों। forced-colors मोड में सिस्टम कलर्स को बनाए रखें। पूरे कीबोर्ड पाथ्स, रेंडर किए गए पिक्सेल, ज़ूम और मैन्युअल सहायक जांचों के साथ सत्यापित करें।"
चरण-दर-चरण समाधान
चरण 1: फोकस टार्गेट्स और स्टेट्स को परिभाषित करें
नेटिव बटन्स, इनपुट्स, सेलेक्ट्स और लिंक्स को प्राथमिकता दें। एक कस्टम div को कीबोर्ड हैंडलिंग, रोल, नाम, वैल्यू और स्टेट सिंक्रोनाइज़ेशन की आवश्यकता होती है। focus-visible पॉइंटर और कीबोर्ड फोकस के बीच अंतर करने में मदद करता है लेकिन कीबोर्ड फीडबैक को हटा नहीं सकता।
डिफ़ॉल्ट, होवर, focus-visible, सिलेक्टेड, इनवैलिड और डिसेबल्ड स्टेट्स के लिए प्राथमिकता परिभाषित करें ताकि एरर या सिलेक्शन स्टाइल लागू होने पर भी रिंग पहचानी जा सके।
चरण 2: लेआउट बदले बिना ड्रा करें
फोकस पर बॉर्डर की चौड़ाई न बढ़ाएं; यह बॉक्स को बदल देता है और आस-पास के तत्वों को धक्का देता है। outline, outline-offset, या एक स्यूडो-एलिमेंट को प्राथमिकता दें। जटिल आकृतियों के लिए, आंतरिक और बाहरी शैडोज़ को मिलाएं लेकिन सत्यापित करें कि वे क्लिप न हों।
.control:focus-visible {
outline: 3px solid var(--focus-ring);
outline-offset: 2px;
}पैरेंट द्वारा क्लिप की गई आयताकार रेखा के बजाय गोल बटन्स, आइकन बटन्स और स्लाइडर्स के रेंडर किए गए परिमाप (perimeter) का मूल्यांकन करें।
चरण 3: WCAG 2.4.13 को टोकन्स और थ्रेशोल्ड्स में बदलें
रिंग की चौड़ाई, ऑफसेट, फोकस रंग, बैकग्राउंड और एरर-स्टेट टोकन्स को केंद्रीकृत करें। केवल टेक्स्ट ही नहीं, बल्कि अनफोकस्ड कंपोनेंट और आस-पास के बैकग्राउंड के मुकाबले कंट्रास्ट का परीक्षण करें। ग्रेडिएंट्स, इमेजेस या पारदर्शी लेयर्स मौजूद होने पर सबसे खराब स्थानीय रंग का नमूना लें।
focus-ring-width >= 2 CSS px
focus-ring-contrast-against-adjacent >= required threshold
focus-ring-area >= minimum perimeter-area ruleएरिया और कंट्रास्ट गेट के लिए रेंडर की गई ज्योमेट्री और पिक्सेल्स का उपयोग करें; डिज़ाइन-फ़ाइल के रंग रनटाइम अनुपालन का प्रमाण नहीं हैं।
चरण 4: थीम्स, फोर्स्ड कलर्स और सिस्टम ओवरराइड्स का समर्थन करें
लाइट, डार्क और ब्रांड थीम्स को अलग-अलग फोकस टोकन दें। forced-colors: active के तहत, प्लेटफ़ॉर्म इंडिकेटर को न छुपाएं; ButtonText जैसे सिस्टम कलर्स दृश्यता बनाए रख सकते हैं।
@media (forced-colors: active) {
.control:focus-visible {
outline: 2px solid ButtonText;
outline-offset: 2px;
}
}कभी भी outline: none का उपयोग न करें जब तक कि वही स्टेट समान रूप से स्पष्ट दृश्यमान इंडिकेटर प्रदान न करे।
चरण 5: डायनामिक कंट्रोल्स और स्क्रॉलिंग को कवर करें
मेनूज़, डायलॉग्स, कॉम्बोबॉक्सेस और वर्चुअल लिस्ट्स का परीक्षण फोकस मूवमेंट, बंद होने पर फोकस की वापसी और स्क्रॉल करते समय रिंग्स के दृश्यमान रहने के लिए किया जाना चाहिए। ट्रांसफ़ॉर्म्स, क्लिप पाथ्स और ओवरफ़्लो को इंडिकेटर को मिटाना नहीं चाहिए।
aria-activedescendant के साथ, विज़ुअल इंडिकेटर सक्रिय आइटम का अनुसरण करता है भले ही DOM फोकस कंटेनर पर रहे, और कीबोर्ड तथा स्क्रीन-रीडर व्यूज़ एक समान होने चाहिए।
चरण 6: ऑटोमेटेड और मैन्युअल स्वीकृति तैयार करें
फोकस करने योग्य एलिमेंट्स, कंप्यूटेड आउटलाइन या शैडो, थीम टोकन्स, forced-colors नियमों, और स्टेट्स व बैकग्राउंड्स के स्क्रीनशॉट्स के लिए स्वचालित जांचें बनाएं। मैन्युअल रूप से Tab, Shift+Tab, Enter, Space, ऐरो कीज़ और Escape का उपयोग करें; विभिन्न इनपुट डिवाइसेस के साथ 200% ज़ूम और हाई-कंट्रास्ट सेटिंग्स का परीक्षण करें।
कंपोनेंट, स्टेट, बैकग्राउंड, रिंग ज्योमेट्री, कंट्रास्ट परिणाम, कीबोर्ड स्टेप्स और स्क्रीनशॉट्स रिकॉर्ड करें। डिज़ाइन फ़ाइल में दिखाई देने वाली नीली रेखा अनुपालन का प्रमाण नहीं है।
मॉडल उत्तर
"मैं संचालित होने वाले कंट्रोल्स की सूची बनाता हूँ और नेटिव सिमेंटिक्स को प्राथमिकता देता हूँ। :focus-visible लेआउट-न्यूट्रल आउटलाइन और ऑफसेट का उपयोग करता है, जबकि टोकन्स रिंग की चौड़ाई और कंट्रास्ट को सुसंगत रखते हैं। फोकस को बॉर्डर की चौड़ाई नहीं बढ़ानी चाहिए या केवल रंग पर निर्भर नहीं होना चाहिए। मैं लाइट, डार्क और forced-colors मोड्स का परीक्षण करता हूँ और सिस्टम दृश्यता को बनाए रखता हूँ।"
"मेनूज़, डायलॉग्स, वर्चुअल लिस्ट्स और गैर-आयताकार कंट्रोल्स के लिए मैं फोकस मूवमेंट, रिटर्न फोकस, क्लिपिंग और सक्रिय-आइटम संकेत को सत्यापित करता हूँ। ऑटोमेशन कंप्यूटेड स्टाइल्स और पिक्सेल्स को कैप्चर करता है; मैन्युअल जांचें कीबोर्ड पाथ्स, 200% ज़ूम और हाई कंट्रास्ट को कवर करती हैं।"
सामान्य गलतियाँ
- केवल टेक्स्ट या बॉर्डर का रंग बदलना → रिंग बैकग्राउंड में घुल-मिल जाती है → रिंग और आस-पास के रंगों का अलग-अलग परीक्षण करें।
- बॉर्डर की चौड़ाई बढ़ाना → लेआउट शिफ्ट होता है → आउटलाइन या लेआउट-न्यूट्रल एलिमेंट का उपयोग करें।
outline: noneको बाध्य करना → कीबोर्ड उपयोगकर्ताओं का फीडबैक खो जाता है → एक समान दृश्यमान इंडिकेटर प्रदान करें।- केवल लाइट थीम का परीक्षण करना → डार्क या फोर्स्ड कलर्स गायब हो जाते हैं → प्रत्येक थीम मोड को कवर करें।
- केवल आयताकार स्क्रीनशॉट्स का उपयोग करना → गोल और क्लिप की गई ज्योमेट्री छूट जाती है → रेंडर किए गए आकारों और स्क्रॉलिंग का परीक्षण करें।
- div पर फोकस डालना → सिमेंटिक्स और सहायक आउटपुट अलग हो जाते हैं → नेटिव कंट्रोल्स और मान्य ARIA को प्राथमिकता दें।
फ़ॉलो-अप और उत्तर
फ़ॉलो-अप 1: क्या box-shadow की तुलना में outline बेहतर है?
कोई सार्वभौमिक विजेता नहीं है। Outline लेआउट-न्यूट्रल है और इसमें प्लेटफ़ॉर्म सिमेंटिक्स होते हैं; शैडोज़ लेयर्ड रिंग्स बना सकते हैं। क्लिपिंग, गोल ज्योमेट्री, forced-colors व्यवहार और रेंडर किए गए पिक्सेल परिणामों के आधार पर चयन करें।
फ़ॉलो-अप 2: :focus-visible, :focus की जगह क्यों नहीं ले सकता?
यह ब्राउज़र का एक ह्यूरिस्टिक है कि फोकस कब दिखाना है। इसे फोकस सिमेंटिक्स को नहीं हटाना चाहिए या कीबोर्ड और सहायक-तकनीक पाथ्स को बिना फीडबैक के नहीं छोड़ना चाहिए।
फ़ॉलो-अप 3: क्या एरर का लाल बॉर्डर फोकस रिंग की जगह ले लेता है?
नहीं। एरर किसी समस्या को दर्शाता है; रिंग वर्तमान टार्गेट को दर्शाती है। केवल रंग पर निर्भर किए बिना दोनों का दृश्यमान रहना आवश्यक है।
फ़ॉलो-अप 4: आप इमेज या ग्रेडिएंट बैकग्राउंड का परीक्षण कैसे करते हैं?
रेंडर की गई रिंग के आस-पास के सबसे खराब स्थानीय रंग का नमूना लें, और ज़रूरत पड़ने पर एक अपारदर्शी अंडरले या दूसरी रिंग जोड़ें। एक औसत डिज़ाइन रंग कोई प्रमाण नहीं है।
फ़ॉलो-अप 5: आप ओवरफ़्लो को रिंग को क्लिप करने से कैसे रोकते हैं?
एन्सेस्टर ओवरफ़्लो, क्लिप पाथ्स और ट्रांसफ़ॉर्म्स का निरीक्षण करें; फोकस स्टाइलिंग को अक्षम करने के बजाय ज्योमेट्री को फिट करने के लिए इनर रिंग्स, पैडिंग या कंपोनेंट-लेवल स्यूडो-एलिमेंट का उपयोग करें।