पब्लिश होने की तारीख: 5 मार्च, 2026
focusgroup एचटीएमएल एट्रिब्यूट, कीबोर्ड के ऐरो-की नेविगेशन को कंपोज़िट विजेट में जोड़ने का एक तरीका है. जैसे, टूलबार, टैबलिस्ट, मेन्यू, लिस्टबॉक्स वगैरह. इसके लिए, आपको कोई भी रोविंग-टैबइंडेक्स JavaScript लिखने की ज़रूरत नहीं होती. एक एट्रिब्यूट, बॉयलरप्लेट की सैकड़ों लाइनों की जगह लेता है. इस सुविधा को लॉन्च करने से पहले, हमें आपके सुझाव/राय/शिकायत का इंतज़ार है.
इसे आज़माएं और हमें अपने सुझाव/राय दें या शिकायत करें
focusgroup को आज ही Chrome, Edge, और Chromium पर आधारित अन्य ब्राउज़र में आज़माया जा सकता है. इसके लिए, इसे इन दो तरीकों में से किसी एक से चालू करें:
- लोकल टेस्टिंग: ब्राउज़र में,
about://flagsपेज खोलें और Experimental Web Platform features फ़्लैग चालू करें. इसके अलावा,--enable-blink-features=Focusgroupकमांड लाइन पैरामीटर का इस्तेमाल करके, कमांड लाइन से ब्राउज़र लॉन्च करें. - ऑरिजिन ट्रायल: focusgroup ऑरिजिन ट्रायल के लिए रजिस्टर करें, ताकि इसे असली उपयोगकर्ताओं के साथ अपनी साइट पर टेस्ट किया जा सके.
इसके बाद, इंटरैक्टिव डेमो देखें, ताकि आपको हर पैटर्न के काम करने का तरीका पता चल सके.
हमें आपके सुझाव चाहिए. हमें अपने सुझाव या राय देने के लिए, फ़ोकस ग्रुप से जुड़ी समस्या की शिकायत दर्ज करें.
यह अलग-अलग ब्राउज़र पर काम करने वाला एक फ़ॉर्मैट है: यह प्रस्ताव, Microsoft ने OpenUI Community Group के ज़रिए दिया है. साथ ही, Google ने इसका पूरा समर्थन किया है. आपके सुझाव/राय/शिकायत के आधार पर, एपीआई के स्ट्रक्चर में बदलाव किया जा सकता है. आइए, इस समस्या के बारे में जानते हैं जिसे फ़ोकसग्रुप हल करता है. साथ ही, यह भी जानते हैं कि एपीआई कैसे काम करता है.
समस्या: मैन्युअल तरीके से टैब इंडेक्स को घुमाना
अगर आपने कभी टूलबार, टैबलिस्ट, मेन्यू या लिस्टबॉक्स बनाया है, तो आपने इस कोड का कुछ वर्शन लिखा होगा. ARIA ऑथरिंग प्रैक्टिसेस गाइड (एपीजी) के मुताबिक, कंपोज़िट विजेट में एक टैब स्टॉप होना चाहिए. साथ ही, उपयोगकर्ताओं को ऐरो बटन की मदद से आइटम के बीच स्विच करने की सुविधा मिलनी चाहिए. इस पैटर्न को "रोविंग टैबइंडेक्स" कहा जाता है. कई यूज़र इंटरफ़ेस (यूआई) फ़्रेमवर्क, इस सुविधा को नए सिरे से लागू करते हैं:
<div role="toolbar" aria-label="Text formatting" id="toolbar">
<button type="button" tabindex="0">Bold</button>
<button type="button" tabindex="-1">Italic</button>
<button type="button" tabindex="-1">Underline</button>
<button type="button" tabindex="-1">Strikethrough</button>
</div>
यहां से, डेवलपर को JavaScript का इस्तेमाल करना होगा. यह JavaScript, फ़ोकस को मूव करने के लिए ऐरो की को सुनती है. साथ ही, सभी एलिमेंट के लिए tabindex एट्रिब्यूट को अडजस्ट करती है. यह आसान वर्शन है. प्रोडक्शन में लागू करने के लिए, इन बातों का ध्यान रखना भी ज़रूरी है:
- लिखने का मोड और आरटीएल: कॉन्टेंट की दिशा के हिसाब से, ऐरो की की दिशाओं में बदलाव करें.
- पिछली बार फ़ोकस की गई मेमोरी: जब कोई उपयोगकर्ता वापस टैब करता है, तो पिछली बार ऐक्टिव आइटम पर फ़ोकस वापस लाएं.
- बंद किए गए और छिपाए गए आइटम: नेविगेशन के दौरान इन्हें छोड़ दें.
- डाइनैमिक आइटम: आइटम जोड़े या हटाए जाने पर, रोविंग इंडेक्स को अपडेट करें.
ज़्यादातर यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी, इस लॉजिक का अपना वर्शन उपलब्ध कराती हैं. इनमें React, Angular CDK, और Fluent UI शामिल हैं. यह एक ऐसी चीज़ पाने के लिए बहुत ज़्यादा डुप्लीकेट काम है जो प्लैटफ़ॉर्म प्रिमिटिव हो सकती है.
समाधान: focusgroup एट्रिब्यूट
focusgroup का इस्तेमाल करने पर, यही टूलबार ऐसा दिखता है:
<div focusgroup="toolbar" aria-label="Text formatting">
<button type="button">Bold</button>
<button type="button">Italic</button>
<button type="button">Underline</button>
<button type="button">Strikethrough</button>
</div>
इसे लाइव आज़माएं: टूलबार पैटर्न > बेसिक टूलबार. हो गया. ऐरो बटन से नेविगेट करने के लिए, JavaScript का इस्तेमाल नहीं किया जाता. मैन्युअल तरीके से tabindex मैनेज करने की सुविधा नहीं है. अब ब्राउज़र आपके लिए ये काम करता है:
- ऐरो बटन से नेविगेट करना: लिखने के मोड और दिशा के हिसाब से, आइटम के बीच नेविगेट करें.
- एक टैब स्टॉप: ब्राउज़र, हिस्सा लेने वाले आइटम को एक टैब स्टॉप में अपने-आप छोटा कर देता है. डेवलपर को चालू न किए गए आइटम के लिए,
tabindex="-1"को चालू करने की ज़रूरत नहीं है. - आखिरी बार फ़ोकस की गई मेमोरी: जब कोई उपयोगकर्ता फ़ोकसग्रुप से हट जाता है और फिर वापस आता है, तो फ़ोकस उस आइटम पर वापस आ जाता है जिसे उसने छोड़ा था.
- ARIA सिमैंटिक्स: जब सामान्य एलिमेंट का इस्तेमाल किया जाता है, तो ब्राउज़र चुने गए व्यवहार के आधार पर सही भूमिकाएं (जैसे कि
role="toolbar") तय करता है.
डेवलपर सिर्फ़ अपनी सुविधाओं के लिए यूनीक लॉजिक रखते हैं. जैसे, बटन दबाने की स्थिति को टॉगल करना, मेन्यू खोलना, चुने गए आइटम को मैनेज करना या कोई कस्टम कमांड.
एपीआई के बारे में खास जानकारी
focusgroup एट्रिब्यूट, स्पेस से अलग किए गए टोकन की सूची लेता है. पहला टोकन हमेशा एक व्यवहार टोकन होता है, जो विजेट के पैटर्न के बारे में बताता है. ज़रूरी नहीं
मॉडिफ़ायर टोकन: focusgroup="<behavior> [inline|block] [wrap] [nomemory]".
व्यवहार से जुड़े टोकन
व्यवहार टोकन ज़रूरी है. हालांकि, अगर none का इस्तेमाल करके, किसी पूर्वज फ़ोकसग्रुप से ऑप्ट आउट किया जा रहा है, तो इसकी ज़रूरत नहीं है. यह कंपोज़िट विजेट पैटर्न के बारे में बताता है. इससे यह पक्का होता है कि जब तक कोई अन्य भूमिका तय नहीं की जाती, तब तक सही भूमिकाओं का अनुमान लगाया जा सकता है. टोकन, Aria Authoring Practices guide में बताए गए पैटर्न के मुताबिक होते हैं. साथ ही, इन्हें यहां दी गई टेबल में भी दिखाया गया है:
| व्यवहार | एपीजी पैटर्न | कंटेनर की कम से कम भूमिका (लागू होने पर) | बच्चे की कम से कम भूमिका (लागू होने पर) |
डिफ़ॉल्ट मॉडिफ़ायर |
|---|---|---|---|---|
toolbar |
टूलबार | टूलबार | (कुछ नहीं) | inline |
tablist |
APG टैब | tablist | tab | inline wrap |
radiogroup |
रेडियो ग्रुप | radiogroup | रेडियो | (कुछ नहीं) |
listbox |
Listbox | listbox | option | (कुछ नहीं) |
menu |
मेन्यू | menu | menuitem | block wrap |
menubar |
मेन्यू बार | menubar | menuitem | inline wrap |
none |
लागू नहीं | लागू नहीं | लागू नहीं | लागू नहीं |
भूमिका मैपिंग के काम करने के तरीके के बारे में पूरी जानकारी के लिए, एक्सप्लेनर देखें.
एक्सिस से जुड़ी पाबंदी (inline और block)
अगर चुने गए व्यवहार में कोई डिफ़ॉल्ट मॉडिफ़ायर नहीं है, तो फ़ोकस को मूव करने के लिए चारों ऐरो कुंजियां काम करती हैं. inline या block मॉडिफ़ायर का इस्तेमाल करके, नेविगेशन को किसी एक लॉजिकल ऐक्सिस तक सीमित किया जा सकता है:
inline: फ़ोकसग्रुप, इनलाइन ऐक्सिस पर सिर्फ़ ऐरो कुंजियों का जवाब देता है. अंग्रेज़ी भाषा के ज़्यादातर कॉन्टेक्स्ट में, यह बाईं और दाईं ओर होता है (हॉरिज़ॉन्टल, ऊपर से नीचे की ओर).block: फ़ोकसग्रुप, ब्लॉक ऐक्सिस पर सिर्फ़ ऐरो बटन के हिसाब से काम करता है. अंग्रेज़ी भाषा के ज़्यादातर कॉन्टेक्स्ट में, यह ऊपर और नीचे की ओर काम करता है (हॉरिजॉन्टल, ऊपर से नीचे की ओर).
ऐक्सिस को सीमित करने की सुविधा, सीएसएस की लॉजिकल प्रॉपर्टी के साथ काम करती है. साथ ही, यह लिखने के मोड और दिशा के हिसाब से अपने-आप अडजस्ट हो जाती है.
रैप-अराउंड नेविगेशन
डिफ़ॉल्ट रूप से, ऐरो वाले बटन से नेविगेट करने पर, फ़ोकसग्रुप के किनारों पर जाकर रुक जाता है. आखिरी आइटम से पहले आइटम पर वापस जाने (और पहले आइटम से आखिरी आइटम पर वापस जाने) के लिए, wrap मॉडिफ़ायर जोड़ें. अगर किसी व्यवहार में डिफ़ॉल्ट रूप से रैप करने की सुविधा चालू है, तो इस सुविधा को बंद करने के लिए nowrap मॉडिफ़ायर का इस्तेमाल करें.
इसे लाइव आज़माएं: टैबलिस्ट पैटर्न > रैपिंग के साथ हॉरिज़ॉन्टल टैबलिस्ट. इस उदाहरण में, जब फ़ोकस अक्सर पूछे जाने वाले सवाल टैब पर होता है और उपयोगकर्ता राइट ऐरो वाली कुंजी दबाता है, तो फ़ोकस वापस खास जानकारी टैब पर चला जाता है.
focusgroupstart एट्रिब्यूट
focusgroupstart एट्रिब्यूट से यह पता चलता है कि फ़ोकसग्रुप में पहली बार टैब करने पर (या मेमोरी बंद होने पर हर बार) किस एलिमेंट पर फ़ोकस किया जाता है:
<div focusgroup="toolbar nomemory" aria-label="Entry point demo">
<button type="button">First</button>
<button type="button" focusgroupstart>Middle (Entry)</button>
<button type="button">Last</button>
</div>
Tab और Shift+Tab, दोनों "बीच में (एंट्री)" पर पहुंचते हैं, क्योंकि इसमें focusgroupstart है. साथ ही, nomemory मॉडिफ़ायर के साथ मेमोरी बंद है. इसे लाइव आज़माएं:
टूलबार पैटर्न > focusgroupstart वाला एंट्री पॉइंट.
मेमोरी की सुविधा बंद करें (nomemory)
डिफ़ॉल्ट रूप से, फ़ोकस ग्रुप में आखिरी बार फ़ोकस किए गए आइटम को याद रखा जाता है. साथ ही, टैब की मदद से फिर से फ़ोकस ग्रुप में आने पर, उसे वापस लाया जाता है. ऐसे पैटर्न के लिए जहां फ़ोकस हमेशा किसी तय एंट्री पॉइंट पर वापस जाना चाहिए (जैसे कि पिछले डेमो में), फ़ोकसग्रुप एट्रिब्यूट में nomemory मॉडिफ़ायर का इस्तेमाल करके इसे बंद करें.
इस मॉडिफ़ायर को focusgroupstart के प्रोग्राम के हिसाब से होने वाले मूवमेंट के साथ भी जोड़ा जा सकता है. इससे आपको उस आइटम पर पूरा कंट्रोल मिलता है जिस पर ग्रुप में शामिल होते समय फ़ोकस किया जाता है. जब याद रखा गया एलिमेंट उपलब्ध नहीं होता है, तब मेमोरी मिटा दी जाती है. उदाहरण के लिए, अगर उसे हटा दिया जाता है, छिपा दिया जाता है, बंद कर दिया जाता है, निष्क्रिय कर दिया जाता है या फ़ोकसग्रुप से बाहर कर दिया जाता है.
ऑप्ट आउट करें (focusgroup="none")
किसी एलिमेंट और उसके सबट्री को ऐन्सेस्टर फ़ोकसग्रुप के ऐरो नेविगेशन से बाहर रखने के लिए, focusgroup="none" का इस्तेमाल करें. ऑप्ट-आउट किए गए एलिमेंट और उसके सबट्री तक Tab बटन का इस्तेमाल करके पहुंचा जा सकता है. हालांकि, ऐरो बटन का इस्तेमाल करके उन तक नहीं पहुंचा जा सकता:
<div focusgroup="toolbar" aria-label="Segmented toolbar">
<button type="button">New</button>
<button type="button">Open</button>
<button type="button">Save</button>
<span focusgroup="none">
<button type="button">Help</button>
<button type="button">Shortcuts</button>
</span>
<button type="button">Close</button>
<button type="button">Exit</button>
</div>
राइट ऐरो बटन का इस्तेमाल करने पर, New, Open, Save, Close, और Exit पर नेविगेट किया जाता है. इसमें Help और Shortcuts बटन को पूरी तरह से छोड़ दिया जाता है. हालांकि, उपयोगकर्ता इन बटन को ऐक्सेस करने के लिए, अब भी सहायता सेक्शन में टैब कर सकता है. इसे लाइव आज़माएं: अन्य कॉन्सेप्ट > focusgroup="none" वाले ऑप्ट-आउट सेगमेंट.
सामान्य पैटर्न
टैब्लिस्ट
टैब कंट्रोल, जिसमें ऐरो बटन का इस्तेमाल करके एक टैब से दूसरे टैब पर जाया जा सकता है.
<div focusgroup="tablist nomemory" aria-label="Sections">
<button type="button" aria-selected="true" aria-controls="panel-overview" id="tab-overview" focusgroupstart>Overview</button>
<button type="button" aria-selected="false" aria-controls="panel-features" id="tab-features">Features</button>
<button type="button" aria-selected="false" aria-controls="panel-pricing" id="tab-pricing">Pricing</button>
<button type="button" aria-selected="false" aria-controls="panel-faq" id="tab-faq">FAQ</button>
</div>
<div role="tabpanel" id="panel-overview" aria-labelledby="tab-overview" tabindex="0">...</div>
<div role="tabpanel" id="panel-features" aria-labelledby="tab-features" tabindex="0">...</div>
<div role="tabpanel" id="panel-pricing" aria-labelledby="tab-pricing" tabindex="0">...</div>
<div role="tabpanel" id="panel-faq" aria-labelledby="tab-faq" tabindex="0">...</div>
इसे लाइव आज़माएं: टैबलिस्ट पैटर्न > रैपिंग के साथ हॉरिज़ॉन्टल टैबलिस्ट.
इन बातों का ध्यान रखें:
focusgroupstartएट्रिब्यूट, चुने गए टैब पर है. इसलिए, फ़ोकस हमेशा इसी टैब पर होता है.nomemoryमॉडिफ़ायर यह पक्का करता है कि भले ही उपयोगकर्ता ने पहले किसी दूसरे टैब पर फ़ोकस किया हो, लेकिन वापस आने पर हमेशा चुने गए टैब पर ही जाएगा.inlineमॉडिफ़ायर, ऐरो नेविगेशन को सिर्फ़ बाईं और दाईं कुंजियों तक सीमित करता है. यह APG टैब पैटर्न के मुताबिक है.wrapमॉडिफ़ायर की मदद से, उपयोगकर्ता सभी टैब में ऐरो बटन का लगातार इस्तेमाल कर सकते हैं.- डेवलपर कोड, जिसे छोटा करने के लिए हटाया गया है, असल में चुनने की प्रोसेस को मैनेज करता है. जैसे:
aria-selectedको अपडेट करना, पैनल के दिखने की सेटिंग को टॉगल करना, और चुनने की प्रोसेस में बदलाव होने परfocusgroupstartएट्रिब्यूट को मूव करना.
मेन्यू और मेन्यू बार
ऊपर और नीचे के ऐरो नेविगेशन वाला एक सामान्य वर्टिकल मेन्यू.
<div focusgroup="menu" aria-label="File actions" class="menu-vertical">
<button type="button" class="menu-item">New</button>
<button type="button" class="menu-item">Open…</button>
<button type="button" class="menu-item">Save</button>
<button type="button" class="menu-item">Exit</button>
</div>
इसे लाइव आज़माएं:
मेन्यू और मेन्यूबार पैटर्न > सिंपल वर्टिकल मेन्यू.
block मॉडिफ़ायर के साथ, सिर्फ़ अप और डाउन ऐरो बटन से आइटम पर नेविगेट किया जा सकता है. लेफ़्ट और राइट ऐरो बटन का इस्तेमाल, आपके तय किए गए व्यवहार के लिए किया जा सकता है. उदाहरण के लिए, सब-मेन्यू खोलना. नेस्ट किए गए सबमेन्यू वाले मेन्यूबार के लिए, हर लेवल एक इंडिपेंडेंट फ़ोकसग्रुप होता है. इसे लाइव आज़माएं:
मेन्यू और मेन्यूबार का पैटर्न > पॉपओवर सबमेन्यू वाला मेन्यूबार
<ul role="menubar" focusgroup="menubar"
aria-label="Application Menu" class="menubar">
<li role="none">
<button role="menuitem" type="button" class="menubar-item"
aria-haspopup="menu" aria-expanded="false"
popovertarget="filemenu">File</button>
<ul role="menu" focusgroup="menu"
id="filemenu" popover aria-label="File submenu" class="submenu">
<li role="none"><button type="button" class="submenu-item"
autofocus>New</button></li>
<li role="none"><button type="button" class="submenu-item">Open</button></li>
<li role="none"><button type="button" class="submenu-item">Save</button></li>
</ul>
</li>
<!-- More menu items... -->
</ul>
इसे लाइव आज़माएं:
मेन्यू और मेन्यूबार का पैटर्न > पॉपओवर सबमेन्यू वाला मेन्यूबार.
मेन्यू बार में, बाएं और दाएं नेविगेट करने के लिए inline मॉडिफ़ायर का इस्तेमाल किया जाता है. वहीं, सबमेन्यू में ऊपर और नीचे नेविगेट करने के लिए block मॉडिफ़ायर का इस्तेमाल किया जाता है. नेस्ट किए गए फ़ोकस ग्रुप पूरी तरह से स्वतंत्र होते हैं, इसलिए वे एक-दूसरे में दख़ल नहीं देते.
Radiogroup
तीर के निशान वाली कुंजियों से नेविगेट करने और स्टाइलिंग को पूरी तरह से कंट्रोल करने की सुविधा वाला कस्टम रेडियो ग्रुप.
<div focusgroup="radiogroup" aria-label="Favorite color">
<span aria-checked="false" tabindex="0">Red</span>
<span aria-checked="false" tabindex="0">Green</span>
<span aria-checked="true" tabindex="0" focusgroupstart >Blue</span>
<span aria-checked="false" tabindex="0">Purple</span>
</div>
इसे लाइव आज़माएं: रेडियो ग्रुप पैटर्न > तुलना: नेटिव बनाम फ़ोकसग्रुप.
focusgroup एट्रिब्यूट, ऐरो बटन से नेविगेट करने की सुविधा को मैनेज करता है. हालांकि, आपको चुनने का कोड लागू करना होगा. इस डेमो में, JavaScript कोड, चुने गए स्टेटस को मैनेज करता है. इसके लिए, वह aria-checked एट्रिब्यूट का इस्तेमाल करता है.
मुख्य सिद्धांत
फ़ोकस ग्रुप में आइटम की भागीदारी
focusgroup को मान्य व्यवहार पर सेट करने वाले एलिमेंट के सभी क्रम से फ़ोकस किए जा सकने वाले डिसेंडेंट को उस फ़ोकसग्रुप में शामिल माना जाता है. इसका मतलब है कि नेगेटिव tabindex वाले एलिमेंट को नहीं माना जाता. हालांकि, <button> जैसे फ़ोकस करने लायक एलिमेंट और वे एलिमेंट जिनमें आपने नॉन-नेगेटिव tabindex तय किया है उन्हें माना जाता है.
टैब स्टॉप
आपको tabindex वैल्यू मैनेज करने की ज़रूरत नहीं है. अगर कई डिसेंडेंट को स्वाभाविक रूप से टैब किया जा सकता है (उदाहरण के लिए, कई <button> एलिमेंट), तो भी focusgroup उन्हें एक ही टैब स्टॉप में छोटा कर देता है. ब्राउज़र यह तय करता है कि किसी भी समय कौनसे आइटम को टैब किया जा सकता है. इसे लाइव आज़माएं:
टूलबार पैटर्न > नो टैब इंडेक्स मैनेजमेंट नीडेड.
पिछली बार फ़ोकस की गई यादें
डिफ़ॉल्ट रूप से, जब कोई उपयोगकर्ता फ़ोकसग्रुप से बाहर निकलने के लिए Tab दबाता है और बाद में वापस आता है, तो फ़ोकस उस आइटम पर वापस आ जाता है जिस पर आखिरी बार फ़ोकस किया गया था. यह बड़ी सूचियों और टूलबार के लिए ज़रूरी है, ताकि उपयोगकर्ता अपनी जगह न भूलें. जब आपको फ़ोकस को हमेशा पहले एलिमेंट पर वापस लाना हो, तब इस व्यवहार को बंद करने के लिए nomemory मॉडिफ़ायर का इस्तेमाल करें. इसके अलावा, अगर आपको focusgroupstart का इस्तेमाल करके, फ़ोकस किए गए शुरुआती एलिमेंट को कंट्रोल करना है, तब भी इस मॉडिफ़ायर का इस्तेमाल करें.
नेस्टेड फ़ोकसग्रुप
हर फ़ोकसग्रुप डिक्लेरेशन, एक अलग स्कोप बनाता है. नेस्ट किए गए फ़ोकसग्रुप में, ऐन्सेस्टर के ऐरो नेविगेशन से अपने-आप ऑप्ट आउट हो जाता है. Tab बटन का इस्तेमाल करके, फ़ोकस ग्रुप के बीच में जाएं. साथ ही, ऐरो बटन का इस्तेमाल करके, मौजूदा फ़ोकस ग्रुप में नेविगेट करें. इसे लाइव आज़माएं: अतिरिक्त कॉन्सेप्ट > नेस्टेड फ़ोकसग्रुप.
शैडो डीओएम की सुविधा
Focusgroup, डिफ़ॉल्ट रूप से शैडो डीओएम की सीमाओं पर लागू होता है. शैडो होस्ट पर डिक्लेयर किए गए फ़ोकसग्रुप में, उस होस्ट के शैडो ट्री में फ़ोकस किए जा सकने वाले एलिमेंट शामिल होते हैं. अगर आपको ऑप्ट-आउट करना है, तो अपने कॉम्पोनेंट के शैडो ट्री में focusgroup="none" का इस्तेमाल करें.
कुंजी के टकराव को हैंडल करना
फ़ोकसग्रुप में मौजूद कुछ एलिमेंट, जैसे कि <input>, <textarea>, और अन्य कंट्रोल, ऐरो बटन का इस्तेमाल अपने हिसाब से करते हैं. जब फ़ोकसग्रुप की नेविगेशन कुंजियों और नेटिव एलिमेंट की ऐरो की के व्यवहार में टकराव होता है, तब:
- ऐरो कुंजियों का इस्तेमाल इंटरैक्टिव एलिमेंट करता है. उदाहरण के लिए, टेक्स्ट कर्सर को मूव करने के लिए. साथ ही, focusgroup इसमें कोई रुकावट नहीं डालता.
- Tab या Shift+Tab, डिफ़ॉल्ट रूप से एस्केप करने का तरीका उपलब्ध कराता है. इससे उपयोगकर्ता, Tab नेविगेशन का इस्तेमाल करके फ़ोकसग्रुप में "फिर से शामिल" हो सकता है.
ये एस्केप बिहेवियर सिर्फ़ तब लागू होते हैं, जब असल की कॉन्फ़्लिक्ट हो;
जिन ऐक्सिस में कॉन्फ़्लिक्ट नहीं है उन पर इसका कोई असर नहीं पड़ता. कुछ खास एलिमेंट के लिए, फ़ोकस ग्रुप के ऐरो बटन के व्यवहार को बदलने के लिए, preventDefault() को keydown इवेंट पर कॉल किया जा सकता है. इसका मतलब है कि इनपुट और टेक्स्ट एरिया को किसी भी व्यवहार को बदले बिना, फ़ोकसग्रुप में शामिल किया जा सकता है.
अगर आपने फ़ोकसग्रुप में शामिल अपने एलिमेंट में मुख्य हैंडलर जोड़े हैं, तो मिलते-जुलते एस्केप मैकेनिज़्म का इस्तेमाल करें, ताकि उपयोगकर्ता ग्रुप के बाकी एलिमेंट ऐक्सेस कर सकें.
डीप डिसेंडेंट डिस्कवरी
फ़ोकसग्रुप आइटम का, फ़ोकसग्रुप कंटेनर का डायरेक्ट चाइल्ड होना ज़रूरी नहीं है.
ब्राउज़र, फ़ोकसग्रुप में शामिल होने के लिए, क्रम से फ़ोकस किए जा सकने वाले सभी डिसेंडेंट (नॉन-नेगेटिव tabindex) पर विचार करता है. हालांकि, ऐसा तब तक होता है, जब तक वे नेस्ट किए गए फ़ोकसग्रुप में न हों या उन्होंने focusgroup="none" का इस्तेमाल करके ऑप्ट-आउट न किया हो.
<div focusgroup="toolbar" aria-label="Nested wrappers">
<div>
<span>
<button type="button">Alpha</button>
</span>
<span>
<button type="button">Beta</button>
</span>
<span>
<button type="button">Gamma</button>
</span>
</div>
</div>
ऐरो बटन से नेविगेट करने की सुविधा काम करती है. भले ही, बटन <div> और <span> रैपर में नेस्ट किए गए हों. फ़्लैट-लिस्ट की कोई ज़रूरत नहीं है. इसलिए, स्टाइलिंग के लिए रैपर एलिमेंट का इस्तेमाल किया जा सकता है.
इसे लाइव आज़माएँ: अन्य कॉन्सेप्ट > डीप डिसेंडेंट.
reading-flow प्रॉपर्टी के साथ इंटिग्रेशन
क्रम से (टैब) और दिशा के हिसाब से (ऐरो कुंजी) नेविगेट करने की सुविधा, सीएसएस reading-flow प्रॉपर्टी का पालन करती है. ऐसा तब होता है, जब यह प्रॉपर्टी मौजूद हो. यह सुविधा, DOM सोर्स ऑर्डर के बजाय विज़ुअल रीडिंग ऑर्डर का पालन करती है.
इससे यह पक्का होता है कि ऐरो की से नेविगेट करने पर, उपयोगकर्ताओं को स्क्रीन पर दिखने वाले लेआउट से मेल खाने वाला लेआउट दिखे.
<div focusgroup="toolbar" aria-label="Visual order"
style="display: flex; flex-direction: row-reverse; reading-flow: flex-visual;">
<button type="button">A (DOM first)</button>
<button type="button">B (DOM second)</button>
<button type="button">C (DOM third)</button>
</div>
DOM का क्रम A, B, C है, जबकि विज़ुअल क्रम C, B, A है. ऐसा इसलिए है, क्योंकि लेआउट flex-direction: row-reverse का इस्तेमाल करता है. हालांकि, कोड में reading-flow: flex-visual का इस्तेमाल किया गया है. इसलिए, पढ़ने का क्रम फिर से A, B, C पर आ जाता है. साथ ही, focusgroup इस क्रम से मेल खाता है.
Tab दबाने पर, सबसे पहले C पर फ़ोकस होगा. इसके बाद, राइट ऐरो दबाने पर B पर फ़ोकस होगा. इसके बाद, A पर फ़ोकस होगा. इसे लाइव आज़माएं: अन्य कॉन्सेप्ट > सीएसएस रीडिंग-फ़्लो इंटिग्रेशन.
सुलभता
ARIA रोल का अनुमान लगाना
फ़ोकसग्रुप में, ब्राउज़र इस व्यवहार टोकन का इस्तेमाल करके कंटेनर और उसमें शामिल आइटम, दोनों के लिए कम से कम भूमिका का अनुमान लगाता है. इसका मतलब है कि जब focusgroup एट्रिब्यूट को किसी ऐसे एलिमेंट पर सेट किया जाता है जिसकी भूमिका सामान्य होती है, तो चुने गए व्यवहार के आधार पर सही भूमिका लागू होती है. जेनेरिक भूमिका वाले एलिमेंट या ऐसी भूमिका वाले बटन जिनमें आपकी तय की गई भूमिका नहीं है, उनमें शामिल आइटम की भूमिकाओं का अनुमान लगाया जाएगा. उदाहरण के लिए, यह एचटीएमएल:
<div focusgroup="tablist">
<button>Tab 1</button>
<button>Tab 2</button>
<button>Tab 3</button>
</div>
यह सुलभता ट्री बनाता है. भले ही, बटन पर कोई भूमिका तय न की गई हो:
+ tablist
|
+ tab
|
+ tab
|
+ tab
सीधे तौर पर भूमिका सेट करके, इसके काम करने के तरीके को हमेशा कंट्रोल किया जा सकता है.
सुलभता से जुड़ी बातें
फ़ोकसग्रुप बनाते समय, आपने जो व्यवहार चुना है उसका पालन करें.
फ़ोकस ग्रुप का इस्तेमाल, आपके बताए गए व्यवहार के मुताबिक होना चाहिए. यह इसलिए ज़रूरी है, ताकि सुलभता टूल का इस्तेमाल करने वाले लोग कॉन्टेंट को नेविगेट कर सकें और कस्टम कंट्रोल का इस्तेमाल कर सकें.
भूमिका का अनुमान लगाने की सुविधा, डिफ़ॉल्ट रूप से अच्छी भूमिकाएं तय करती है. हालांकि, सामान्य भूमिकाओं के अलावा अन्य भूमिकाओं वाले एलिमेंट का इस्तेमाल करते समय, यह पक्का करें कि उनकी भूमिका सही तरीके से सेट की गई हो. ऐसा इसलिए, ताकि वे अपनी भूमिका के हिसाब से काम कर सकें.
focusgroup का इस्तेमाल करते समय, ध्यान रखें कि लोगों को आपका कॉन्टेंट देखने के लिए, ऐरो बटन से स्क्रोल करने की ज़रूरत पड़ सकती है. कीबोर्ड का इस्तेमाल करने वाले व्यक्ति के लिए, आपके पेज पर मौजूद कॉन्टेंट को पढ़ने और उसे ऐक्सेस करने का विकल्प हमेशा उपलब्ध होना चाहिए.
सुविधा का पता लगाना
फ़ोकसग्रुप का इस्तेमाल आज से ही शुरू किया जा सकता है. हालांकि, यह सुविधा सभी ब्राउज़र पर पूरी तरह से काम नहीं करती. इसलिए, JavaScript में फ़ोकसग्रुप की सुविधा का पता लगाया जा सकता है:
if ('focusgroup' in HTMLElement.prototype) {
// focusgroup is supported.
} else {
// fall back to manual roving tabindex.
}
नतीजा
focusgroup एट्रिब्यूट, स्टैंडर्ड बॉडी के साथ मिलकर काम कर रहा है. साथ ही, हम Chromium में प्रोटोटाइप को बेहतर बनाने और एपीआई को बेहतर बनाने पर काम कर रहे हैं.
इसे आज़माएं और Open-UI GitHub के समस्या ट्रैकर में जाकर, फ़ोकस ग्रुप से जुड़ी समस्या की शिकायत करें. हमें खास तौर पर इन विषयों पर आपकी राय जाननी है:
- क्या आपके बनाए गए पैटर्न के लिए, एपीआई सही है?
- क्या कोई ऐसा पैटर्न या स्थिति है जिसके बारे में हमें जानकारी नहीं है?
- क्या ऐसे एलिमेंट हैं जिन पर focusgroup एट्रिब्यूट का इस्तेमाल नहीं किया जाना चाहिए?
- सुलभता से जुड़ी स्टोरी, आपके इस्तेमाल के उदाहरणों के लिए कैसे काम करती है?
वेब पर कीबोर्ड नेविगेशन को बेहतर बनाने में हमारी मदद करने के लिए धन्यवाद!
ज़्यादा जानें
- फ़ोकस ग्रुप के बारे में जानकारी
- इंटरैक्टिव डेमो (source)
- WHATWG एचटीएमएल से जुड़ी समस्या
- यूज़र इंटरफ़ेस (यूआई) के फ़ोकस ग्रुप से जुड़ी समस्याएं
- ARIA ऑथरिंग के तरीकों के बारे में गाइड
focusgroup को वापस लाने में मदद करने के लिए, Mason Freed, Sara Higley, Scott O'Hara, और Open-UI कम्यूनिटी के बाकी सदस्यों को धन्यवाद.