בדיקת הנגישות של אפליקציית Angular באמצעות Codelyzer

רוצים להפוך את אתר Angular שלכם לנגיש לכולם? הגעת למקום הנכון!

Minko Gechev

Zama Khan Mohammed

הנגשת האפליקציה מאפשרת לכל המשתמשים, כולל משתמשים עם צרכים מיוחדים, להשתמש בה ולהבין את התוכן. לפי דוח הבריאות העולמי, ליותר ממיליארד אנשים – כ-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 או בתבניות מוטבעות בזמן שמקודדים:

כדי לבצע בדיקת Linting בכל הפרויקט (כולל תבניות חיצוניות), משתמשים בפקודה 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 לביצוע ביקורות נגישות בזמן ריצה.