आपले एकल पृष्ठ अॅप्स स्क्रीन वाचकांसह कार्य करा

एकल-पृष्ठ अ‍ॅप्स दृश्य बदल संप्रेषण करण्याच्या बाबतीत एक महत्त्वपूर्ण प्रवेशयोग्यता आव्हान उभे करतात. पृष्ठ रीफ्रेश केल्याशिवाय, स्क्रीन वाचक हे महत्त्वाचे UI बदल निवडत नाहीत, जेणेकरून दृष्टीदोष असलेल्या वापरकर्त्यांना गोंधळ उडालेला आणि नकळत ठेवले जाईल.

एक उपाय म्हणजे पृष्ठ शीर्षकावर आधारित संदेश तयार करणे आणि एखाद्या नवीन दृश्यासाठी लोड झाले आहे की उपयुक्त संदेशाद्वारे स्पष्टपणे घोषित करण्यासाठी एआरआयए थेट प्रदेशाचा लाभ घ्या. प्रथम व्यू कॉन्टेन्ट अद्यतनित केले जाते तेव्हा म्हणतात की एक फंक्शन तयार करा. AngularJS या हेतूसाठी एक $ व्ह्यू कॉन्टेन्टलोडेड इव्हेंट प्रदान करते. कंट्रोलर कोडमध्ये, इव्हेंट ऐका आणि फंक्शनला कॉल करा (कॉफीस्क्रिप्टमध्ये):

अ‍ॅप कॉन्ट्रॉलर ’पेज कंट्रोलर’, ($ स्कोप, $ लोकेशन, $ HTTP) ->. व्याप्ती. $ ’’ व्ह्यूकंटेन्टलॉडेड ’’ वर, घोषित_ व्ह्यू_लोड केलेले

घोषित_दृश्य_भारित कार्यामध्ये पृष्ठाचे शीर्षक अद्यतनित करा आणि संदेश घोषित करा. एकल-पृष्ठ फ्रेमवर्क पृष्ठ शीर्षकास स्वयंचलितपणे अद्यतनित करीत नाहीत, पृष्ठ शीर्षक सध्याच्या दृश्यासह समक्रमित ठेवल्यास वापरकर्त्याचे दृश्यावरील आकलन सुधारते.

हे करण्याचा एक मार्ग म्हणजे दृश्याचे शीर्षक संचयित करण्यासाठी दृश्यात कुठेतरी डेटा विशेषता वापरणे:

डॉक्युमेंट.टाइटल = $ (’[डेटा-व्ह्यूटीटल]’). डेटा ’व्ह्यूटाईल’

आता अद्यतनित पृष्ठ शीर्षक वापरून एक संदेश तयार करा आणि त्याची घोषणा करा:

ann. घोषित करा (कागदजत्र. शीर्षक + ’, पहा लोड’)

ann. घोषणा () एक jQuery फंक्शन आहे जी सामग्रीची घोषणा करण्यासाठी एकल, दृश्यमान लाइव्ह प्रदेश वापरते. हा दृष्टीकोन थेट प्रांतांच्या तदर्थ वापराच्या तुलनेत कोड आणि डीबगिंग प्रयत्नांना सुलभ करण्यात मदत करतो. तथापि, लक्षात ठेवण्याच्या काही उत्तम सराव आहेत.

प्रथम, एरिया-लाइव्ह = "विनम्र | ठाम" वापरून सामग्रीची घोषणा करण्यासाठी आपल्या पृष्ठामध्ये एकच 'उद्घोषक' थेट प्रदेश तयार करा. थेट प्रांताच्या भूमिकेसह (उदा. रोल = "चेतावणी | टाइमर | लॉग") इतर कोणतेही थेट प्रक्षेत्र वापरू नका. थेट प्रांत:

div aria-live = "विनम्र" आयडी = "उद्घोषक"> (येथे जोडलेला किंवा अद्यतनित केलेला मजकूर जाहीर केला जाईल) / div>

दुसरे, सामग्री अद्यतनित केल्यावर थेट प्रदेशातील सामग्री साफ करा. हे वापरकर्त्यांना जुन्या संदेशांवर अडथळा आणण्यापासून प्रतिबंधित करते.

शेवटी, कोणत्याही ibilityक्सेसीबीलिटी तंत्रानुसार, $. घोषणा () ला सभेत वापरा. हे केवळ महत्त्वपूर्ण यूआय अद्यतने संप्रेषणासाठी वापरले जावे.

शब्द: पॅट्रिक फॉक्स

पॅट्रिक फॉक्स ऑस्टिनमधील रझॉरफिश येथे वेब यूआय तंत्रज्ञान संचालक आहेत. हा लेख मूळतः नेट मासिकाच्या 271 च्या अंकात आला होता.

हे आवडले? हे वाचा!

• डिजिटल ’sक्सेसीबीलिटीसाठी डिझाइनरचे मार्गदर्शक
• सर्वोत्कृष्ट विनामूल्य स्क्रिप्ट फॉन्ट
• विनामूल्य भित्तीचित्र फाँट निवड