האתר שלכם ב-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:
- מתקינים את הפלאגין ESLint המתאים לעורך הקוד
- הוספת קובץ
.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.
בנוסף, מתבצעת הקצאה של רמת החומרה לכל הפרה. הרמות האלה הן:
- קטין
- בינוני
- רצינית
- קריטי
סיכום
- אם אתם בונים אתר באמצעות React, כדאי לכלול בקרת נגישות בתהליך העבודה בשלב מוקדם כדי לזהות בעיות במהלך בניית הרכיבים שלכם.
- אפשר להשתמש ב-
eslint-plugin-jsx-a11y
כדי להוסיף בדיקות נגישות לתהליך העבודה של איתור השגיאות בקוד. CRA כבר כלול, אבל צריך לעבור למצב 'מומלץ' או 'מחמיר'. - בנוסף לבדיקות של פיתוח מקומי, כדאי לכלול את הפקודה
react-axe
באפליקציה כדי לזהות בעיות ב-DOM הסופי שעבר עיבוד. אין לכלול אותו בחבילת הייצור.