response-ऐक्सिस और eslint-plugin-jsx-a11y के साथ सुलभता ऑडिटिंग

अगर आपकी प्रतिक्रिया साइट ऐक्सेस नहीं की जा सकती, तो वह प्रोग्रेसिव नहीं होगी. डेवलपमेंट के दौरान ऑडिटिंग से आपको किसी भी समस्या का पता लगाने में मदद मिल सकती है.

हुसैन ज़िरदेह

react-axe एक लाइब्रेरी है, जो React ऐप्लिकेशन ऑडिट करती है और सुलभता से जुड़ी किसी भी समस्या को Chrome DevTools कंसोल पर लॉग करती है. यह किसी भी समस्या और उनकी गंभीरता को फ़्लैग करने के लिए, ओपन सोर्स ऐक्सिस टेस्टिंग लाइब्रेरी का इस्तेमाल करता है.

eslint-plugin-jsx-a11y एक ESLint प्लगिन है, जो सीधे आपके JSX में कई सुलभता नियमों की पहचान करता है और उन्हें लागू करता है. आखिर में रेंडर किए गए DOM की जांच करने वाले टूल के साथ इसका इस्तेमाल करें, जैसे कि react-axe. इससे आपको अपनी साइट पर सुलभता से जुड़ी किसी भी समस्या को ढूंढने और उसे ठीक करने में मदद मिल सकती है.

यह जानकारी काम की क्यों है?

ऐसी वेबसाइटें बनाना बहुत ज़रूरी है जो सभी उपयोगकर्ताओं को कॉन्टेंट ऐक्सेस करने की क्षमता ज़रूर मुहैया कराती हों. भले ही, उपयोगकर्ता की खामियां या पाबंदियां कुछ भी हों. अपने React ऐप्लिकेशन के डेवलपमेंट के दौरान, react-axe और eslint-plugin-jsx-a11y जैसी ऑडिटिंग लाइब्रेरी का इस्तेमाल करने से, सुलभता से जुड़ी समस्याएं पॉप-अप होते ही उनके बारे में अपने-आप पता चल जाएगा.

eslint-plugin-jsx-a11y का इस्तेमाल करें

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

<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>

React Accessibility दस्तावेज़ में, सुलभता से जुड़ी समस्याओं से निपटने के बारे में पूरी जानकारी दी गई है. डेवलपमेंट के दौरान इन समस्याओं का पता लगाना आसान हो, इसके लिए Create React App (CRA) में, ESLint के लिए डिफ़ॉल्ट रूप से eslint-plugin-jsx-a11y प्लगिन शामिल होता है.

CRA से मिलने वाले, पहले से कॉन्फ़िगर किए गए लिंटिंग को चालू करने के लिए:

  1. अपने कोड एडिटर के लिए, सही ESLint प्लगिन इंस्टॉल करें
  2. अपने प्रोजेक्ट में .eslintrc.json फ़ाइल जोड़ें
{
  "extends": "react-app"
}

सुलभता से जुड़ी कुछ सामान्य समस्याएं अब दिखेंगी.

लिंटर में इमेज सुलभता से जुड़ी चेतावनी

और भी ज़्यादा सुलभता नियमों की जांच करने के लिए, फ़ाइल में बदलाव करें, ताकि प्लगिन के सुझाए गए सभी नियमों को अपने-आप शामिल किया जा सके:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"]
}

अगर आपको नियमों का और भी सख्त सबसेट चाहिए, तो सख्त मोड पर स्विच करें:

{
  "extends": ["react-app", "plugin:jsx-a11y/strict"]
}

लिंटर में लेबल सुलभता गड़बड़ी

प्रोजेक्ट दस्तावेज़ में सुझाए गए और सख्त मोड के बीच के अंतर की जानकारी दी जाती है.

अभिक्रिया-ऐक्सिस का इस्तेमाल करना

eslint-plugin-jsx-a11y की मदद से, JSX में सुलभता से जुड़ी किसी भी समस्या का आसानी से पता लगाया जा सकता है. हालांकि, यह किसी भी फ़ाइनल एचटीएमएल आउटपुट की जांच नहीं करता. react-axe एक लाइब्रेरी है, जो ऐसा करने के लिए Deque Labs के axe-core टेस्टिंग टूल के चारों ओर रिऐक्ट रैपर उपलब्ध कराती है.

शुरू करने के लिए, लाइब्रेरी को डेवलपमेंट डिपेंडेंसी के तौर पर इंस्टॉल करें:

npm install --save-dev react-axe

आपको अब सिर्फ़ index.js में मॉड्यूल शुरू करने की ज़रूरत है:

if (process.env.NODE_ENV !== 'production') {
  import('react-axe').then(axe => {
    axe.default(React, ReactDOM, 1000);
    ReactDOM.render(<App />, document.getElementById('root'));
  });
} else {
  ReactDOM.render(<App />, document.getElementById('root'));
}

यहां डाइनैमिक इंपोर्ट का इस्तेमाल सिर्फ़ तब किया जाता है, जब लाइब्रेरी को प्रोडक्शन मोड में न होने पर ही लोड किया जाता है. ऐसा रूट App कॉम्पोनेंट को रेंडर और चालू करने से पहले किया जाता है. इससे यह पक्का हो जाता है कि इसे फ़ाइनल प्रोडक्शन बंडल में ग़ैर-ज़रूरी शामिल नहीं किया गया है.

अब डेवलपमेंट के दौरान ऐप्लिकेशन को चलाने पर, समस्याएं सीधे Chrome DevTools कंसोल पर दिखेंगी.

Chrome DevTools में रिऐक्ट ऐक्स का इस्तेमाल करना

हर उल्लंघन के लिए, गंभीरता का लेवल भी तय किया जाता है. ये लेवल हैं:

  • नाबालिग की तरफ़ से
  • ठीक-ठाक
  • गंभीर
  • अहम

नतीजा

  1. अगर React का इस्तेमाल करके कोई साइट बनानी है, तो अपने वर्कफ़्लो में सुलभता की जांच को जल्दी शामिल करें, ताकि कॉम्पोनेंट बनाते समय आने वाली समस्याओं का पता लगाया जा सके.
  2. अपने लिंटिंग वर्कफ़्लो में सुलभता जांच जोड़ने के लिए, eslint-plugin-jsx-a11y का इस्तेमाल करें. CRA में पहले से ही शामिल हैं, लेकिन सुझाए गए या सख्त मोड में से किसी एक पर स्विच करें.
  3. लोकल डेवलपमेंट टेस्टिंग के अलावा, अपने ऐप्लिकेशन में react-axe को शामिल करें, ताकि फ़ाइनल रेंडर किए गए DOM में किसी भी समस्या को ठीक किया जा सके. इसे अपने प्रोडक्शन बंडल में शामिल न करें.