تدقيق إمكانية الوصول في تطبيق Angular باستخدام أداة تحليل الرموز

هل تريد إتاحة موقعك الإلكتروني المستند إلى Angular للجميع؟ هذا هو المكان المناسب.

Minko Gechev

Zama Khan Mohammed

يعني توفير إمكانية الوصول إلى تطبيقك أنّ جميع المستخدمين، بمن فيهم ذوو الاحتياجات الخاصة، يمكنهم استخدامه وفهم المحتوى. وفقًا لتقرير الصحة العالمي، يعاني أكثر من مليار شخص، أي حوالي% 15 من سكان العالم، من أحد أشكال العجز. لذلك، تُعدّ سهولة الاستخدام أولوية في أي مشروع تطوير.

في هذه المشاركة، ستتعرّف على كيفية إضافة عمليات التحقّق من إمكانية الوصول في Codelyzer إلى عملية إنشاء تطبيق Angular. يتيح لك هذا الأسلوب رصد أخطاء إمكانية الوصول مباشرةً في محرّر النصوص أثناء كتابة الرمز.

استخدام codelyzer لرصد العناصر التي يتعذّر الوصول إليها

codelyzer هي أداة تستند إلى TSLint وتتحقّق مما إذا كانت مشاريع Angular TypeScript تتبع مجموعة من قواعد التدقيق. تتضمّن المشاريع التي تم إعدادها باستخدام واجهة سطر الأوامر (CLI) في Angular أداة codelyzer تلقائيًا.

يحتوي codelyzer على أكثر من 50 قاعدة للتحقّق مما إذا كان تطبيق Angular يتّبع أفضل الممارسات. من بين هذه القواعد، هناك حوالي 10 قواعد لفرض معايير إمكانية الوصول. للاطّلاع على معلومات حول عمليات التحقّق المختلفة من إمكانية الوصول التي يوفّرها codelyzer وأسبابها، يمكنك الاطّلاع على مقالة قواعد إمكانية الوصول الجديدة في Codelyzer.

في الوقت الحالي، جميع قواعد تسهيل الاستخدام تجريبية ويتم إيقافها تلقائيًا. يمكنك تفعيلها من خلال إضافتها إلى ملف إعدادات TSLint (tslint.json):

{
  "rulesDirectory": [
    "codelyzer"
  ],
  "rules": {
    ...,
    "template-accessibility-alt-text": true,
    "template-accessibility-elements-content": true,
    "template-accessibility-label-for": true,
    "template-accessibility-tabindex-no-positive": true,
    "template-accessibility-table-scope": true,
    "template-accessibility-valid-aria": true,
    "template-click-events-have-key-events": true,
    "template-mouse-events-have-key-events": true,
    "template-no-autofocus": true,
    "template-no-distracting-elements": true
  }
}

تعمل أداة TSLint مع جميع برامج تعديل النصوص وبرامج IDE الشائعة. لاستخدامها مع VSCode، ثبِّت المكوّن الإضافي TSLint. في WebStorm، يتم تفعيل TSLint تلقائيًا. بالنسبة إلى المحرّرات الأخرى، يُرجى الاطّلاع على ملف README الخاص بأداة TSLint.

بعد إعداد عمليات التحقّق من إمكانية الوصول في codelyzer، سيظهر لك إشعار منبثق يعرض أخطاء إمكانية الوصول في ملفات TypeScript أو القوالب المضمّنة أثناء كتابة الرمز البرمجي:

نافذة منبثقة في Codelyzer تعرض خطأ في تصنيف عنصر نموذج.

لتنفيذ عملية التدقيق اللغوي على المشروع بأكمله (بما في ذلك النماذج الخارجية)، استخدِم الأمر ng lint:

إضافة ميزات إلى Codelyzer

Lighthouse هي أداة أخرى يمكنك استخدامها لفرض ممارسات تسهيل الاستخدام في تطبيق Angular. يتمثّل الاختلاف الرئيسي بين codelyzer وLighthouse في وقت إجراء عمليات التحقّق. يحلّل Codelyzer التطبيق بشكل ثابت أثناء عملية التطوير، بدون تشغيله. وهذا يعني أنّه يمكنك الحصول على ملاحظات مباشرة أثناء التطوير في محرّر النصوص أو في نافذة الأوامر. في المقابل، يشغّل Lighthouse تطبيقك وينفّذ مجموعة من عمليات التحقّق باستخدام التحليل الديناميكي.

يمكن أن تكون كلتا الأداتين جزءًا مفيدًا من عملية التطوير. توفّر Lighthouse تغطية أفضل نظرًا إلى عمليات التحقّق التي تجريها، بينما تتيح لك Codelyzer تكرار العمل بشكل أسرع من خلال تلقّي ملاحظات مستمرة في محرّر النصوص.

فرض عمليات التحقّق من إمكانية الوصول في عملية الدمج المستمر

يمكن أن يكون تقديم عمليات التحقّق الثابتة من إمكانية الوصول في عملية الدمج المتواصل (CI) تحسينًا رائعًا لسير عمل التطوير. باستخدام codelyzer، يمكنك بسهولة فرض قواعد معيّنة متعلّقة بإمكانية الوصول أو ممارسات أخرى من خلال تنفيذ ng lint على كل تعديل في الرمز البرمجي (على سبيل المثال، لكل طلب سحب جديد).

بهذه الطريقة، يمكن أن يخبرك التكامل المستمر بما إذا كانت هناك أي انتهاكات متعلّقة بسهولة الاستخدام حتى قبل المتابعة إلى مراجعة الرمز البرمجي.

الخاتمة

لتحسين إمكانية الوصول إلى تطبيق Angular، اتّبِع الخطوات التالية:

1. تفعيل قواعد تسهيل الاستخدام التجريبية في codelyzer
2. يمكنك إجراء عملية تدقيق في إمكانية الوصول إلى مشروعك بالكامل باستخدام واجهة سطر الأوامر Angular CLI.
3. حلّ جميع مشاكل تسهيل الاستخدام التي أبلغ عنها codelyzer
4. ننصحك باستخدام Lighthouse لإجراء عمليات تدقيق في سهولة الاستخدام في وقت التشغيل.