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

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

Houssein Djirdeh

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

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 כדי לקשר לתווית לרכיב צורה ספציפי בתוך רכיב React.

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

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

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

  1. מתקינים את הפלאגין של ESLint המתאים לעורך הקוד
  2. הוספת קובץ .eslintrc.json לפרויקט
{
  "extends": "react-app"
}

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

אזהרה לגבי נגישות של תמונה ב-linter

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

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

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

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

שגיאת נגישות של תווית ב-Linter

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

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

eslint-plugin-jsx-a11y יכול לעזור לך לזהות בקלות בעיות נגישות ב-JSX, אבל הוא לא בודק אף אחד מפלט ה-HTML הסופי. react-axe היא ספרייה שעושה בדיוק את זה על ידי מתן wrapper במסגרת תגובה 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.

תגובה של Axe בכלי הפיתוח ל-Chrome

לכל הפרה ניתנת גם רמת חוּמרה. הרמות הן:

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

סיכום

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