प्रॉम्प्ट और दायरा
यह फ्रंटएंड प्रश्न एक जटिल इंटरैक्शन के कीबोर्ड मॉडल और एक्सेसिबिलिटी का परीक्षण करता है। केवल कुछ keydown हैंडलर न जोड़ें; संपूर्ण ओपन, सर्च, सेलेक्ट, एक्ज़ीक्यूट, क्लोज़ और फ़ोकस-रीस्टोर स्टेट मशीन को परिभाषित करें और स्क्रीन रीडर्स के लिए सही roles, names और states को प्रदर्शित करें।
इंटरव्यूअर क्या मूल्यांकन कर रहा है
- क्या आप dialog, combobox, listbox और menu सिमेंटिक्स में अंतर करते हैं।
- क्या Tab, तीर (arrows), Enter, Escape, Home और End का व्यवहार सुसंगत है।
- क्या फ़ोकस दृश्यता (visibility), रीस्टोरेशन, गतिशील परिणाम, लोडिंग और त्रुटियों (errors) को संभाला गया है।
- क्या ग्लोबल शॉर्टकट इनपुट, सहायक तकनीक (assistive technology), या ब्राउज़र के डिफ़ॉल्ट्स को बाधित करने से बचते हैं।
पहले पूछे जाने वाले स्पष्टीकरण प्रश्न
पुष्टि करें कि क्या कमांड समूहीकृत (grouped) हैं, हालिया (recent) हैं, या एसिंक्रोनस रूप से खोजे गए हैं, क्या मोबाइल पर कोई अन्य एंट्री पॉइंट है, क्या शॉर्टकट कॉन्फ़िगर करने योग्य हैं, और क्या निष्पादन नेविगेट करता है, एक डायलॉग खोलता है, या पेज की स्थिति बदलता है। माउस और टच समर्थन, परिणाम सीमाओं और स्वीकार्य लोडिंग विलंब को भी स्पष्ट करें।
30-सेकंड की उत्तर संरचना
एक इनपुट और परिणामों के चारों ओर एक स्पष्ट combobox/listbox संबंध के साथ एक नामित मोडल dialog का उपयोग करें। ट्रिगर को सहेजें और खोलने पर इनपुट को फ़ोकस करें; तीर सक्रिय आइटम को स्थानांतरित करते हैं, Enter निष्पादित करता है, और Escape बंद करके फ़ोकस को पुनर्स्थापित करता है। परिणाम स्थिति परिवर्तनों की घोषणा करें, केवल सुरक्षित संदर्भों में शॉर्टकट ट्रिगर करें, और कीबोर्ड, स्क्रीन रीडर और ऑटोमेशन के साथ हर संक्रमण (transition) का परीक्षण करें।
विस्तृत उत्तर
1. सिमेंटिक सीमा चुनें
बाहर एक नामित dialog का उपयोग करें, जब इंटरैक्शन की मांग हो तो इनपुट के लिए combobox सिमेंटिक्स, परिणामों के लिए listbox और विकल्पों के लिए option का उपयोग करें। पदानुक्रमित (hierarchical) कमांड के लिए, हर जगह role="menuitem" जोड़ने के बजाय एक मेनू पैटर्न का पालन करें। ARIA को वास्तविक व्यवहार का वर्णन करना चाहिए, न कि गलत DOM संरचना को छिपाना चाहिए।
2. फ़ोकस और कीबोर्ड स्टेट मशीन डिज़ाइन करें
ट्रिगर को रिकॉर्ड करें और खोलने पर इनपुट को फ़ोकस करें। तीर कुंजियाँ परिणामों के माध्यम से आगे बढ़ती हैं, Home और End सीमाओं पर जाती हैं, Enter वर्तमान आइटम को निष्पादित करता है, और Escape बंद करता है। Tab व्यवहार चुने गए पैटर्न से मेल खाना चाहिए और फ़ोकस को कभी भी डायलॉग के पीछे नहीं जाने देना चाहिए। बंद करने, विफलता या नेविगेशन पर, ट्रिगर या किसी समझदार लक्ष्य पर फ़ोकस पुनर्स्थापित करें।
3. गतिशील परिणाम और घोषणाओं को संभालें
जब एसिंक्रोनस खोज परिणामों को अपडेट करती है तो इनपुट फ़ोकस बनाए रखें, aria-activedescendant या वास्तविक फ़ोकस को अपडेट करें, और लोडिंग, खाली (empty), त्रुटि (error) और परिणाम-गणना स्थितियों को प्रदर्शित करें। प्रत्येक वर्ण पर पूरी सूची न पढ़ें; एक संक्षिप्त स्थिति क्षेत्र (status region) का उपयोग करें और चयनित नाम, शॉर्टकट और अक्षम स्थिति को समझने योग्य बनाएं।
4. शॉर्टकट और डिफ़ॉल्ट व्यवहार को नियंत्रित करें
खोलने से पहले वर्तमान फ़ोकस, मॉडिफ़ायर संयोजन और प्लेटफ़ॉर्म की जाँच करें। इनपुट, संपादकों या स्क्रीन-रीडर मोड से शॉर्टकट चुराने से बचें। preventDefault को केवल तभी कॉल करें जब ब्राउज़र के व्यवहार को बदलना जानबूझकर किया गया हो; कॉपी, पेस्ट, खोज और सहायक संचालन को सुरक्षित रखें। एक दृश्यमान बटन प्रदान करें ताकि शॉर्टकट कभी भी एकमात्र प्रविष्टि न हो।
5. निष्पादन, विफलता और परीक्षण को अवलोकनीय बनाएं
निष्पादन से पहले चयनित कमांड दिखाएं, प्रगति प्रदर्शित करें या एसिंक्रोनस कार्य के लिए डुप्लिकेट सबमिट को रोकें, और विफलता पर पुन: प्रयास पथ के साथ संदर्भ बनाए रखें। केवल-कीबोर्ड पथ, दृश्यमान फ़ोकस, फ़ोकस ट्रैप, Escape रीस्टोरेशन, गतिशील परिणाम, ज़ूम, धीमे नेटवर्क और कम से कम एक स्क्रीन रीडर का परीक्षण करें। संवेदनशील इनपुट रिकॉर्ड किए बिना ओपन, सर्च, विफलता और रद्दीकरण को लॉग करें।
एक मजबूत उत्तर का उदाहरण
मैं इनपुट और परिणामों को एक नामित dialog में लपेटूंगा। खोलने पर, ट्रिगर को सहेजें और इनपुट को फ़ोकस करें; इनपुट और listbox को aria-controls और aria-activedescendant से कनेक्ट करें ताकि सक्रिय विकल्प स्पष्ट हो। तीर और Home/End चयन को स्थानांतरित करते हैं, Enter निष्पादित करता है, Escape बंद करता है और फ़ोकस को पुनर्स्थापित करता है, और Tab कभी भी पृष्ठभूमि तक नहीं पहुँचता है। एसिंक्रोनस खोज लोडिंग, खाली और त्रुटि स्थितियों की संक्षिप्त रूप से घोषणा करती है। शॉर्टकट फ़ोकस और प्लेटफ़ॉर्म की जाँच करते हैं, ब्राउज़र डिफ़ॉल्ट को सुरक्षित रखते हैं, और एक दृश्य बटन विकल्प रखते हैं। परीक्षण कीबोर्ड, स्क्रीन रीडर, ज़ूम, धीमे नेटवर्क, पुन: प्रयास और दृश्यमान फ़ोकस को कवर करते हैं, और टेलीमेट्री संवेदनशील प्रश्नों को बाहर रखती है।
सामान्य गलतियां
- खोलने, बंद करने और फ़ोकस रीस्टोरेशन स्थितियों को परिभाषित किए बिना keydown को संभालना।
- मनमाने कंटेनरों में menu, menuitem, या combobox भूमिकाएं जोड़ना।
- गतिशील अपडेट के बाद फ़ोकस खोना ताकि स्क्रीन रीडर सक्रिय विकल्प की पहचान न कर सकें।
- ग्लोबल शॉर्टकट को इंटरसेप्ट करना और इनपुट, कॉपी/पेस्ट, या सहायक व्यवहार को तोड़ना।
- कोई दृश्यमान प्रविष्टि बिंदु प्रदान न करना और उपयोगकर्ताओं को शॉर्टकट याद रखने के लिए बाध्य करना।
- कीबोर्ड, ज़ूम, स्क्रीन रीडर और धीमे नेटवर्क के बजाय केवल माउस क्लिक और ऑटोमेशन का परीक्षण करना।
फॉलो-अप प्रश्न
क्या आपको वास्तविक फ़ोकस को स्थानांतरित करना चाहिए या aria-activedescendant का उपयोग करना चाहिए?
संरचना और स्क्रीन-रीडर समर्थन के आधार पर दोनों काम कर सकते हैं। वास्तविक फ़ोकस सीधा है लेकिन इनपुट और विकल्प इंटरैक्शन को प्रबंधित करने की आवश्यकता होती है; aria-activedescendant इनपुट फ़ोकस रखता है और इसके लिए स्थिर संदर्भ, प्रत्यक्ष विकल्प और वास्तविक डिवाइस परीक्षण की आवश्यकता होती है।
जब कोई परिणाम न हो तो आप फ़ोकस ट्रैप से कैसे बचते हैं?
फ़ोकस को इनपुट में रखें, एक स्पष्ट खाली स्थिति दिखाएं, और Escape, क्वेरी संपादन और दृश्यमान बटन की अनुमति दें। फ़ोकस को कभी भी किसी गैर-इंटरैक्टिव प्लेसहोल्डर पर न ले जाएं।
नेविगेशन के बाद फ़ोकस कहाँ जाता है?
गंतव्य को एक समझदार लक्ष्य चुनना चाहिए जैसे कि उसका शीर्षक (heading) या मुख्य सामग्री। यदि उपयोगकर्ता पृष्ठ पर रहता है, तो ट्रिगर या संदर्भ को पुनर्स्थापित करें। विफलता पर, क्वेरी और त्रुटि के साथ पैलेट को खुला रखें।
आप कैसे सत्यापित करते हैं कि शॉर्टकट ब्राउज़र के साथ टकराव नहीं करते हैं?
समर्थित प्लेटफ़ॉर्म और संयोजनों की सूची बनाएं और इनपुट, संपादकों, फ़ॉर्म और स्क्रीन-रीडर वातावरण में परीक्षण करें। डिफ़ॉल्ट को केवल तभी रोकें जब इसे जानबूझकर बदला जा रहा हो, और सेटिंग्स या एक बटन विकल्प प्रदान करें।