آیا میخواهید سایت Angular خود را برای همه قابل دسترس کنید؟ اینجا جای مناسبی است!
دسترسیپذیر کردن برنامه شما به این معنی است که همه کاربران، از جمله افراد دارای نیازهای ویژه، بتوانند از آن استفاده کنند و محتوای آن را درک کنند. طبق گزارش بهداشت جهانی ، بیش از یک میلیارد نفر - حدود ۱۵٪ از جمعیت جهان - نوعی معلولیت دارند. بنابراین دسترسیپذیری برای هر پروژه توسعهای اولویت دارد.
در این پست یاد خواهید گرفت که چگونه بررسیهای دسترسیپذیری 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 یا قالبهای درونخطی نشان میدهد: