कीबोर्ड नियंत्रणों को माउस-चालित पहेली स्लाइड में बाधा डालने से कैसे रोकें

जब कोई पहेली माउस ऑपरेशन के दौरान किसी एरो कुंजी पर प्रतिक्रिया करती है, तो इसका कारण अक्सर अत्यधिक व्यापक कीबोर्ड श्रोता (listener) होता है। document या window से जुड़ा एक हैंडलर एरो कुंजियों को तब भी प्राप्त कर सकता है जब खिलाड़ी किसी सुराग फ़ील्ड में टाइप कर रहा हो, मेनू का उपयोग कर रहा हो, या किसी अन्य नियंत्रण के साथ इंटरैक्ट कर रहा हो। यह पहेली को बदलने के साथ-साथ ब्राउज़र के व्यवहार, जैसे कि स्क्रॉलिंग, को भी ट्रिगर कर सकता है।

एक छोटी चेकलिस्ट के साथ समस्या को दोहराएं: किसी टाइल पर क्लिक करें और उसे खींचें (ड्रैग करें); पहेली की सीमा के पार खींचें; जब पहेली पर फ़ोकस हो तो कोई एरो कुंजी दबाएं; फिर किसी सुराग इनपुट, बटन या मेनू पर फ़ोकस होने पर एक एरो कुंजी दबाएं। ध्यान दें कि क्या बोर्ड बदलता है, पेज स्क्रॉल होता है, फ़ोकस हटता है, या ड्रैग रुक जाता है। ये अवलोकन पहेली हैंडलर की समस्या को पॉइंटर ट्रैकिंग या ब्राउज़र के डिफ़ॉल्ट व्यवहार से अलग पहचानते हैं।

बोर्ड को एक स्पष्ट कीबोर्ड प्रवेश बिंदु वाले नियंत्रण के रूप में मानें। एक फ़ोकस करने योग्य बोर्ड कंटेनर का उपयोग करें और पहेली कुंजियों को केवल तभी हैंडल करें जब वह बोर्ड सक्रिय हो, या जब फ़ोकस उस टाइल पर हो जो बोर्ड की है। असंबंधित नियंत्रणों, जैसे संकेत बटन और टेक्स्ट फ़ील्ड, को उस कुंजी-हैंडलिंग सीमा से बाहर रखें। फ़ोकस स्थान को दृश्यमान बनाएं ताकि खिलाड़ी को पता चल सके कि बोर्ड कब प्रतिक्रिया देगा।

किसी कुंजी की व्याख्या करने से पहले इवेंट लक्ष्य (target) की जांच करें। यदि फ़ोकस किसी इनपुट, टेक्स्ट क्षेत्र, संपादन योग्य तत्व या किसी अलग बटन में है, तो उस कुंजी में कोई हस्तक्षेप न करें। एक सहयोगी एडवेंचर टूल के लिए, यह तब मायने रखता है जब एक खिलाड़ी कोई रन (rune), नाम या सुराग दर्ज कर रहा हो जबकि दूसरा व्यक्ति पहेली को संचालित कर रहा हो: टाइपिंग से गलती से टाइल नहीं हिलनी चाहिए।

कीबोर्ड संचालन को अभी भी काम करने की आवश्यकता है। W3C का मार्गदर्शन बताता है कि जहां संभव हो वहां कार्यक्षमता कीबोर्ड इंटरफ़ेस के माध्यम से उपलब्ध होनी चाहिए, और वस्तुओं को किसी स्थान पर ले जाने को एक ऐसी क्रिया के रूप में पहचानता है जिसे कीबोर्ड द्वारा संचालित किया जा सकता है। कुंजियों को पूरी तरह से हटाने के बजाय उनके दायरे (scope) को सावधानीपूर्वक सीमित करें। W3C: Understanding Success Criterion 2.1.1: Keyboard

बोर्ड के लिए कुंजियों का एक छोटा, प्रलेखित सेट चुनें, जैसे कि बोर्ड पर फ़ोकस होने पर एरो कुंजियाँ। हैंडलर में, पहले पुष्टि करें कि कुंजी वही है जिसका पहेली उपयोग करती है और बोर्ड सक्रिय लक्ष्य है। केवल तभी चाल लागू करें और, यदि आवश्यक हो, तो उस कुंजी के लिए ब्राउज़र की डिफ़ॉल्ट कार्रवाई को रद्द करें। वैश्विक स्तर पर प्रत्येक कुंजी को दबाने (suppress करने) से बचें: खिलाड़ियों को सामान्य टाइपिंग, ब्राउज़र नेविगेशन और पहेली के बाहर नियंत्रणों की आवश्यकता हो सकती है।

preventDefault() ब्राउज़र की डिफ़ॉल्ट कार्रवाई को तब रद्द करता है जब इवेंट रद्द करने योग्य हो, लेकिन यह इवेंट को अन्य हैंडलर तक जाने (propagate होने) से नहीं रोकता है। इसका मतलब है कि यह किसी दूसरे लिसनर को ठीक किए बिना पेज स्क्रॉलिंग को रोक सकता है जो टाइल को भी हिलाता है। उस हैंडलर को ढूंढें और सीमित करें जो गेम की स्थिति को बदलता है; स्पष्ट इवेंट स्वामित्व के विकल्प के रूप में व्यापक रद्दीकरण का उपयोग न करें। MDN: Event: preventDefault() method

ड्रैग इंटरैक्शन के लिए, ड्रैग शुरू करने वाले प्रेस से लेकर उसके रिलीज़ होने या रद्द होने तक एक ही सक्रिय पॉइंटर को ट्रैक करें। पॉइंटर इवेंट pointerdown, pointermove, pointerup, और pointercancel प्रदान करते हैं; पॉइंटर कैप्चर बाद के पॉइंटर इवेंट्स को बोर्ड पर निर्देशित रख सकता है, भले ही पॉइंटर अपने मूल हिट क्षेत्र से बाहर चला जाए। pointerup और pointercancel दोनों पर सक्रिय ड्रैग को साफ़ (clear) करें, ताकि कोई बाधित इशारा पहेली को अटकी हुई ड्रैगिंग स्थिति में न छोड़े। MDN: Pointer events

खींची गई टाइल को ऐसे तरीके से दोबारा बनाने या बदलने से बचें जिससे उसका पॉइंटर ट्रैकिंग खो जाए। यदि इंटरफ़ेस ड्रैग के दौरान DOM में किसी तत्व को स्थानांतरित करता है, तो MDN नोट करता है कि उस चाल के बाद पॉइंटर कैप्चर सेट किया जाना चाहिए। तय करें कि जब पॉइंटर को किसी अमान्य स्थिति पर छोड़ा जाता है तो क्या होता है: स्लाइडिंग पहेली के लिए, टाइल को उसकी पिछली स्थिति में बहाल करना या उसे किसी वैध स्थिति में स्नैप करना असंबंधित टाइलों को चुपचाप बदलने की तुलना में समझना आसान है।

एक पहेली माउस, कीबोर्ड और सरल पॉइंटर इनपुट को एक साथ समर्थित कर सकती है। उदाहरण के लिए, खाली जगह के पास की टाइल पर क्लिक या टैप करने से वह हिल सकती है; उस टाइल को खींचना एक वैकल्पिक प्रत्यक्ष-हेरफेर इशारा बना रह सकता है; और फ़ोकस किए गए बोर्ड की एरो कुंजियाँ कीबोर्ड संचालन प्रदान कर सकती हैं। इन सभी इनपुट को एक ही मूव-सत्यापन लॉजिक को कॉल करना चाहिए, ताकि कोई चाल वैध हो या अस्वीकार, यह लगातार समान रहे चाहे उसका अनुरोध कैसे भी किया गया हो।

यह एक उपयोगी डिज़ाइन जांच भी प्रदान करता है: क्या कोई खिलाड़ी बिना ड्रैग किए केवल एक क्लिक या टैप से पहेली को पूरा कर सकता है? W3C का WCAG 2.2 मार्गदर्शन कीबोर्ड एक्सेस और ड्रैगिंग के एकल-पॉइंटर विकल्प को अलग-अलग चिंताओं के रूप में मानता है। इसके उदाहरणों में ड्रैग को दिशात्मक नियंत्रणों पर क्लिक से बदलना शामिल है। केवल कीबोर्ड का विकल्प अपने आप में वह पॉइंटर विकल्प प्रदान नहीं करता है। W3C: Understanding Success Criterion 2.5.7: Dragging Movements

एक स्लाइडिंग पहेली के लिए, एक समय में एक पड़ोसी टाइल पर क्लिक करना अक्सर एक स्वाभाविक विकल्प होता है क्योंकि यह पहेली के आसन्न-चाल नियम को सुरक्षित रखता है। यदि वह इंटरैक्शन अस्पष्ट हो सकता है, तो दृश्यमान चाल बटन उपलब्ध दिशा को स्पष्ट कर सकते हैं। W3C की G219 तकनीक एकल-पॉइंटर नियंत्रणों के उदाहरण देती है जो बिना ड्रैग किए समान अंतर्निहित कार्रवाई करते हैं। W3C: G219: Ensuring that an alternative is available for dragging movements that operate on content

टेबल पर पहेली का उपयोग करने से पहले, समान बोर्ड लेआउट और प्रारंभिक स्थिति के साथ प्रत्येक इनपुट पथ का परीक्षण करें। पुष्टि करें कि एक वैध चाल बोर्ड को एक बार अपडेट करती है, एक अमान्य चाल इसे अपरिवर्तित छोड़ देती है, और असंबंधित नियंत्रण अपना सामान्य व्यवहार बनाए रखते हैं।

• माउस: एक वैध टाइल खींचें, बोर्ड के बाहर छोड़ें, और एक अमान्य चाल का प्रयास करें। पुष्टि करें कि बोर्ड न तो ड्रैग खोता है और न ही अप्रत्याशित रूप से बदलता है।

• कीबोर्ड: बोर्ड पर फ़ोकस करें, प्रत्येक समर्थित दिशा का उपयोग करें, फिर फ़ोकस को टेक्स्ट फ़ील्ड में ले जाएं और टाइप करें। पुष्टि करें कि केवल बोर्ड-फ़ोकस वाली कुंजियाँ ही टाइलों को हिलाती हैं और टाइपिंग से बोर्ड स्क्रॉल या परिवर्तित नहीं होता है।

• बिना ड्रैग किए पॉइंटर: किसी वैध पड़ोसी टाइल पर क्लिक या टैप करें। पुष्टि करें कि यह अन्य इनपुट विधियों के समान ही चाल उत्पन्न करता है।

• रुकावट: किसी ड्रैग को रद्द करें या छोड़ दें, फिर दूसरा शुरू करें। पुष्टि करें कि कोई पुराना चयन शेष नहीं बचा है।

यदि कोई परीक्षण विफल हो जाता है, तो पहले सबसे संकीर्ण प्रासंगिक परत का निरीक्षण करें: कीबोर्ड व्यवहार के लिए इवेंट लक्ष्य और फ़ोकस स्थिति; बाधित ड्रैग के लिए पॉइंटर कैप्चर और क्लीनअप; और असंगत नियमों के लिए साझा मूव वैलिडेटर। यह क्रम निर्माता को एडवेंचर प्रॉप को एक सामान्य-उद्देश्य नियंत्रण ट्यूटोरियल में बदले बिना समस्या का पता लगाने का एक ठोस तरीका देता है।

• Pointer events — MDN

• Event: preventDefault() method — MDN

• Understanding Success Criterion 2.1.1: Keyboard — W3C WAI

• Understanding Success Criterion 2.5.7: Dragging Movements — W3C WAI

• G219: Ensuring that an alternative is available for dragging movements that operate on content — W3C WAI