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

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

Minko Gechev

Zama Khan Mohammed

در دسترس قرار دادن برنامه شما به این معنی است که همه کاربران، از جمله آنهایی که نیازهای ویژه دارند، می توانند از آن استفاده کنند و محتوا را درک کنند. بر اساس گزارش بهداشت جهانی ، بیش از یک میلیارد نفر - حدود 15 درصد از جمعیت جهان - دارای نوعی ناتوانی هستند. بنابراین دسترسی یک اولویت برای هر پروژه توسعه است.

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

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

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

codelyzer بیش از 50 قانون برای بررسی اینکه آیا یک برنامه Angular از بهترین شیوه ها پیروی می کند یا خیر، دارد. از این میان، حدود 10 قانون برای اجرای معیارهای دسترسی وجود دارد. برای آشنایی با انواع بررسی های دسترسی ارائه شده توسط 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 یا الگوهای درون خطی هنگام کدنویسی نشان می‌دهد:

یک پنجره بازشو Codelyzer که خطای برچسب‌گذاری عنصر فرم را نشان می‌دهد.

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

تکمیل کننده کدلایزر

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

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

اجرای بررسی های دسترسی در ادغام مداوم شما

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

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

نتیجه

برای بهبود دسترسی به برنامه Angular:

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