قابلیت دسترسی برنامه Angular خود را با Codelyzer بررسی کنید

آیا می‌خواهید سایت Angular خود را برای همه قابل دسترس کنید؟ اینجا جای مناسبی است!

Minko Gechev

Zama Khan Mohammed

دسترسی‌پذیر کردن برنامه شما به این معنی است که همه کاربران، از جمله افراد دارای نیازهای ویژه، بتوانند از آن استفاده کنند و محتوای آن را درک کنند. طبق گزارش بهداشت جهانی ، بیش از یک میلیارد نفر - حدود ۱۵٪ از جمعیت جهان - نوعی معلولیت دارند. بنابراین دسترسی‌پذیری برای هر پروژه توسعه‌ای اولویت دارد.

در این پست یاد خواهید گرفت که چگونه بررسی‌های دسترسی‌پذیری codelyzer را به فرآیند ساخت یک برنامه Angular اضافه کنید. این رویکرد به شما امکان می‌دهد هنگام کدنویسی، اشکالات دسترسی‌پذیری را مستقیماً در ویرایشگر متن خود پیدا کنید.

استفاده از codelyzer برای تشخیص عناصر غیرقابل دسترس

codelyzer ابزاری است که بر روی TSLint قرار می‌گیرد و بررسی می‌کند که آیا پروژه‌های Angular TypeScript از مجموعه‌ای از قوانین linting پیروی می‌کنند یا خیر. پروژه‌هایی که با رابط خط فرمان (CLI) Angular راه‌اندازی می‌شوند، به طور پیش‌فرض شامل codelyzer هستند.

codelyzer بیش از ۵۰ قانون برای بررسی اینکه آیا یک برنامه Angular از بهترین شیوه‌ها پیروی می‌کند یا خیر، دارد. از این تعداد، حدود ۱۰ قانون برای اجرای معیارهای دسترسی وجود دارد. برای کسب اطلاعات در مورد بررسی‌های مختلف دسترسی ارائه شده توسط codelyzer و منطق آنها، به مقاله قوانین جدید دسترسی در Codelyzer مراجعه کنید.

در حال حاضر، تمام قوانین دسترسی به صورت آزمایشی و به طور پیش‌فرض غیرفعال هستند. می‌توانید با اضافه کردن آنها به فایل پیکربندی TSLint ( tslint.json ) آنها را فعال کنید:

{
  "rulesDirectory": [
    "codelyzer"
  ],
  "rules": {
    ...,
    "template-accessibility-alt-text": true,
    "template-accessibility-elements-content": true,
    "template-accessibility-label-for": true,
    "template-accessibility-tabindex-no-positive": true,
    "template-accessibility-table-scope": true,
    "template-accessibility-valid-aria": true,
    "template-click-events-have-key-events": true,
    "template-mouse-events-have-key-events": true,
    "template-no-autofocus": true,
    "template-no-distracting-elements": true
  }
}

TSLint با تمام ویرایشگرهای متن و IDE های محبوب کار می‌کند. برای استفاده از آن با VSCode، افزونه TSLint را نصب کنید. در WebStorm، TSLint به طور پیش‌فرض فعال است. برای سایر ویرایشگرها، TSLint README را بررسی کنید.

با تنظیم بررسی‌های دسترسی‌پذیری codelyzer، هنگام کدنویسی، یک پنجره‌ی پاپ‌آپ نمایش داده می‌شود که خطاهای دسترسی‌پذیری را در فایل‌های TypeScript یا قالب‌های درون‌خطی نشان می‌دهد:

برای انجام linting روی کل پروژه (شامل قالب‌های خارجی)، از دستور ng lint استفاده کنید:

مکمل کدلیزر

Lighthouse ابزار دیگری است که می‌توانید برای اعمال رویه‌های دسترسی‌پذیری در برنامه Angular خود از آن استفاده کنید. تفاوت اصلی بین codelyzer و Lighthouse در زمان انجام بررسی‌های آنهاست. Codelyzer برنامه را در زمان توسعه، بدون اجرای آن، به صورت ایستا تجزیه و تحلیل می‌کند. این بدان معناست که در طول توسعه می‌توانید بازخورد مستقیم را در ویرایشگر متن یا در ترمینال خود دریافت کنید. در مقابل، Lighthouse در واقع برنامه شما را اجرا می‌کند و با استفاده از تجزیه و تحلیل پویا، مجموعه‌ای از بررسی‌ها را انجام می‌دهد.

هر دو ابزار می‌توانند بخش‌های مفیدی از جریان توسعه شما باشند. Lighthouse با توجه به بررسی‌هایی که انجام می‌دهد، پوشش بهتری دارد، در حالی که codelyzer با دریافت بازخورد مداوم در ویرایشگر متن، به شما امکان می‌دهد سریع‌تر تکرار کنید.

اجرای بررسی‌های دسترسی‌پذیری در یکپارچه‌سازی مداوم شما

معرفی بررسی‌های دسترسی استاتیک در یکپارچه‌سازی مداوم (CI) می‌تواند پیشرفت بزرگی برای جریان توسعه شما باشد. با codelyzer می‌توانید به راحتی قوانین دسترسی خاص یا سایر شیوه‌ها را با اجرای ng lint روی هر تغییر کد (به عنوان مثال برای هر درخواست pull جدید) اعمال کنید.

به این ترتیب، حتی قبل از اینکه به بررسی کد بپردازید، CI شما می‌تواند به شما بگوید که آیا نقض دسترسی وجود دارد یا خیر.

نتیجه‌گیری

برای بهبود دسترسی‌پذیری برنامه‌ی Angular خود:

1. قوانین دسترسی آزمایشی را در codelyzer فعال کنید.
2. با استفاده از Angular CLI، linting دسترسی‌پذیری را در کل پروژه خود انجام دهید.
3. تمام مشکلات دسترسی گزارش شده توسط codelyzer را برطرف کنید.
4. استفاده از Lighthouse را برای ممیزی‌های دسترسی در زمان اجرا در نظر بگیرید.