تدقيق إمكانية الوصول باستخدام React-axe وeslint- مخصصة-jsx-a11y

لن يصبح موقع React الإلكتروني الخاص بك تدريجيًّا إذا تعذّر الوصول إليه. يمكن أن يساعدك التدقيق أثناء التطوير في اكتشاف أي مشكلات.

حسين جردية

react-axe هي مكتبة تدقّق في أحد تطبيقات React وتسجّل أي مشاكل تتعلّق بتسهيل الاستخدام في وحدة تحكّم Chrome DevTools. يستخدم مكتبة اختبار axe مفتوحة المصدر للإبلاغ عن أي مشاكل ومدى خطورتها.

eslint-plugin-jsx-a11y هو مكوّن إضافي لـ ESLint يحدد عددًا من قواعد تسهيل الاستخدام ويفرضها مباشرةً في JSX. إنّ استخدام هذا الإجراء مع أداة لفحص نموذج العناصر في المستند (DOM) النهائي المعروض، مثل react-axe، يمكن أن يساعدك في العثور على أي مخاوف بشأن إمكانية الوصول على موقعك الإلكتروني وحلّها.

لماذا يُعدّ هذا الردّ مفيدًا؟

من الضروري إنشاء مواقع إلكترونية توفّر لكل مستخدم، بغض النظر عن العجز أو القيد، إمكانية الوصول إلى المحتوى. عند استخدام مكتبات تدقيق مثل react-axe وeslint-plugin-jsx-a11y أثناء تطوير تطبيق React، ستظهر تلقائيًا أي مشاكل متعلّقة بإمكانية الوصول فور ظهورها.

استخدام eslint-extension-jsx-a11y

تتيح React حاليًا كتابة عناصر HTML التي يمكن الوصول إليها داخل بنية JSX. على سبيل المثال، ما عليك سوى استخدام السمة htmlFor بدلاً من for لربط تصنيف بعنصر نموذج معيّن داخل مكوِّن React.

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

تتناول مستندات تسهيل الاستخدام React جميع الفروق الدقيقة للتعامل مع مشاكل تسهيل الاستخدام داخل مكوِّن React. لتسهيل رصد هذه المشاكل أثناء التطوير، يتضمّن إنشاء تطبيق React (CRA) المكوّن الإضافي eslint-plugin-jsx-a11y تلقائيًا لـ ESLint.

لتفعيل سياسة النُبذة المُعدّة مسبقًا والتي يوفّرها 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، ولكنه لا يختبر أيًّا من إخراج HTML النهائي. react-axe هي مكتبة تتيح ذلك من خلال توفير برنامج تضمين React حول أداة الاختبار axe-core من Deque Labs.

ثبِّت المكتبة كتبعية للتطوير للبدء:

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".

ويتم أيضًا ضبط مستوى خطورة لكل انتهاك. هذه المستويات هي:

• قاصر
• معتدلة
• خطيرة
• مشاكل ملحّة

الخلاصة

1. إذا كنت تنشئ موقعًا إلكترونيًا باستخدام React، أدرِج تدقيق إمكانية الوصول في سير العمل مبكرًا لرصد المشاكل أثناء إنشاء المكوّنات.
2. استخدِم eslint-plugin-jsx-a11y لإضافة عمليات التحقّق من إمكانية الوصول إلى سير عمل التدقيق. تأتي هيئة CRA مرفقة بها بالفعل، ولكن قم بالتبديل إلى الوضع المقترح أو الوضع المتشدد.
3. بالإضافة إلى اختبار التطوير المحلي، يمكنك تضمين react-axe في تطبيقك لرصد أي مشاكل في نموذج DOM النهائي المعروض. لا تدرجه في حزمة الإنتاج.