प्रश्न और संदर्भ
आपको एक प्रोफ़ाइल प्रिव्यू की आवश्यकता है जो पॉइंटर होवर, कीबोर्ड फ़ोकस, या लॉन्ग प्रेस पर दिखाई दे, और रुचि (interest) समाप्त होने पर छिप जाए। समझाएं कि आप interestfor का उपयोग कैसे करेंगे और कम्पैटिबिलिटी, फ़ोकस, देरी और ऐसी सामग्री को कैसे संभालेंगे जिसे होवर द्वारा ट्रिगर नहीं किया जाना चाहिए।
Popover API interest invoker एक बटन या लिंक को interestfor के साथ उसी ट्री में एक टारगेट ID की ओर इंगित करने की अनुमति देता है। टारगेट एक popover="hint" प्रिव्यू कार्ड हो सकता है। ब्राउज़र इसे तब दिखाता है जब इन्वोकर होवर, फ़ोकस, या लॉन्ग प्रेस के माध्यम से दिलचस्प (interesting) बन जाता है और रुचि समाप्त होने पर इसे छिपा देता है। यह संक्षिप्त, गैर-महत्वपूर्ण सहायता के लिए उपयुक्त है; यह जानकारी या कार्रवाई खोजने का एकमात्र तरीका नहीं होना चाहिए।
साक्षात्कारकर्ता क्या जांच रहा है
साक्षात्कारकर्ता यह देखना चाहता है कि क्या आप रुचि (interest) और सक्रियण (activation) में अंतर करते हैं, टारगेट ID, पॉपओवर स्थिति और InterestEvent को समझते हैं, और कीबोर्ड, टच, देरी, कम्पैटिबिलिटी, एक्सेसिबिलिटी और उन मामलों को कवर कर सकते हैं जहां एक स्पष्ट क्लिक या सामान्य लिंक अधिक सुरक्षित है।
स्पष्टीकरण के लिए प्रश्न
पुष्टि करें कि क्या सरफेस एक हिंट, प्रिव्यू, या नियंत्रणों (controls) वाला मेनू है; ब्राउज़र सपोर्ट मैट्रिक्स; टच आवश्यकताएं; क्या सामग्री महत्वपूर्ण है; और क्या टारगेट उसी DOM ट्री में है। यह भी स्पष्ट करें कि क्या उपयोगकर्ता सरफेस में प्रवेश कर सकते हैं और उसमें बने रह सकते हैं, दिखाने और छिपाने में देरी, फ़ोकस-वापसी के नियम, और न्यूनतम नो-जावास्क्रिप्ट अनुभव।
30-सेकंड का उत्तर
“मैं प्रोफ़ाइल नाम और सामान्य लिंक को प्राथमिक पथ के रूप में रखते हुए, Popover हिंट की ओर इंगित करने वाले interestfor के साथ एक नेटिव बटन या लिंक का उपयोग करूंगा। इंटरेस्ट इन्वोकर होवर, फ़ोकस और लॉन्ग-प्रेस दृश्यता प्रदान करता है; फ़्लिकर को कम करने के लिए मैं interest-delay, या समकक्ष रणनीति का उपयोग करूंगा। मैं फ़ीचर-डिटेक्ट करूंगा और फ़ोकस और क्लिक लिसनर्स पर फ़ॉलबैक करूंगा। प्रिव्यू टेक्स्ट कीबोर्ड और टच उपयोगकर्ताओं के लिए उपलब्ध रहना चाहिए, और साइड इफेक्ट्स या पूर्ण इंटरैक्शन मॉडल वाली किसी भी चीज़ के लिए स्पष्ट सक्रियण का उपयोग किया जाना चाहिए।”
विस्तृत उत्तर
चरण 1: रुचि संबंध (interest relationship) बनाएं
interestfor मान टारगेट एलिमेंट की ID की ओर इंगित करता है, और टारगेट तथा इन्वोकर दोनों एक ही ट्री में होने चाहिए। एक न्यूनतम उदाहरण है:
<button interestfor="profile-preview" aria-label="Read Ada's profile">
Ada Lovelace
</button>
<article id="profile-preview" popover="hint">
Early computing pioneer; the profile page contains the full biography.
</article>बटन एक फ़ोकस करने योग्य नेटिव कंट्रोल बना रहता है; प्रिव्यू पूरक है और प्रोफ़ाइल का एकमात्र मार्ग नहीं है।
चरण 2: सक्रियण से रुचि को अलग करें
रुचि (interest) प्रिव्यू, स्पष्टीकरण और अतिरिक्त संदर्भ के लिए अल्पकालिक फीडबैक है। एक क्लिक या Enter की नेविगेशन, सबमिशन, या किसी अपरिवर्तनीय कार्रवाई के लिए सक्रियण (activation) है। केवल रुचि के माध्यम से दिखाई देने वाली सरफेस के अंदर डिलीट, खरीद, या पुष्टि नियंत्रणों को न छिपाएं।
चरण 3: Popover सीमा का सम्मान करें
ब्राउज़र popover="hint" टारगेट की प्रदर्शन स्थिति का स्वामी होता है। किसी अन्य स्क्रिप्ट द्वारा उसी स्थिति को बाध्य करने से बचें, क्योंकि दो स्वामियों के बीच रेस कंडीशन हो सकती है। यदि सरफेस को मेनू कीबोर्ड मॉडल, फ़ोकस ट्रैपिंग, या जटिल स्थिति की आवश्यकता है, तो एक स्पष्ट मेनू, डायलॉग, या कंपोनेंट पैटर्न का मूल्यांकन करें।
चरण 4: देरी और फ़्लिकर को नियंत्रित करें
पॉइंटर इन्वोकर और प्रिव्यू के बीच की सीमा को तेज़ी से पार कर सकता है। दिखाने और छिपाने के समय के लिए interest-delay का उपयोग करें, और ट्रिगर और टारगेट के बीच एक निरंतर हिट क्षेत्र डिज़ाइन करें। प्रत्येक डिवाइस के लिए एक ही मान उपयुक्त मानने के बजाय पॉइंटर, कीबोर्ड और टच परीक्षणों के साथ देरी को कैलिब्रेट करें।
चरण 5: कीबोर्ड और स्क्रीन-रीडर पथों को कवर करें
नेटिव बटन या लिंक फ़ोकस प्राप्त कर सकता है। प्रिव्यू में अप्रत्याशित रूप से फ़ोकस चुराए बिना एक स्पष्ट नाम संबंध होना चाहिए। प्रिव्यू टेक्स्ट को एक दृश्यमान नाम, गंतव्य, या अन्य स्थिर सामग्री के माध्यम से उपलब्ध रखें; फ़ोकस संकेत को होवर से न बदलें और न ही किसी महत्वपूर्ण त्रुटि को केवल प्रिव्यू में रखें।
चरण 6: टच और लॉन्ग प्रेस का ध्यान रखें
टच में पारंपरिक होवर नहीं होता है। लॉन्ग-प्रेस रुचि एक प्रिव्यू प्रदान कर सकती है, लेकिन इसे सामान्य टैप या स्क्रॉलिंग को ब्लॉक नहीं करना चाहिए। महत्वपूर्ण कार्रवाइयों के लिए सीधा टैप पथ बनाए रखें, और ऑक्लूज़न, व्यूपोर्ट ओवरफ्लो और क्लोजिंग व्यवहार के लिए छोटी स्क्रीन का परीक्षण करें।
चरण 7: फ़ीचर-डिटेक्शन और डिग्रेडेशन
यह न मानें कि प्रत्येक रनटाइम interestfor का समर्थन करता है। HTMLButtonElement.prototype.interestForElement को फ़ीचर-डिटेक्ट करें; अनुपस्थित होने पर, सामान्य HTML सामग्री और लिंक बनाए रखें, फिर फ़ोकस, पॉइंटर, या क्लिक लिसनर्स के साथ एक बुनियादी प्रिव्यू जोड़ें। फ़ॉलबैक को सच्चाई का दूसरा स्रोत (second source of truth) बनाए बिना क्षमता जोड़नी चाहिए।
चरण 8: जीवनचक्र और सीमाओं का परीक्षण करें
पॉइंटर एंटर और लीव, इन्वोकर से प्रिव्यू पर जाना, Tab और Shift+Tab, लॉन्ग प्रेस, स्क्रॉलिंग, Escape, तेज़ री-एंट्री और डायनामिक टारगेट रिमूवल का परीक्षण करें। एक्सेसिबिलिटी ट्री, सीमाओं, देरी, नो-जावास्क्रिप्ट सामग्री और टारगेट ब्राउज़र मैट्रिक्स को सत्यापित करें; MDN उपलब्धता लेबल प्रोजेक्ट परीक्षण का विकल्प नहीं है।
मॉडल उत्तर
मैं अवतार को एक नेटिव लिंक या बटन बनाऊंगा और interestfor को उसी ट्री में एक popover="hint" प्रिव्यू की ओर इंगित करूंगा। प्रिव्यू संदर्भ जोड़ता है, जबकि नाम और प्रोफ़ाइल लिंक स्थिर सामग्री में दिखाई देते हैं। रुचि पॉइंटर, फ़ोकस और लॉन्ग प्रेस को कवर करती है; interest-delay और एक निरंतर हिट क्षेत्र फ़्लिकर को कम करते हैं। कार्यान्वयन से पहले मैं interestForElement का पता लगाऊंगा; गैर-समर्थित ब्राउज़र सामान्य सामग्री बनाए रखते हैं और फ़ॉलबैक के माध्यम से समान फ़ोकस, पॉइंटर, या क्लिक व्यवहार प्राप्त करते हैं। डिलीट, खरीद, मेनू, या अन्य साइड-इफ़ेक्ट वाली सामग्री को केवल-रुचि वाली सरफेस के बजाय स्पष्ट सक्रियण का उपयोग करना चाहिए। मैं कीबोर्ड, टच, स्क्रीन रीडर, स्क्रॉलिंग, Escape, डायनामिक रिमूवल और टारगेट ब्राउज़र मैट्रिक्स को सत्यापित करूंगा।
सामान्य गलतियाँ
interestfor को एक सामान्य टूलटिप एट्रिब्यूट मानना
यह एक इंटरेस्ट-इन्वोकर संबंध स्थापित करता है और Popover-संबंधित ब्राउज़र व्यवहार पर निर्भर करता है। जिस टारगेट को मेनू मॉडल या जटिल स्थिति की आवश्यकता होती है, उसे उपयुक्त कंपोनेंट सेमेन्टिक्स की आवश्यकता होती है।
केवल होवर CSS लागू करना
कीबोर्ड उपयोगकर्ताओं के पास पॉइंटर होवर नहीं होता है, और टच का जेस्चर मॉडल अलग होता है। फ़ोकस व्यवहार, टैप पथ और स्थिर जानकारी बनाए रखें।
प्रिव्यू को महत्वपूर्ण सामग्री का एकमात्र स्रोत बनाना
उपयोगकर्ता असमर्थित ब्राउज़र चला सकते हैं, स्क्रिप्ट अक्षम कर सकते हैं, या लॉन्ग-प्रेस करने में असमर्थ हो सकते हैं। महत्वपूर्ण नाम, स्थिति और कार्रवाइयां प्राथमिक सामग्री या एक स्पष्ट सक्रियण पथ में रहनी चाहिए।
अनुवर्ती प्रश्न और उत्तर
क्या होगा यदि ब्राउज़र interestfor का समर्थन नहीं करता है?
पहले सामान्य HTML, लिंक और फ़ोकस शैलियों को पूरा रखें, फिर फ़ीचर-डिटेक्ट करें। फ़ॉलबैक नेविगेशन या सूचना संरचना को बदले बिना प्रिव्यू व्यवहार जोड़ता है, और इसका परीक्षण सपोर्ट मैट्रिक्स में किया जाता है।
आप इन्वोकर और प्रिव्यू के बीच फ़्लिकर को कैसे रोकते हैं?
एक निरंतर हिट क्षेत्र, दिखाने और छिपाने में देरी का उपयोग करें, और टारगेट में प्रवेश करते समय रुचि बनाए रखें। एकाधिक स्क्रिप्ट्स को Popover स्थिति का स्वामित्व न लेने दें; रेस कंडीशन का निदान करते समय एंटर, लीव और रिमूवल क्रम को लॉग करें।
जब इन्वोकर को फ़ोकस मिलता है तो क्या फ़ोकस प्रिव्यू में चला जाना चाहिए?
शुद्ध प्रिव्यू के लिए, आमतौर पर नहीं: फ़ोकस को इन्वोकर पर रखें और एक स्पष्ट एक्सेसिबल नाम प्रदर्शित करें। यदि सरफेस में नियंत्रण हैं, तो परिभाषित एंट्री, Escape और वापसी व्यवहार के साथ स्पष्ट रूप से सक्रिय मेनू या डायलॉग पर स्विच करें।
आप लॉन्ग प्रेस बनाम टैप को कैसे संभालते हैं?
लॉन्ग-प्रेस प्रिव्यू को टैप नेविगेशन या स्क्रॉलिंग को ब्लॉक नहीं करना चाहिए। महत्वपूर्ण कार्रवाइयों के लिए एक टैप टारगेट बनाए रखें और वास्तविक उपकरणों पर लॉन्ग प्रेस, शॉर्ट टैप, स्क्रॉल और व्यूपोर्ट किनारों का परीक्षण करें।
interest-delay को किस मान का उपयोग करना चाहिए?
कोई सार्वभौमिक क्रॉस-डिवाइस मान नहीं है। सामग्री के घनत्व और आकस्मिक-ट्रिगर लागत के आधार पर एंट्री, एग्जिट और तेज़-गतिविधि के मामलों को मापें। तत्काल फ़ोकस फीडबैक प्रदान करें ताकि कीबोर्ड उपयोगकर्ताओं को पॉइंटर-उन्मुख देरी की प्रतीक्षा न करनी पड़े।
आपको इंटरेस्ट इन्वोकर से कब बचना चाहिए?
जब सामग्री महत्वपूर्ण हो, कार्रवाइयों के साइड इफेक्ट्स हों, फ़ोकस प्रबंधन जटिल हो, समन्वय कई ट्री में फैला हो, या पुराने ब्राउज़र अनिवार्य हों, तो इनसे बचें। इंटरेस्ट इन्वोकर कम जोखिम वाले, क्षणिक पूरक प्रिव्यू के लिए सर्वोत्तम हैं।