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

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

Houssein Djirdeh

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

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

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

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

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

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

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

कॉन्टेंट बनाने सुलभता से जुड़े दस्तावेज़ तैयार करें इसमें React का इस्तेमाल करते समय, सुलभता से जुड़ी सभी समस्याओं को ठीक करने के बारे में बताया गया है कॉम्पोनेंट. डेवलपमेंट के दौरान इन समस्याओं का आसानी से पता लगाने के लिए, 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 की किसी भी समस्या को पकड़ सकें. इसे शामिल न करें में शामिल करें.