कुल्हाड़ी उपलब्धता परीक्षण पुस्तकालय का उपयोग कर आवेदन को सुलभ बनाना

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


प्रतिक्रिया-कुल्हाड़ी उपलब्धता परीक्षण के परिणाम दिखाती है

बस एक अच्छा ऐप और एक महान के बीच अंतर क्या है? पहुँच में!

विवरण के बारे में मत भूलना। कुछ उपयोगकर्ता अपने स्वयं के कीबोर्ड का उपयोग करके आपके एप्लिकेशन के इंटरफ़ेस को नियंत्रित करना चाहते हैं, कुछ जल्दी से आगे बढ़ने के लिए टैब जैसी गर्म कुंजियों का उपयोग करेंगे, और नेत्रहीन उपयोगकर्ता भी आपके ब्लॉग की सदस्यता ले सकते हैं।

उत्पाद को सभी के लिए सुलभ बनाने के लिए, आपको कुल्हाड़ी उपलब्धता परीक्षण लाइब्रेरी की आवश्यकता है।


कुल्हाड़ी कोर

कुल्हाड़ी उपलब्धता परीक्षण पुस्तकालय दर्शन

इंटरनेट वास्तव में एक समावेशी स्थान बन जाएगा, जब डेवलपर्स हमेशा पहुंच के लिए अपनी परियोजनाओं का परीक्षण करेंगे और "सस्ती" कोडिंग के सिद्धांतों को लागू करना शुरू करेंगे।

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

कुल्हाड़ी पुस्तकालय विशेषज्ञों द्वारा उपयोग किए जाने वाले सभी आधुनिक ब्राउज़रों, उपकरणों और परीक्षण वातावरण के साथ संगत है। इसके लिए धन्यवाद, एक्सेसिबिलिटी परीक्षण को किसी अन्य परीक्षण का हिस्सा बनाया जा सकता है जिसे आपकी टीम रोजाना करती है (उदाहरण के लिए, यूनिट परीक्षण, एकीकरण परीक्षण, ब्राउज़र परीक्षण, आदि)। विकास के प्रारंभिक चरण में उपलब्धता परीक्षण उपकरणों का उपयोग करने से समय और संसाधनों की बचत होगी, साथ ही साथ आपको बहुत परेशानी से भी बचाया जा सकेगा।

ऐक्स मैनिफेस्टो

• ax एक ओपन सोर्स प्रोजेक्ट है।
• इसमें झूठी सकारात्मकता नहीं है (बग्स की गिनती नहीं है)।
• ax सभी आधुनिक ब्राउज़रों और किसी भी टूल, प्लेटफ़ॉर्म, लाइब्रेरी और वातावरण में काम करता है।
• कुल्हाड़ी एक प्रमुख डिजिटल एक्सेस कंपनी ( Deque Systems ) द्वारा समर्थित है।
• यह पुस्तकालय स्वचालित परीक्षण के लिए मौजूदा कार्यात्मक / स्वीकृति उपकरणों के साथ आसानी से एकीकृत करता है।
• कुल्हाड़ी स्वचालित रूप से निर्धारित करती है कि मूल्यांकन के संदर्भ के आधार पर कौन से नियम चलते हैं।
• कुल्हाड़ी आंतरिक स्मृति जुड़नार, स्थिर जुड़नार, एकीकरण परीक्षण और आईफ्रेम अनंत घोंसले का समर्थन करती है।
• कुल्हाड़ी एक अत्यंत लचीला विन्यास है।

रिएक्ट के साथ शुरुआत करना

GitHub प्रतिक्रिया-कुल्हाड़ी पृष्ठ

एनपीएम या यार्न के साथ मॉड्यूल स्थापित करें।

NPM:

npm install --save-dev react-axe 

यार्न:

 yarn add react-axe 

हम मॉड्यूल लॉन्च करते हैं

हम निर्यात किए गए फ़ंक्शन को कॉल करते हैं, प्रतिक्रिया और रिएक्टडॉम ऑब्जेक्ट्स और मिलीसेकंड में एक समय की देरी से गुजरते हैं, जिसे घटक में प्रत्येक परिवर्तन और विश्लेषण के प्रारंभ समय के बीच ट्रैक किया जाएगा।

 const React = require('react'); const ReactDOM = require('react-dom'); if (process.env.NODE_ENV !== 'production') { const axe = require('react-axe'); axe(React, ReactDOM, 1000); } 

बिना ढाँचे के चल रहा है

पहले axe-core पैकेज स्थापित करें।

 npm install axe-core --save-dev 

एपीआई पैकेज संरचना

कुल्हाड़ी-कोर एपीआई पैकेज में शामिल हैं:

• axe.js - परीक्षण साइट (एपीआई) में जोड़ा जाने वाला जावास्क्रिप्ट फ़ाइल;
• axe.min.js उपरोक्त फ़ाइल का एक छोटा संस्करण है।

प्रत्येक iFrame जुड़नार या परीक्षण प्रणाली में एक जावास्क्रिप्ट फ़ाइल जोड़ें।

 <script src="node_modules/axe-core/axe.min.js"></script> 

फिर हम प्रत्येक परीक्षण बिंदु पर कॉल जोड़ते हैं, जहां यह दिखाई देता है या एक नया इंटरफ़ेस तत्व दिखाई देता है।

 axe.run(function (err, results) { if (err) throw err; ok(results.violations.length === 0, 'Should be no accessibility issues'); // complete the async call ... }); 

हम मॉड्यूल को विकास के वातावरण में लॉन्च करते हैं (जैसा कि ऊपर दिए गए कोड में है), अन्यथा परीक्षण सामान्य ऑपरेशन की तुलना में परीक्षण के दौरान अधिक संसाधनों का उपयोग करेगा। आप envify (जैसा कि इस उदाहरण में दिखाया गया है) का उपयोग कर सकते हैं।

शुरू करने के बाद, मॉड्यूल को हर बार एक घटक के अपडेट होने पर Chrome Devtools कंसोल में एक्सेसिबिलिटी त्रुटियों के बारे में जानकारी प्रदर्शित करना शुरू हो जाएगा।

इसलिए, रिएक्ट एप्लिकेशन लॉन्च करते समय, हम कंसोल में सभी एक्सेसिबिलिटी समस्याओं (यदि कोई हो) को देख सकते हैं।


कुल्हाड़ी में त्रुटियों और पहुंच के मुद्दों को प्रदर्शित करें

ब्राउज़रों का समर्थन किया

कुल्हाड़ी-कोर एपीआई निम्नलिखित ब्राउज़रों का समर्थन करता है:

• Microsoft एज 40 और उच्चतर;
• Google Chrome 42 और उच्चतर;
• मोज़िला फ़ायरफ़ॉक्स 38 और उच्चतर;
• Apple सफारी 7 और इसके बाद के संस्करण;
• इंटरनेट एक्सप्लोरर 9, 10, 11।

समर्थन से, मेरा मतलब है कि बग को ठीक करना और जब भी संभव हो नियमित रूप से ब्राउज़र का परीक्षण करना। वर्तमान में, प्रत्येक पुल अनुरोध के साथ, केवल फ़ायरफ़ॉक्स, क्रोम और इंटरनेट एक्सप्लोरर 11 का परीक्षण किया जाता है।

JSDOM समर्थन अभी भी सीमित है। अब डेवलपर्स JSDOM के साथ सभी नियमों को संगत बनाने की कोशिश कर रहे हैं, लेकिन जहां यह संभव नहीं है, मैं नियमों को बंद करने की सलाह देता हूं। यह ज्ञात है कि color-contrast नियम JSDOM के साथ काम नहीं करता है।

वर्तमान में, कुल्हाड़ी केवल उन वातावरणों में काम करती है जहां सभी कार्य या तो मूल रूप से समर्थित हैं या सही तरीके से लागू किए गए हैं। लायब्रेरी deprecated v0 छाया DOM कार्यान्वयन का समर्थन नहीं करता है।

पहुँच नियम

axe-core द्वारा ट्रिगर किए गए नियमों की एक पूरी सूची यहां पाई जा सकती है ।


कुल्हाड़ी नियम

निष्कर्ष

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

पढ़ने के लिए धन्यवाद!