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

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

Minko Gechev

Zama Khan Mohammed

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

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

ऐक्सेस न किए जा सकने वाले एलिमेंट का पता लगाने के लिए, codelyzer का इस्तेमाल करना

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

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

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

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

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

Codelyzer को बेहतर बनाना

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

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

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

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

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

नतीजा

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

1. codelyzer में, सुलभता से जुड़ी एक्सपेरिमेंटल सुविधाएं चालू करें.
2. Angular CLI का इस्तेमाल करके, अपने पूरे प्रोजेक्ट पर सुलभता की जांच करें.
3. Codelyzer ने सुलभता से जुड़ी जिन समस्याओं की शिकायत की है उन्हें ठीक करें.
4. रनटाइम में सुलभता से जुड़ी ऑडिट के लिए, Lighthouse का इस्तेमाल करें.