एक्सेसिबल फोकस स्टेट्स: विजिबल कीबोर्ड फोकस डिजाइन करना
WCAG 2.2 से मेल खाने वाले दृश्यमान कीबोर्ड फ़ोकस को कैसे डिज़ाइन करें: 2.4.7 और 2.4.13 को क्या चाहिए, फ़ोकस-विज़िबल कैसे काम करता है, और फ़ोकस रिंग के लिए डिज़ाइन युक्तियाँ।
कोर टेकअवे
प्रत्येक इंटरैक्टिव तत्व को कीबोर्ड उपयोगकर्ताओं के लिए स्पष्ट रूप से दिखाई देने वाले फोकस संकेतक की आवश्यकता होती है; WCAG 2.2 को AA (2.4.7) स्तर पर इसकी आवश्यकता है। एक मजबूत संकेतक के लिए, WCAG के AAA मार्गदर्शन (2.4.13) का लक्ष्य रखें: तत्व के चारों ओर कम से कम 2 CSS पिक्सेल रूपरेखा का क्षेत्र, फोकस्ड और अनफोकस्ड अवस्थाओं के बीच 3:1 कंट्रास्ट के साथ। कीबोर्ड उपयोगकर्ताओं को हर माउस क्लिक पर रिंग दिखाए बिना दिखाने के लिए :focus-visible का उपयोग करें।
फोकस स्टेट्स क्यों मायने रखते हैं
जो लोग कीबोर्ड, स्विच डिवाइस या स्क्रीन मैग्निफायर का उपयोग करते हैं, वे एक समय में एक पृष्ठ पर एक तत्व से गुजरते हैं। फोकस संकेतक ही एकमात्र तरीका है जिससे उन्हें पता चलता है कि वे कहां हैं। प्रतिस्थापन के बिना ब्राउज़र रूपरेखा को हटाना सबसे आम एक्सेसिबिलिटी विफलताओं में से एक है।
WCAG 2.2 के लिए क्या आवश्यक है?
सफलता मानदंड 2.4.7 फोकस विज़िबल (स्तर एए) के लिए आवश्यक है कि किसी भी कीबोर्ड-ऑपरेबल इंटरफ़ेस में एक मोड हो जहां फोकस संकेतक दिखाई दे। WCAG 2.2 में 2.4.13 फोकस अपीयरेंस (स्तर AAA) जोड़ा गया है, जो एक मजबूत संकेतक का वर्णन करता है: कम से कम घटक के 2 CSS पिक्सेल मोटी परिधि के क्षेत्र जितना बड़ा, फोकस्ड और अनफोकस्ड अवस्थाओं के बीच कम से कम 3:1 के कंट्रास्ट अनुपात के साथ।
:फोकस-दृश्यमान
MDN बताता है कि :focus-visible तब लागू होता है जब किसी तत्व पर फोकस होता है और ब्राउज़र अनुमान का उपयोग करके निर्णय लेता है कि फोकस दिखाया जाना चाहिए, आमतौर पर कीबोर्ड उपयोग के लिए। यह आपको कीबोर्ड उपयोगकर्ताओं के लिए हर बार माउस से बटन क्लिक करने पर मजबूत फोकस रिंग दिखाने की सुविधा देता है, बिना उन्हें दिखाए। आउटलाइन हटाने के बजाय इसका उपयोग करें.
अंगूठी डिजाइन करना
व्यावहारिक मार्गदर्शन:
- ऑफसेट के साथ एक आउटलाइन या रिंग का उपयोग करें ताकि यह तत्व में मिश्रित न हो।
- प्रत्येक पृष्ठभूमि पर कंट्रास्ट की जांच करें जिस पर तत्व दिखाई दे सकता है; दो रंग की अंगूठी मदद करती है।
- इसे आपके डिज़ाइन सिस्टम में एक टोकन के रूप में परिभाषित सभी घटकों में सुसंगत रखें।
- कभी भी केवल सूक्ष्म रंग परिवर्तन पर निर्भर न रहें।
- सुनिश्चित करें कि केंद्रित तत्व चिपचिपे हेडर के पीछे छिपा नहीं है।
फोकस और गति
फ़ोकस रिंग बहुत कम संक्रमण के साथ दिखाई दे सकती है, लेकिन इसे तुरंत महसूस होना चाहिए। ऐसे एनिमेशन से बचें जो रिंग में देरी करते हैं या तत्व को स्थानांतरित करते हैं, और कस्टम कैनवास-तैयार घटकों के लिए, सुनिश्चित करें कि पृष्ठ में अभी भी एक वास्तविक फोकस करने योग्य तत्व है ताकि कीबोर्ड उपयोगकर्ता उस तक पहुंच सकें।
याद रखने योग्य कुंजी Principle
- WCAG AA (2.4.7) पर दृश्य फोकस आवश्यक है
- 2.4.13 (एएए): 2पीएक्स-परिधि क्षेत्र और 3:1 कंट्रास्ट परिवर्तन
- रूपरेखा हटाने के बजाय :focus-visible का उपयोग करें
- फ़ोकस रिंग को डिज़ाइन टोकन के रूप में परिभाषित करें
- कैनवास-रेंडर यूआई को वास्तविक फोकस करने योग्य तत्वों की आवश्यकता है
अक्सर पूछे जाने वाले प्रश्नों
स्रोत
- Understanding SC 2.4.7: Focus Visible — W3C WAI
- Understanding SC 2.4.13: Focus Appearance — W3C WAI
- :focus-visible — MDN वेब डॉक्स