בדיקת נגישות באמצעות react-axe ו-eslint-plugin-jsx-a11y

Houssein Djirdeh

כדי שהאתר ב-React יהיה מתקדם, הוא צריך להיות נגיש. כדאי לבצע ביקורת נגישות במהלך הפיתוח כדי למצוא בעיות ולטפל בהן לפני שמעבירים את האפליקציה לסביבת הייצור.

react-axe היא ספרייה שבוחנת אפליקציית React ומתעדת בעיות נגישות במסוף של כלי הפיתוח של Chrome. הכלי משתמש בספריית הבדיקה axe בקוד פתוח כדי לסמן בעיות וחומרתן.

eslint-plugin-jsx-a11y הוא פלאגין של ESLint שמזהה ומאכף מספר כללי נגישות ישירות ב-JSX. כשמשתמשים בו בשילוב עם כלי שבודק את ה-DOM הסופי שעבר רינדור, כמו react-axe, אפשר למצוא ולתקן בעיות נגישות באתר.

למה המידע הזה מועיל?

חשוב מאוד ליצור אתרים שיהיו נגישים לכל המשתמשים, כולל אנשים עם מוגבלויות. שימוש בספריית ביקורת נגישות, כמו react-axe ו-eslint-plugin-jsx-a11y, מאפשר למצוא בעיות נגישות במהלך פיתוח האפליקציה, ולתקן אותן לפני שהיא מועברת לסביבת הייצור.

שימוש ב-eslint-plugin-jsx-a11y

ב-React כבר יש תמיכה בכתיבת רכיבי HTML נגישים בתוך תחביר JSX. לדוגמה, אפשר להשתמש במאפיין htmlFor במקום ב-for כדי להוסיף תווית לאלמנט טופס בתוך רכיב React.

<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>

מסמכי העזרה בנושא נגישות ב-React עוסקים בהיבטים העדינים של טיפול בבעיות נגישות ברכיב React. כדי לזהות את הבעיות האלה בקלות רבה יותר, Create React App (‏CRA) כולל את הפלאגין eslint-plugin-jsx-a11y.

כדי להפעיל איתור שגיאות בקוד (linting) שהוגדר מראש על ידי CRA:

1. מתקינים את הפלאגין ESLint בעורך הקוד.
2. הוספת קובץ .eslintrc.json לפרויקט

{
  "extends": "react-app"
}

אחרי ההגדרה, אפשר למצוא בעיות נפוצות של נגישות.

כדי לבדוק כללי נגישות נוספים, משנים את .eslintrc.json כך שיכלול את כל הכללים המומלצים של הפלאגין:

{
  "extends": ["react-app", "plugin:jsx-a11y/recommended"]
}

כדי להשתמש בקבוצת משנה של כללים מחמירה עוד יותר, עוברים למצב קפדני:

{
  "extends": ["react-app", "plugin:jsx-a11y/strict"]
}

במסמכי התיעוד של הפרויקט מפורט מידע על ההבדלים בין המצב המומלץ למצב הקפדני.

שימוש ב-react-axe

eslint-plugin-jsx-a11y יכול לעזור לכם למצוא בעיות נגישות ב-JSX, אבל הוא לא בודק את הפלט הסופי של ה-HTML. הספרייה react-axe מבצעת בדיקות על ידי הוספת מעטפת של React סביב כלי הבדיקה axe-core של Deque Labs.

1. מתקינים את הספרייה כחבילת תלות לפיתוח: bash npm install --save-dev react-axe
2. מאתחלים את המודול ב-index.js: js if (process.env.NODE_ENV !== 'production') { import('react-axe').then(axe => { axe.default(React, ReactDOM, 1000); ReactDOM.render(<App />, document.getElementById('root')); }); } else { ReactDOM.render(<App />, document.getElementById('root')); }

ייבוא דינמי טוען את הספרייה, כל עוד היא לא בסביבת הייצור, לפני שהוא מבצע עיבוד וטעינה של רכיב השורש App. כך תוכלו לוודא שהיא לא תהיה כלולה בחבילת הייצור הסופית אם היא לא נחוצה.

כשמריצים את האפליקציה במהלך הפיתוח, הבעיות מופיעות ישירות במסוף Chrome DevTools.

לכל הפרה מוקצית גם רמת חומרה. הרמות האלה הן:

• קטין
• בינוני
• רציני
• קריטי

סיכום

מומלץ לכלול ביקורות נגישות בשלב מוקדם בתהליך העבודה כדי לזהות בעיות בזמן פיתוח האפליקציות ב-React.אפשר להשתמש ב-eslint-plugin-jsx-a11y כדי להוסיף בדיקות נגישות לתהליך העבודה של איתור השגיאות בקוד. הכלי כבר כולל אותו, אבל אפשר לעבור למצב המומלץ או למצב המחמיר.

בנוסף לבדיקות הפיתוח המקומי, כדאי לכלול את react-axe באפליקציה כדי לזהות בעיות ב-DOM הסופי שעבר רינדור. אל תכללו אותו בחבילת הייצור.