لن يصبح موقع 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:
- تثبيت مكوّن ESLint الإضافي المناسب لمحرِّر الرموز
- إضافة ملف
.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".
ويتم أيضًا ضبط مستوى خطورة لكل انتهاك. هذه المستويات هي:
- قاصر
- معتدلة
- خطيرة
- مشاكل ملحّة
الخلاصة
- إذا كنت تنشئ موقعًا إلكترونيًا باستخدام React، أدرِج تدقيق إمكانية الوصول في سير العمل مبكرًا لرصد المشاكل أثناء إنشاء المكوّنات.
- استخدِم
eslint-plugin-jsx-a11y
لإضافة عمليات التحقّق من إمكانية الوصول إلى سير عمل التدقيق. تأتي هيئة CRA مرفقة بها بالفعل، ولكن قم بالتبديل إلى الوضع المقترح أو الوضع المتشدد. - بالإضافة إلى اختبار التطوير المحلي، يمكنك تضمين
react-axe
في تطبيقك لرصد أي مشاكل في نموذج DOM النهائي المعروض. لا تدرجه في حزمة الإنتاج.