আপনার অ্যাঙ্গুলার সাইটটি সবার জন্য অ্যাক্সেসযোগ্য করে তুলতে চান? এটিই সঠিক জায়গা!
আপনার অ্যাপটি অ্যাক্সেসযোগ্য করে তোলার অর্থ হল, বিশেষ চাহিদা সম্পন্ন ব্যবহারকারীসহ সকল ব্যবহারকারী এটি ব্যবহার করতে এবং এর বিষয়বস্তু বুঝতে পারবেন। বিশ্ব স্বাস্থ্য প্রতিবেদন অনুসারে, এক বিলিয়নেরও বেশি মানুষ - বিশ্বের জনসংখ্যার প্রায় ১৫% - কোন না কোন ধরণের প্রতিবন্ধকতা ভোগ করে। তাই যেকোনো উন্নয়ন প্রকল্পের জন্য অ্যাক্সেসযোগ্যতা একটি অগ্রাধিকার।
এই পোস্টে আপনি শিখবেন কিভাবে একটি Angular অ্যাপের বিল্ড প্রক্রিয়ায় কোডলাইজারের অ্যাক্সেসিবিলিটি চেক যোগ করতে হয়। এই পদ্ধতিটি আপনাকে কোড করার সময় সরাসরি আপনার টেক্সট এডিটরে অ্যাক্সেসিবিলিটি বাগ ধরতে দেয়।
অ্যাক্সেসযোগ্য উপাদান সনাক্ত করতে কোডলাইজার ব্যবহার করা
কোডলাইজার হল এমন একটি টুল যা TSLint- এর উপরে বসে এবং Angular TypeScript প্রকল্পগুলি লিন্টিং নিয়মের একটি সেট অনুসরণ করে কিনা তা পরীক্ষা করে। Angular কমান্ড লাইন ইন্টারফেস (CLI) দিয়ে সেট করা প্রকল্পগুলিতে ডিফল্টরূপে কোডলাইজার অন্তর্ভুক্ত থাকে।
কোডলাইজারে ৫০টিরও বেশি নিয়ম রয়েছে যা অ্যাঙ্গুলার অ্যাপ্লিকেশনটি সর্বোত্তম অনুশীলন অনুসরণ করে কিনা তা পরীক্ষা করে। এর মধ্যে, অ্যাক্সেসিবিলিটি মানদণ্ড প্রয়োগের জন্য প্রায় ১০টি নিয়ম রয়েছে। কোডলাইজার দ্বারা প্রদত্ত বিভিন্ন অ্যাক্সেসিবিলিটি চেক এবং তাদের যুক্তি সম্পর্কে জানতে, কোডলাইজারে নতুন অ্যাক্সেসিবিলিটি নিয়ম নিবন্ধটি দেখুন।
বর্তমানে, সমস্ত অ্যাক্সেসিবিলিটি নিয়ম পরীক্ষামূলক এবং ডিফল্টরূপে অক্ষম। আপনি 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 চেক করুন।
কোডলাইজারের অ্যাক্সেসিবিলিটি চেক সেট আপ করার সাথে সাথে, আপনি কোড করার সময় টাইপস্ক্রিপ্ট ফাইল বা ইনলাইন টেমপ্লেটগুলিতে অ্যাক্সেসিবিলিটি ত্রুটিগুলি দেখানো একটি পপআপ পাবেন: