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