कोडलाइज़र की मदद से, अपने Angular ऐप्लिकेशन की सुलभता ऑडिट करें

क्या अपनी Angular साइट सभी के लिए ऐक्सेस करने लायक बनाना है? यह सही जगह है!

Minko Gechev

Zama Khan Mohammed

ऐप्लिकेशन को ज़्यादा से ज़्यादा लोगों तक पहुंचाने का मतलब है कि सभी उपयोगकर्ता, ऐप्लिकेशन को इस्तेमाल कर सकते हैं और कॉन्टेंट को समझ सकते हैं. इनमें खास ज़रूरतों वाले लोग भी शामिल हैं. विश्व स्वास्थ्य रिपोर्ट के मुताबिक, एक अरब से ज़्यादा लोग—दुनिया की करीब 15% जनसंख्या, किसी न किसी रूप में दिव्यांग हैं. इसलिए, किसी भी डेवलपमेंट प्रोजेक्ट के लिए सुलभता अहम होती है.

इस पोस्ट में, आपको Angular ऐप्लिकेशन के बिल्ड प्रोसेस में codelyizer की सुलभता जांच को जोड़ने का तरीका बताया गया है. इस तरीके से, कोडिंग करते समय सीधे टेक्स्ट एडिटर में, सुलभता से जुड़ी गड़बड़ियों की जानकारी पाई जा सकती है.

ऐसे एलिमेंट का पता लगाने के लिए कोडलाइज़र का इस्तेमाल करना जिन्हें ऐक्सेस नहीं किया जा सकता

codelyizer एक ऐसा टूल है जो TSLint के ऊपर मौजूद है और यह जांच करता है कि क्या Angular TypeScript प्रोजेक्ट, लाइनिंग के नियमों के सेट का पालन करते हैं. Angular कमांड लाइन इंटरफ़ेस (सीएलआई) के साथ सेट अप किए गए प्रोजेक्ट में कोडलाइज़र डिफ़ॉल्ट रूप से शामिल होता है.

codelyizer के पास 50 से ज़्यादा नियम हैं, जिनकी मदद से यह पता लगाया जा सकता है कि कोई Angular ऐप्लिकेशन सबसे सही तरीकों का पालन करता है या नहीं. इनमें से, सुलभता से जुड़ी शर्तों को लागू करने से जुड़े करीब 10 नियम हैं. कोडलाइज़र से मिलने वाली सुलभता की अलग-अलग जांचों और उनके तर्क के बारे में जानने के लिए, कोडलाइज़र में सुलभता के नए नियम लेख पढ़ें.

फ़िलहाल, सुलभता के सभी नियम प्रयोग के तौर पर हैं और डिफ़ॉल्ट रूप से बंद हैं. इन्हें TSLint कॉन्फ़िगरेशन फ़ाइल (tslint.json) में जोड़कर, चालू किया जा सकता है:

{
  "rulesDirectory": [
    "codelyzer"
  ],
  "rules": {
    ...,
    "template-accessibility-alt-text": true,
    "template-accessibility-elements-content": true,
    "template-accessibility-label-for": true,
    "template-accessibility-tabindex-no-positive": true,
    "template-accessibility-table-scope": true,
    "template-accessibility-valid-aria": true,
    "template-click-events-have-key-events": true,
    "template-mouse-events-have-key-events": true,
    "template-no-autofocus": true,
    "template-no-distracting-elements": true
  }
}

TSLint सभी लोकप्रिय टेक्स्ट एडिटर और IDE के साथ काम करता है. VSCode के साथ इसका इस्तेमाल करने के लिए, TSLint प्लग इन इंस्टॉल करें. Webस्टॉर्म में, TSLint डिफ़ॉल्ट रूप से चालू होता है. अन्य संपादकों के लिए, TSLint README देखें.

कोडलीज़र की सुलभता जांच सेट अप होने पर, आपको कोड लिखने के दौरान TypeScript फ़ाइलों या इनलाइन टेंप्लेट में, सुलभता से जुड़ी गड़बड़ियां दिखाने वाला पॉप-अप मिलता है:

पूरे प्रोजेक्ट (बाहरी टेंप्लेट के साथ) पर लिंट करने के लिए, ng lint कमांड का इस्तेमाल करें:

कोडलाइज़र की सुविधा

Lighthouse एक ऐसा टूल है जिसका इस्तेमाल अपने Angular ऐप्लिकेशन में सुलभता के तरीकों को लागू करने के लिए किया जा सकता है. कोडलाइज़र और लाइटहाउस में मुख्य अंतर यह है कि इनकी जांच कब की जाती है. Codelyizer, ऐप्लिकेशन को बिना चलाए, डेवलपमेंट के समय का स्टैटिक तरीके से विश्लेषण करता है. इसका मतलब है कि डेवलपमेंट के दौरान आपको अपने टेक्स्ट एडिटर या टर्मिनल में सीधे तौर पर सुझाव, शिकायत या राय मिल सकती है. इसके उलट, लाइटहाउस आपके ऐप्लिकेशन को चलाता है और डाइनैमिक विश्लेषण का इस्तेमाल करके कई जांच करता है.

ये दोनों टूल आपके डेवलपमेंट प्रोसेस के उपयोगी हिस्से हो सकते हैं. लाइटहाउस की कवरेज बेहतर तरीके से काम करती है, क्योंकि उसकी जांच की जाती है. वहीं दूसरी ओर, कोडलाइज़र की मदद से टेक्स्ट एडिटर में लगातार सुझाव या राय पाकर, उसे तेज़ी से दोहराया जा सकता है.

डेटा के लगातार इंटिग्रेशन में, सुलभता की जांच को लागू करना

अपने इंटिग्रेशन (सीआई) में स्टैटिक सुलभता जांच की सुविधा शामिल करना, आपके डेवलपमेंट फ़्लो को बेहतर बनाने के लिए एक बहुत अच्छा विकल्प हो सकता है. कोडलाईर की मदद से, हर कोड बदलाव पर ng lint चलाकर, कुछ सुलभता नियमों या दूसरे तरीकों को आसानी से लागू किया जा सकता है. उदाहरण के लिए, पुल के हर नए अनुरोध के लिए.

इस तरह से, कोड की समीक्षा के लिए आगे बढ़ने से पहले ही, आपका CI, आपको यह बता सकता है कि कहीं सुलभता से जुड़ी कोई नीति तो नहीं उल्लंघन हुई है.

नतीजा

अपने Angular ऐप्लिकेशन की सुलभता को बेहतर बनाने के लिए:

1. कोडलाइज़र में प्रयोग के तौर पर उपलब्ध सुलभता के नियमों को चालू करें.
2. Angular CLI का इस्तेमाल करके, अपने पूरे प्रोजेक्ट पर सुलभता लिंटिंग करें.
3. कोडलाइज़र की मदद से रिपोर्ट की गई, सुलभता से जुड़ी सभी समस्याओं को ठीक करें.
4. रनटाइम के दौरान सुलभता ऑडिट करने के लिए, लाइटहाउस का इस्तेमाल करें.