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

Houssein Djirdeh

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

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

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 است.

برای فعال کردن پرزهای از پیش پیکربندی شده ارائه شده توسط 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-ax استفاده کنید

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 root بارگیری می‌کند. این تضمین می کند که در صورت غیر ضروری بودن، در بسته تولید نهایی گنجانده نمی شود.

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

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

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

نتیجه گیری

ممیزی دسترس‌پذیری را در اوایل گردش کار خود لحاظ کنید تا هنگام ایجاد برنامه‌های React خود مشکلاتی را پیدا کنید eslint-plugin-jsx-a11y برای اضافه کردن بررسی‌های دسترسی به گردش کار linting خود استفاده کنید. CRA قبلاً شامل آن می‌شود، اما می‌توانید به حالت توصیه‌شده یا سخت تغییر دهید.

علاوه بر آزمایش توسعه محلی، react-axe در برنامه خود بگنجانید تا هر مشکلی را در DOM رندر نهایی پیدا کنید. آن را در بسته تولید خود وارد نکنید.

Houssein Djirdeh

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

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

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 است.

برای فعال کردن پرزهای از پیش پیکربندی شده ارائه شده توسط 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-ax استفاده کنید

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 root بارگیری می‌کند. این تضمین می کند که در صورت غیر ضروری بودن، در بسته تولید نهایی گنجانده نمی شود.

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

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

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

نتیجه گیری

ممیزی دسترس‌پذیری را در اوایل گردش کار خود لحاظ کنید تا هنگام ایجاد برنامه‌های React خود مشکلاتی را پیدا کنید eslint-plugin-jsx-a11y برای اضافه کردن بررسی‌های دسترسی به گردش کار linting خود استفاده کنید. CRA قبلاً شامل آن می‌شود، اما می‌توانید به حالت توصیه‌شده یا سخت تغییر دهید.

علاوه بر آزمایش توسعه محلی، react-axe در برنامه خود بگنجانید تا هر مشکلی را در DOM رندر نهایی پیدا کنید. آن را در بسته تولید خود وارد نکنید.

Houssein Djirdeh

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

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

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 است.

برای فعال کردن پرزهای از پیش پیکربندی شده ارائه شده توسط 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-ax استفاده کنید

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 root بارگیری می‌کند. این تضمین می کند که در صورت غیر ضروری بودن، در بسته تولید نهایی گنجانده نمی شود.

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

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

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

نتیجه گیری

ممیزی دسترس‌پذیری را در اوایل گردش کار خود لحاظ کنید تا هنگام ایجاد برنامه‌های React خود مشکلاتی را پیدا کنید eslint-plugin-jsx-a11y برای اضافه کردن بررسی‌های دسترسی به گردش کار linting خود استفاده کنید. CRA قبلاً شامل آن می‌شود، اما می‌توانید به حالت توصیه‌شده یا سخت تغییر دهید.

علاوه بر آزمایش توسعه محلی، react-axe در برنامه خود بگنجانید تا هر مشکلی را در DOM رندر نهایی پیدا کنید. آن را در بسته تولید خود وارد نکنید.