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