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

هل تريد أن تجعل موقع Angular الإلكتروني متاحًا للجميع؟ هذا هو المكان الصحيح!

Minko Gechev

Zama Khan Mohammed

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

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

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

codelyzer هو أداة أعلى TSLint وتتحقّق مما إذا كانت مشاريع Angular TypeScript تتّبع مجموعة من قواعد التدقيق. تتضمّن المشاريع التي تم إعدادها باستخدام واجهة سطر الأوامر 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 تلقائيًا. بالنسبة إلى المحرِّرين الآخرين، يمكنك الاطّلاع على TSLint README.

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

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

.

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

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

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

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

فرض عمليات التحقّق من تسهيل الاستخدام في عملية الدمج المستمر

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

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

الخلاصة

لتحسين إمكانية الوصول إلى تطبيق Angular، عليك إجراء ما يلي:

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