دسترسپذیری (Accessibility)
[ منبع ]پیادهسازی روشهای دسترسپذیری#
برای اطمینان از حفظ دسترسپذیری، از همان ابتدا این قوانین را در پروژه خود اعمال کنید:
- با استفاده از ابزارهایی مانند lighthouse ↗ یا افزونه axe DevTools ↗ برنامهریزیهایی جهت بررسی ادواری دسترسیپذیری ↗ به طور منظم انجام دهید. بر اساس نیاز پروژه، اهداف و امتیازات حداقلیای برای دسترسپذیری تعیین و توافق کنید و این امتیازات را بر اساس تأثیر کاربر ↗ ارزیابی کنید.
- یک لینتر (Linter) مرتبط برای بررسی دسترسپذیری نصب کنید:
- برای React: از eslint-plugin-jsx-a11y ↗ استفاده کنید.
- برای Angular: از Angular Codelyzer ↗ بهره ببرید.
- برای Vue: از eslint-plugin-vuejs-accessibility ↗ استفاده کنید.
-
با استفاده از ابزارهایی مانند axe-core ↗ یا مشابه آن، میتوانید تستهای دسترسیپذیری را راهاندازی و اجرا کنید.
-
اگر از Storybook استفاده میکنید، دستورالعملهای آن ↗ را دنبال کنید.
- از دیزاین سیستمهای منطبق بر دسترسیپذیری مانند React Spectrum ↗ یا Material Design ↗ بهره ببرید.
قوانین پایه دسترسپذیری#
- از دسترسپذیر بودن نام لینکها اطمینان حاصل کنید. از
aria-label
برای توصیف لینکها استفاده کنید.
- اطمینان حاصل کنید که لیستها بهدرستی ساختاربندی شده باشند تا معتبر و قابل درک باشند.
- از رعایت ترتیب معنایی سرفصلها (Heading Order) اطمینان حاصل کنید.
- از کُنتراست (تضاد رنگی) مناسب میان متن و پسزمینه اطمینان حاصل کنید.
- برای تصاویر، متن جایگزین کوتاه و توصیفی (Alt Text) ارائه دهید.
برای آشنایی بیشتر با دیگر قوانین دسترسپذیری میتوانید به این منبع ↗ مراجعه کنید.