अपने सिंगल पेज ऐप्स को स्क्रीन रीडर्स के साथ काम करें

जब दृश्य परिवर्तनों को संप्रेषित करने की बात आती है तो सिंगल-पेज ऐप्स एक महत्वपूर्ण पहुंच चुनौती पेश करते हैं। पेज रिफ्रेश किए बिना, स्क्रीन रीडर इन महत्वपूर्ण यूआई परिवर्तनों को नहीं उठाते हैं, जिससे दृष्टिबाधित उपयोगकर्ता भ्रमित और अनजान हो जाते हैं।

एक समाधान पृष्ठ शीर्षक के आधार पर एक संदेश बनाना है, और एक उपयोगी संदेश के माध्यम से स्पष्ट रूप से घोषणा करने के लिए एक एआरआईए लाइव क्षेत्र का लाभ उठाना है, कि एक नया दृश्य लोड हो गया है। सबसे पहले एक फंक्शन बनाएं जिसे व्यू कॉन्टेंट अपडेट होने पर कहा जाता है। AngularJS इस उद्देश्य के लिए $viewContentLoaded ईवेंट प्रदान करता है। नियंत्रक कोड में, घटना को सुनें और एक फ़ंक्शन को कॉल करें (कॉफ़ीस्क्रिप्ट में):

ऐप.कंट्रोलर 'पेजकंट्रोलर', ($ स्कोप, $ लोकेशन, $ एचटीटीपी) -> $ स्कोप। $ ऑन '$viewContentLoaded', अनाउंस_व्यू_लोडेड

अनाउंस_व्यू_लोडेड फंक्शन में, पेज टाइटल को अपडेट करें और मैसेज की घोषणा करें। जबकि एकल-पृष्ठ फ़्रेमवर्क स्वचालित रूप से पृष्ठ शीर्षक अपडेट नहीं करते हैं, पृष्ठ शीर्षक को वर्तमान दृश्य के साथ समन्वयित रखने से उपयोगकर्ताओं की दृश्य की समझ में सुधार होता है।

ऐसा करने का एक तरीका दृश्य शीर्षक को संग्रहीत करने के लिए कहीं भी डेटा विशेषता का उपयोग करना है:

दस्तावेज़। शीर्षक = $ ('[डेटा-व्यूटाइटल]')। डेटा 'व्यूटाइटल'

अब अद्यतन पृष्ठ शीर्षक का उपयोग करके एक संदेश बनाएं, और इसकी घोषणा करें:

$.घोषणा (दस्तावेज़.शीर्षक + ', लोड किया हुआ देखें')

$.announce() एक jQuery फ़ंक्शन है जो सामग्री की घोषणा करने के लिए एकल, गैर-दृश्यमान लाइव क्षेत्र का उपयोग करता है। यह दृष्टिकोण लाइव क्षेत्रों के तदर्थ उपयोग की तुलना में कोड और डिबगिंग प्रयासों को सरल बनाने में मदद करता है। हालांकि, याद रखने के लिए कुछ सर्वोत्तम प्रथाएं हैं।

सबसे पहले, aria-live="polite|assertive" का उपयोग करके सामग्री की घोषणा करने के लिए अपने पृष्ठ में एक एकल 'उद्घोषक' लाइव क्षेत्र बनाएं। लाइव रीजन रोल्स (उदा. role="alert|timer|log") सहित किसी भी अन्य लाइव क्षेत्र का उपयोग न करें। एक उदाहरण लाइव क्षेत्र:

डिव एरिया-लाइव = "विनम्र" आईडी = "उद्घोषक"> (यहां जोड़ा गया या अपडेट किया गया पाठ घोषित किया जाएगा) / div>

दूसरा, सामग्री को अपडेट करने के तुरंत बाद लाइव क्षेत्र की सामग्री को साफ़ करें। यह उपयोगकर्ताओं को पुराने संदेशों पर ठोकर खाने से रोकता है।

अंत में, किसी भी एक्सेसिबिलिटी तकनीक की तरह, $.announce() का विवेकपूर्ण तरीके से उपयोग करें। इसका उपयोग केवल महत्वपूर्ण UI अपडेट को संप्रेषित करने के लिए किया जाना चाहिए।

शब्दों: पैट्रिक फॉक्स

पैट्रिक फॉक्स ऑस्टिन में रेजरफिश में वेब यूआई प्रौद्योगिकी निदेशक हैं। यह लेख मूल रूप से नेट पत्रिका के अंक २७१ में छपा था।

ये पसंद आया? ये पढ़ सकते हैं!

• डिजिटल एक्सेसिबिलिटी के लिए डिज़ाइनर गाइड guide
• सबसे अच्छा मुफ्त स्क्रिप्ट फोंट
• मुफ्त भित्तिचित्र फ़ॉन्ट चयन