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

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

Minko Gechev

Zama Khan Mohammed

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

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

استخدام أداة تحليل الرموز لرصد العناصر التي يتعذّر الوصول إليها

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

يتضمّن برنامج تحليل الترميز أكثر من 50 قاعدة للتحقّق ممّا إذا كان تطبيق Angular يتّبع أفضل الممارسات أم لا. من بينها، هناك حوالي 10 قواعد لفرض معايير إمكانية الوصول. للتعرُّف على العديد من عمليات التحقّق المختلفة من إمكانية الوصول التي يوفّرها التطبيق وأسبابها، يُرجى الاطّلاع على مقالة قواعد تسهيل الاستخدام الجديدة في 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.

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

نافذة منبثقة لأداة تحليل الترميز تعرض خطأً في تصنيف عنصر النموذج.

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

استكمال أداة تحليل الرموز

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

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

تنفيذ عمليات فحص إمكانية الوصول أثناء عملية الدمج المستمر

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

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

الخاتمة

لتحسين إمكانية الوصول إلى تطبيق Angular:

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