कॉम्बोबॉक्स और स्वतः पूर्णता सही तरीके से
ऐसा खोजने योग्य चयन बनाएँ जिसे स्क्रीन रीडर समझ सकें।
कॉम्बोबॉक्स और स्वतः पूर्णता सही तरीके से, CoddyKit पर Web Accessibility Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Web Accessibility Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
कॉम्बोबॉक्स क्या है
कॉम्बोबॉक्स एक ऐसा इनपुट है जो सुझावों वाले पॉप-अप से जुड़ा होता है। इसे खोज बॉक्स की तरह समझिए, जो आपके लिखते ही मेल खाते परिणाम दिखाता है। 🔍
साथ काम करने वाले दो भाग
कॉम्बोबॉक्स में उपयोगकर्ता के लिखने के लिए एक पाठ इनपुट और विकल्पों की एक अलग पॉप-अप सूची होती है। ARIA दोनों को जोड़ता है, ताकि स्क्रीन रीडर उनका संबंध समझ सके।
इनपुट पर भूमिका
पाठ इनपुट पर ही role="combobox" रखिए। इससे सहायक तकनीक को पता चलता है कि यहाँ लिखने पर विकल्पों की सूची दिखाई देगी।
<input role="combobox" aria-expanded="false"
aria-controls="results" type="text">पॉप-अप की ओर संकेत कीजिए
इनपुट पर aria-controls का उपयोग कीजिए और उसे पॉप-अप की id पर सेट कीजिए। यह फ़ील्ड को खुलने-बंद होने वाली सूची से जोड़ता है।
खुला या बंद होने की घोषणा कीजिए
सूची दिखने पर aria-expanded को true और छिपने पर false कीजिए। स्क्रीन रीडर इस विशेषता से पॉप-अप की स्थिति बताता है।
पॉप-अप एक सूची है
सुझावों के कंटेनर को role="listbox" और हर सुझाव को role="option" दीजिए। इससे उपयोगकर्ताओं को परिचित और नेविगेट की जा सकने वाली सूची मिलती है।
<ul id="results" role="listbox">
<li role="option" id="o1">Apple</li>
</ul>फ़ोकस इनपुट में बना रहता है
युक्ति यह है: कीबोर्ड फ़ोकस कभी इनपुट से बाहर नहीं जाता। उपयोगकर्ता लिखते रहते हैं, जबकि तीर की कुंजियाँ विकल्पों में हाइलाइट को आगे बढ़ाती हैं।
aria-activedescendant
इनपुट के aria-activedescendant को हाइलाइट किए गए विकल्प की id पर संकेतित कीजिए। वास्तविक फ़ोकस हटाए बिना स्क्रीन रीडर सक्रिय विकल्प को इसी तरह पढ़ता है।
<input role="combobox"
aria-activedescendant="o1">अपेक्षित कुंजियाँ
ऊपर और नीचे तीर विकल्पों में चलते हैं, Enter सक्रिय विकल्प चुनता है और Escape पॉप-अप बंद करता है। ये कुंजियाँ सीधे APG से आती हैं।
चयनित विकल्प को चिह्नित कीजिए
हाइलाइट किए गए विकल्प पर aria-selected="true" और बाकी पर false सेट कीजिए। एकल-चयन कॉम्बोबॉक्स में एक समय पर केवल एक विकल्प चुना जाना चाहिए।
स्वतः पूर्णता का व्यवहार
सुझाव कैसे दिखाई दें, यह बताने के लिए aria-autocomplete का उपयोग कीजिए: फ़िल्टर किए गए मेनू के लिए "list" या पाठ को पंक्ति में पूरा करने पर "both"।
त्वरित जाँच
उपयोगकर्ता आपके कॉम्बोबॉक्स के सुझावों में नीचे की ओर तीर चला रहा है। कौन-सी विशेषता स्क्रीन रीडर को बताती है कि कौन-सा विकल्प सक्रिय है?
पुनरावलोकन
कॉम्बोबॉक्स एक इनपुट और सूची का संयोजन है: aria-controls और aria-expanded से दोनों को जोड़िए, फ़ोकस फ़ील्ड में रखिए और aria-activedescendant से सक्रिय विकल्प पर नज़र रखिए। ✅
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 30
- पाठ
- 120
अक्सर पूछे जाने वाले प्रश्न
क्या “कॉम्बोबॉक्स और स्वतः पूर्णता सही तरीके से” पाठ निःशुल्क है?
हाँ—“कॉम्बोबॉक्स और स्वतः पूर्णता सही तरीके से” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Web Accessibility Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Web Accessibility Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“कॉम्बोबॉक्स और स्वतः पूर्णता सही तरीके से” में मैं क्या सीखूँगा?
ऐसा खोजने योग्य चयन बनाएँ जिसे स्क्रीन रीडर समझ सकें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Web Accessibility Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Web Accessibility Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Web Accessibility Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।
“कॉम्बोबॉक्स और स्वतः पूर्णता सही तरीके से” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Web Accessibility Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Web Accessibility Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- APG पढ़ना: पैटर्न, कुंजियाँ और उदाहरण
- कॉम्बोबॉक्स और स्वतः पूर्णता सही तरीके से
- मेनू, मेनुबार और मेनू बटन
- ट्रीग्रिड और अन्य उन्नत पैटर्न