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

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

Houssein Djirdeh

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

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

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

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

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

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

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

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

لتفعيل استخدام أداة Lint المُعدّة مسبقًا من CRA:

  1. ثبِّت المكوّن الإضافي ESLint المناسب لمحرِّر الرموز البرمجية.
  2. إضافة ملف .eslintrc.json إلى مشروعك
{
  "extends": "react-app"
}

ستظهر الآن بعض المشكلات الشائعة المتعلقة بإمكانية الوصول.

تحذير بشأن إمكانية الوصول إلى الصور في linter

للتحقّق من توفُّر المزيد من قواعد تسهيل الاستخدام، عدِّل الملف إلى تضمين جميع القواعد المقترحة بواسطة المكون الإضافي:

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

إذا كنت تريد استخدام مجموعة فرعية أكثر صرامة من القواعد، فيمكنك التبديل إلى الوضع المتشدد:

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

خطأ في إمكانية الوصول إلى التصنيف في linter

المشروع المستندات توفّر معلومات عن الاختلافات بين الوضع المقترَح والوضع المتشدد.

استخدام فأس التفاعل

يمكن أن يساعدك 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"

التفاعل مع Axe في &quot;أدوات مطوري البرامج في Chrome&quot;

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

  • قاصر
  • معقول
  • جدي
  • مشاكل ملحّة

الخاتمة

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