ممیزی دسترسی با react-axe و eslint-plugin-jsx-a11y

سایت React شما اگر در دسترس نباشد پیشرونده نیست. ممیزی در حین توسعه می تواند به شما در تشخیص هر گونه مشکل کمک کند.

Houssein Djirdeh

react-axe کتابخانه ای است که برنامه React را بررسی می کند و هرگونه مشکل دسترسی را در کنسول Chrome DevTools ثبت می کند. از کتابخانه تست تبر منبع باز استفاده می کند تا هرگونه مشکل و شدت آنها را علامت گذاری کند.

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 تمام نکات ظریف مربوط به رسیدگی به نگرانی‌های دسترسی در یک جزء 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"]
}

مستندات پروژه اطلاعاتی در مورد تفاوت بین حالت توصیه شده و سخت ارائه می دهد.

از react-ax استفاده کنید

eslint-plugin-jsx-a11y می تواند به شما کمک کند تا به راحتی مشکلات دسترسی را در JSX خود مشخص کنید، اما هیچ یک از خروجی های HTML نهایی را آزمایش نمی کند. react-axe کتابخانه ای است که دقیقاً این کار را با ارائه یک پوشش 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 root استفاده می‌شود. این تضمین می کند که به طور غیر ضروری در بسته تولید نهایی گنجانده نشده است.

اکنون وقتی برنامه را در حین توسعه اجرا می‌کنید، مشکلات مستقیماً در کنسول Chrome DevTools ظاهر می‌شوند.

همچنین برای هر تخلف یک سطح شدت در نظر گرفته شده است. این سطوح عبارتند از:

• جزئی
• متوسط
• جدی
• انتقادی

نتیجه گیری

1. اگر سایتی را با React می‌سازید، ممیزی دسترسی را زودتر در جریان کار خود قرار دهید تا هنگام ساخت اجزای خود مشکلاتی را پیدا کنید.
2. از eslint-plugin-jsx-a11y برای اضافه کردن بررسی های دسترسی به گردش کار linting خود استفاده کنید. CRA در حال حاضر همراه با آن است، اما به حالت توصیه شده یا سخت تغییر دهید.
3. علاوه بر آزمایش توسعه محلی، react-axe در برنامه خود قرار دهید تا هر گونه مشکلی را در DOM رندر نهایی پیدا کنید. آن را در بسته تولید خود وارد نکنید.