A11y डायलॉग के साथ एक्सेसिबल मोडल विंडोज का निर्माण करें

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

आप इन विंडो का उपयोग कर निर्माण कर सकते हैं शुद्ध सीएसएस लेकिन यह सबसे सुलभ समाधान नहीं है। इसके बजाय, बाहर की जाँच करें A11y डायलॉग, एक पूरी तरह से काम करने वाली मोडल विंडो जो फोकस पर रखती है पहले पहुंच.

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

यह एक विशिष्ट मोडल विंडो की तरह दिखाई देता है। लेकिन, यह स्क्रिप्ट ARIA टैग का उपयोग करता है सभी उपयोगकर्ताओं के लिए आधुनिक पहुँच का समर्थन करने के लिए.

डिफ़ॉल्ट रूप से, A11y डायलॉग भी टचस्क्रीन का समर्थन करता है, इसलिए टैपिंग पर क्लिक करने जैसा ही प्रभाव पड़ता है। आप इसे बंद करने के लिए खिड़की के बाहर कहीं भी क्लिक या टैप कर सकते हैं, या कंप्यूटर पर ईएससी कुंजी दबा सकते हैं.

किसी तरह, यह पुस्तकालय बहुत छोटा है, केवल 1.2kb, सभी सीएसएस और जेएस कोड सहित। यह पूरी तरह से सुलभ के शीर्ष पर इसे हल्का बनाता है.

आप के माध्यम से पढ़ने के द्वारा और अधिक सीख सकते हैं गिटहब रेपो और A11y डायलॉग है स्वयं के प्रलेखन पृष्ठ, भी। इसमें एक अनुभाग शामिल है स्थापना और सेटअप पूर्ण शुरुआती के लिए। को कवर करने वाला एक लंबा खंड भी है बटन जोड़ने के लिए DOM API आपके पृष्ठ के लिए जो मोडल विंडो को खोल (या बंद) कर सकता है.

यदि आप कोशिश कर रहे हैं अधिक सुलभ वेबसाइटों का निर्माण करें गंभीरता से अपनी परियोजनाओं में A11y संवाद चलाने पर विचार करें। आप ऐसा कर सकते हैं स्रोत कोड प्राप्त करें GitHub से या इसे npm या Bower जैसे पैकेज मैनेजर से डाउनलोड करें.

सेटअप और बुनियादी जावास्क्रिप्ट सुविधाओं के बारे में अधिक जानने के लिए मुख्य पृष्ठ पर एक नज़र डालें। यह पुस्तकालय के साथ आता है ARIA पहुंच की तुलना में बहुत अधिक है, इसलिए यह परीक्षण के लायक है यदि आप अपने मोडल विंडो की सुविधाओं का विस्तार करना चाहते हैं.