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