רוצים להפוך את אתר Angular שלכם לנגיש לכולם? הגעת למקום הנכון!
הנגשת האפליקציה מאפשרת לכל המשתמשים, כולל משתמשים עם צרכים מיוחדים, להשתמש בה ולהבין את התוכן. לפי דוח הבריאות העולמי, ליותר ממיליארד אנשים – כ-15% מאוכלוסיית העולם – יש מוגבלות כלשהי. לכן נגישות היא בראש סדר העדיפויות בכל פרויקט פיתוח.
במאמר הזה נסביר איך להוסיף את בדיקות הנגישות של codelyzer לתהליך הבנייה של אפליקציית Angular. הגישה הזו מאפשרת לכם לזהות באגים שקשורים לנגישות ישירות בעורך הטקסט בזמן שאתם כותבים קוד.
שימוש ב-codelyzer כדי לזהות רכיבים שלא נגישים
codelyzer הוא כלי שפועל על גבי TSLint ובודק אם פרויקטים של Angular TypeScript עומדים בקבוצה של כללי linting. פרויקטים שהוגדרו באמצעות ממשק שורת הפקודה (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 או בתבניות מוטבעות בזמן שמקודדים: