एकल पृष्ठ अनुप्रयोगों (एआरआईए आदि) में अभिगम्यता

Question

एसपीए (एंगुलरजेएस) पहुंच योग्य (स्क्रीन पाठकों आदि के लिए) बनाने का सबसे अच्छा तरीका क्या है?

मुझे एरिया विनिर्देश के साथ कोई अनुभव नहीं है, और मुझे आश्चर्य है कि यह एक ही पृष्ठ एप्लिकेशन पर सभी कामों पर होगा।

विकास करते समय आम नुकसान क्या हैं?

विकासशील होने पर पहुंच को कैसे डिबग और परीक्षण किया जा सकता है?

Answer 1

यह यहां मुद्दों के व्यापक रूप से कवर कर सकता है। तो मैं उम्मीदों में से कुछ मूलभूत बातों के माध्यम से जाऊंगा कि यह आपको अपने रास्ते पर शुरू करता है, आम नुकसान, जैसा कि यह था।

सबसे पहले, टिप्पणीकारों की तरह कहा, हाँ, आपको यह सुनिश्चित करना होगा कि एरिया टैग सही तरीके से नियोजित हों। तो, कहें, अगर आप एक बटन के रूप में एक div का पर्दाफाश करना चाहते हैं, तो आपके पास ऐसा कुछ होगा।

<div id="mysuperflashybutton" ... role="button" aria-label="Super flashy" tabindex="0"></div> 

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

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

जैसा कि बताया गया है, कभी-कभी आप उनके लिए अपना ध्यान केंद्रित करके कीबोर्ड नेविगेटर/स्क्रीन रीडर उपयोगकर्ताओं की सहायता कर सकते हैं। एक उदाहरण होगा यदि वे एक बटन पर क्लिक करते हैं और मेनू प्रकट होता है। आप मेनू के पहले लिंक पर डाल करने के लिए कुछ इस तरह कर सकता है:

$('#linkmenuactivator').on("click", function() { 
    $('#linkmenu').find('li:first a').focus(); 
}); 

मुझे पता है कि JQuery में है, मैं AngularJS से परिचित नहीं हूँ, लेकिन मेरी संक्षिप्त दृश्य मुझे लगता है कि यह एक ViewModel नियंत्रक के अधिक है बनाता है JQuery जैसे कुछ यूआई विशिष्ट के विपरीत, लेकिन अगर मैं गलत हूं तो मुझे सही करें।

यदि आप स्क्रीन पर फंकी चीजें कर रहे हैं तो लाइव क्षेत्रों का उपयोग किया जा सकता है जो स्क्रीन रीडर उपयोगकर्ता को कोई समझ नहीं पाएंगे। जानकारी को टेक्स्ट रूप से बाहर रखने के लिए आप इन क्षेत्रों के तत्वों को टेक्स्ट लिख सकते हैं। ऐसा करने का सबसे आसान तरीका क्रमशः महत्वपूर्ण संदेशों या सामान्य स्थिति अपडेट के लिए चेतावनी या स्थिति की भूमिका का उपयोग करना है। ये भूमिकाएं डिफ़ॉल्ट रूप से आपके तत्व को एक लाइव क्षेत्र बनाती हैं, और स्क्रीन पाठक को वहां कोई भी टेक्स्ट परिवर्तन की सूचना दी जाएगी। फिर बाद में JQuery में

<p id="ariastatusbox" ... role="status"></p> 

(आप का उदाहरण ले जा रहा एक दस्तावेज़ लोड और में यह fading जब आप इसे मिल गया है):: तो एक त्वरित उदाहरण कुछ इस प्रकार दिखाई देगा

$('#maincontent').fadeIn(function() { 
    $('#ariastatusbox').text('Document loaded'); 
}); 

यह स्क्रीन रीडर को यह बताएगा कि दस्तावेज़ लोड हो गया है और स्क्रीन पर पढ़ने के लिए तैयार है। लाइव क्षेत्र थोड़ा मुश्किल हो सकते हैं, लेकिन यदि आप उन्हें मास्टर कर सकते हैं तो वे एक शक्तिशाली स्वादिष्ट हैं।

अंत में, पहुंच के परीक्षण के रूप में, कुछ विकल्प हैं। हाल ही में जो कुछ मैंने हाल ही में ठोकर खाया है वह Wave है जो एक ऑनलाइन परीक्षण उपकरण प्रतीत होता है। यह पहली नज़र से अच्छा दिखता है, आप इसे आज़मा सकते हैं।एक और विकल्प स्क्रीन रीडर को अपने आप पकड़ना और इसे जाने देना है। मैं NVDA की अनुशंसा करता हूं जो एक ओपन-सोर्स (इसलिए मुफ्त) स्क्रीन रीडर है। यह मेरी पसंद का स्क्रीन रीडर है और बहुत अच्छा है। इसके साथ बंडल किए गए सिंथेसाइज़र में सबसे अच्छी आवाज नहीं है, लेकिन अन्य विकल्प भी हैं, या आप भाषण आउटपुट को बंद कर सकते हैं और स्पीच व्यूअर का उपयोग करके यह कहने के लिए एक टेक्स्टुअल डिस्प्ले देख सकते हैं। एक अंतिम विकल्प एक परीक्षण ड्राइव के लिए अपने ऐप लेने के लिए अभिगम्यता परीक्षकों से पूछना है। उपभोक्ता उत्पादों या उन ब्रैकेट्स में चीजों के लिए, अंधे लोग और सुलभ तकनीक के अन्य उपयोगकर्ता पूछने पर स्वयंसेवक करने के लिए स्वयंसेवक हो सकते हैं। अधिक व्यावसायिक उन्मुख ऐप्स के लिए जो आप सार्वजनिक मंच में नहीं चाहते हैं, ऐसे कई संगठन हैं जो वेब अनुप्रयोगों को सुलभ बनाने के मुद्दों पर परामर्श कर सकते हैं।

यह किसी भी तरह से सुलभता पर एक व्यापक मैनुअल नहीं है, मैं वास्तव में आपको सही दिशा में किकस्टार्ट करने की उम्मीद कर रहा था। थोड़ा गहराई से देखने के लिए, ARIA roles दस्तावेज को देखने का प्रयास करें (यह सब मदद करेगा लेकिन कोड परिभाषाओं के शीर्षक में है), और उस पर ARIA States and Properties documentation से। वे दोनों थोड़ा सूखे हो सकते हैं, लेकिन एआरआईए के अनुसार आप जो कुछ भी उपयोग कर सकते हैं उसकी पूरी सूची भी हो सकती है। Google, मुझे आशा है कि कुछ ट्यूटोरियल भी प्राप्त करने में सक्षम होना चाहिए।

मुझे आशा है कि इससे आपको प्रारंभ करने में मदद मिलेगी। सौभाग्य!