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

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

Minko Gechev

Zama Khan Mohammed

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

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

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

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

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

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

फ़ॉर्म एलिमेंट को लेबल करने की गड़बड़ी दिखाने वाला कोडलिस्टर पॉप-अप.

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

कोडलाइज़र का इस्तेमाल करना

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

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

अपने इंटिग्रेशन में सुलभता सुविधाओं को लागू करना

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

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

नतीजा

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

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