ביקורת נגישות באמצעות access-axe ו-eslint-Plugin-jsx-a11y

האתר שלכם ב-React לא מתקדם אם אין גישה אליו. ביקורת במהלך הפיתוח יכולה לעזור לך לזהות בעיות.

חוסיין דג'ירד

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

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

למה זה שימושי?

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

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

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

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

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

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

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

{
  "extends": "react-app"
}

עכשיו יוצגו כמה מבעיות הנגישות הנפוצות.

כדי לבדוק אם קיימים עוד כללי נגישות, אפשר לשנות את הקובץ כך שיכלול באופן אוטומטי את כל הכללים המומלצים על ידי הפלאגין:

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

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

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

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

שימוש בתגובת גרזן

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

התקן את הספרייה כתלוית פיתוח כדי להתחיל:

npm install --save-dev react-axe

עכשיו צריך לאתחל את המודול רק ב-index.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.

בנוסף, מתבצעת הקצאה של רמת החומרה לכל הפרה. הרמות האלה הן:

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

סיכום

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