ম্যানুয়াল পরীক্ষার মূল বিষয়গুলি
ম্যানুয়াল অ্যাক্সেসিবিলিটি টেস্টিং-এ কিবোর্ড, ভিজ্যুয়াল এবং কগনিটিভ পরীক্ষা, টুল ও কৌশল ব্যবহার করা হয় এমন সব সমস্যা খুঁজে বের করার জন্য, যা স্বয়ংক্রিয় টুল খুঁজে পায় না। যেহেতু স্বয়ংক্রিয় টুল WCAG-এ চিহ্নিত সমস্ত সফলতার মানদণ্ড পূরণ করে না, তাই স্বয়ংক্রিয় অ্যাক্সেসিবিলিটি পরীক্ষা চালানো এবং তা চালিয়ে যাওয়া অত্যন্ত জরুরি !
প্রযুক্তির অগ্রগতির সাথে সাথে, শুধুমাত্র স্বয়ংক্রিয় সরঞ্জাম দিয়েই আরও বেশি পরীক্ষা সম্পন্ন করা সম্ভব হতে পারে , কিন্তু বর্তমানে, প্রযোজ্য সমস্ত WCAG চেকপয়েন্ট অন্তর্ভুক্ত করার জন্য আপনার টেস্টিং প্রোটোকলে ম্যানুয়াল এবং সহায়ক প্রযুক্তি উভয় ধরনের যাচাই যোগ করা প্রয়োজন।
ম্যানুয়াল অ্যাক্সেসিবিলিটি পরীক্ষার সুবিধা:
- চালানো বেশ সহজ এবং দ্রুত।
- শুধুমাত্র স্বয়ংক্রিয় পরীক্ষার তুলনায় অধিক শতাংশ সমস্যা শনাক্ত করে।
- সফলতার জন্য সামান্য সরঞ্জাম ও দক্ষতার প্রয়োজন।
ম্যানুয়াল অ্যাক্সেসিবিলিটি পরীক্ষার অসুবিধাগুলো:
- স্বয়ংক্রিয় পরীক্ষার চেয়ে বেশি জটিল এবং সময়সাপেক্ষ
- বৃহৎ পরিসরে পুনরাবৃত্তি করা কঠিন হতে পারে
- পরীক্ষা চালাতে ও ফলাফল ব্যাখ্যা করতে আরও বেশি অ্যাক্সেসিবিলিটি দক্ষতার প্রয়োজন।
একটি স্বয়ংক্রিয় টুল দ্বারা কোন কোন অ্যাক্সেসিবিলিটি উপাদান ও বিবরণ শনাক্ত করা যায় এবং কোনগুলো করা যায় না, তা তুলনা করুন।
ম্যানুয়াল পরীক্ষার প্রকারভেদ
আপনার ওয়েব পেজ বা অ্যাপের ডিজিটাল অ্যাক্সেসিবিলিটি যাচাই করার সময় বিবেচনা করার মতো অনেক ম্যানুয়াল টুল ও কৌশল রয়েছে। ম্যানুয়াল পরীক্ষার ক্ষেত্রে সবচেয়ে গুরুত্বপূর্ণ তিনটি ক্ষেত্র হলো কিবোর্ডের কার্যকারিতা, দৃশ্যগত পর্যালোচনা এবং সাধারণ বিষয়বস্তু যাচাই।
এই মডিউলে আমরা এই প্রতিটি বিষয়কে একটি উচ্চ স্তরে আলোচনা করেছি, কিন্তু নিম্নলিখিত পরীক্ষাগুলো এমন সমস্ত ম্যানুয়াল পরীক্ষার একটি সম্পূর্ণ তালিকা নয় যা আপনি চালাতে পারেন বা চালানো উচিত। আমরা আপনাকে একটি নির্ভরযোগ্য উৎস থেকে ম্যানুয়াল অ্যাক্সেসিবিলিটি চেকলিস্ট দিয়ে শুরু করতে এবং আপনার নির্দিষ্ট ডিজিটাল পণ্য ও দলের প্রয়োজন অনুসারে আপনার নিজস্ব একটি সুনির্দিষ্ট ম্যানুয়াল টেস্টিং চেকলিস্ট তৈরি করতে উৎসাহিত করি।
কিবোর্ড চেক
অনুমান করা হয় যে, সমস্ত ডিজিটাল অ্যাক্সেসিবিলিটি সমস্যার প্রায় ২৫% কিবোর্ড সাপোর্টের অভাবের সাথে সম্পর্কিত। আমরা কিবোর্ড ফোকাস মডিউলে যেমন শিখেছি, এটি সব ধরনের ব্যবহারকারীকে প্রভাবিত করে, যার মধ্যে রয়েছেন দৃষ্টিসম্পন্ন শুধুমাত্র কিবোর্ড ব্যবহারকারী, স্বল্প-দৃষ্টিসম্পন্ন/অন্ধ স্ক্রিন রিডার ব্যবহারকারী, এবং এমন ভয়েস রিকগনিশন সফটওয়্যার ব্যবহারকারী যারা এমন প্রযুক্তি ব্যবহার করেন যা কন্টেন্টের কিবোর্ড অ্যাক্সেসিবল হওয়ার উপরও নির্ভর করে।
কিবোর্ড টেস্ট নিম্নলিখিত প্রশ্নগুলোর উত্তর দেয়:
- ওয়েব পেজ বা ফিচারটি কাজ করার জন্য কি মাউসের প্রয়োজন হয়?
- ট্যাবিং ক্রমটি কি যৌক্তিক এবং স্বজ্ঞাত?
- কিবোর্ড ফোকাস ইন্ডিকেটরটি কি সবসময় দেখা যায়?
- আপনি কি এমন কোনো উপাদানে আটকে যেতে পারেন যা মনোযোগ আকর্ষণ করা উচিত নয়?
- আপনি কি এমন কোনো উপাদানের পিছনে বা চারপাশে যেতে পারেন যা ফোকাস আটকে রাখার কথা?
- ফোকাস প্রাপ্ত কোনো এলিমেন্ট বন্ধ করার সময়, ফোকাস ইন্ডিকেটরটি কি একটি যৌক্তিক স্থানে ফিরে এসেছিল?
যদিও কিবোর্ড ব্যবহারের প্রভাব ব্যাপক, এর পরীক্ষা পদ্ধতি বেশ সহজ। আপনাকে শুধু আপনার মাউসটি সরিয়ে রাখতে হবে অথবা একটি ছোট জাভাস্ক্রিপ্ট প্যাকেজ ইনস্টল করে শুধুমাত্র কিবোর্ড ব্যবহার করে আপনার ওয়েবসাইটটি পরীক্ষা করতে হবে। কিবোর্ড পরীক্ষার জন্য নিম্নলিখিত কমান্ডগুলো অপরিহার্য।
চাক্ষুষ পরীক্ষা
ভিজ্যুয়াল চেক পেজের দৃশ্যমান উপাদানগুলোর উপর আলোকপাত করে এবং ওয়েবসাইট বা অ্যাপটির অ্যাক্সেসিবিলিটি পর্যালোচনা করার জন্য স্ক্রিন ম্যাগনিফিকেশন বা ব্রাউজার জুমের মতো টুল ব্যবহার করে।
চাক্ষুষ পরীক্ষা আপনাকে বলতে পারে:
- রঙের বৈসাদৃশ্যের এমন কোনো সমস্যা কি আছে যা কোনো স্বয়ংক্রিয় টুল ধরতে পারে না, যেমন কোনো গ্রেডিয়েন্ট বা ছবির উপরে থাকা লেখা?
- এমন কোনো উপাদান আছে কি যা দেখতে শিরোনাম, তালিকা এবং অন্যান্য কাঠামোগত উপাদানের মতো, কিন্তু সেভাবে কোড করা হয়নি?
- ওয়েবসাইট বা অ্যাপ জুড়ে নেভিগেশন লিঙ্ক এবং ফর্ম ইনপুটগুলো কি সামঞ্জস্যপূর্ণ?
- এমন কোনো ফ্ল্যাশিং, স্ট্রোবিং বা অ্যানিমেশন আছে কি যা সুপারিশকৃত মাত্রা অতিক্রম করেছে?
- লেখাটির মধ্যে অক্ষর, শব্দ, লাইন এবং অনুচ্ছেদের জন্য যথাযথ ব্যবধান আছে কি?
- আপনি কি স্ক্রিন ম্যাগনিফায়ার বা ব্রাউজার জুম ব্যবহার করে সমস্ত বিষয়বস্তু দেখতে পাচ্ছেন?
বিষয়বস্তু যাচাই
চাক্ষুষ পরীক্ষার মতো নয়, যেখানে বিন্যাস, নড়াচড়া এবং রঙের উপর মনোযোগ দেওয়া হয়, বিষয়বস্তু যাচাইয়ের মূল লক্ষ্য হলো পৃষ্ঠার লেখাগুলো। আপনার শুধু মূল লেখাটিই দেখা উচিত নয়, বরং এর প্রেক্ষাপটও পর্যালোচনা করা উচিত, যাতে নিশ্চিত হওয়া যায় যে এটি অন্যদের কাছেও বোধগম্য হচ্ছে।
বিষয়বস্তু যাচাই নিম্নলিখিত প্রশ্নগুলোর উত্তর দেয়:
- পৃষ্ঠার শিরোনাম, হেডিং এবং ফর্মের লেবেলগুলো কি স্পষ্ট ও বর্ণনামূলক?
- ছবির বিকল্পগুলো কি সংক্ষিপ্ত, নির্ভুল এবং কার্যকর?
- অর্থ বা তথ্য প্রকাশের একমাত্র উপায় হিসেবে কি শুধু রঙই ব্যবহৃত হয়?
- লিঙ্কগুলো কি বর্ণনামূলক, নাকি আপনি "আরও পড়ুন" বা "এখানে ক্লিক করুন"-এর মতো সাধারণ লেখা ব্যবহার করেন?
- একটি পৃষ্ঠার মধ্যে ভাষায় কোনো পরিবর্তন আছে কি?
- সহজ ভাষা ব্যবহার করা হয় কি এবং প্রথমবার উল্লেখ করার সময় সমস্ত সংক্ষিপ্ত রূপের পূর্ণরূপ লেখা হয় কি?
কিছু কন্টেন্ট চেক আংশিকভাবে স্বয়ংক্রিয় করা যেতে পারে। উদাহরণস্বরূপ, আপনি একটি জাভাস্ক্রিপ্ট লিন্টার লিখতে পারেন যা "এখানে ক্লিক করুন" লেখাটি পরীক্ষা করে এবং আপনাকে কোনো পরিবর্তন করার পরামর্শ দেয়। তবে, এই ধরনের কাস্টম সমাধানেও প্রায়শই লেখাটিকে প্রাসঙ্গিক কিছুতে পরিবর্তন করার জন্য একজন মানুষের প্রয়োজন হয়।
ডেমো: ম্যানুয়াল পরীক্ষা
এখন পর্যন্ত, আমরা আমাদের ডেমো ওয়েব পেজে স্বয়ংক্রিয় পরীক্ষা চালিয়ে আটটি ভিন্ন ধরনের সমস্যা খুঁজে বের করে তার সমাধান করেছি। আমরা এখন ম্যানুয়াল পরীক্ষা চালানোর জন্য প্রস্তুত, যাতে আরও বেশি অ্যাক্সেসিবিলিটি সমস্যা খুঁজে পাওয়া যায়।
ধাপ ১
আমাদের আপডেট করা কোডপেন ডেমোতে সমস্ত স্বয়ংক্রিয় অ্যাক্সেসিবিলিটি আপডেট প্রয়োগ করা হয়েছে।
পরবর্তী টেস্টগুলো চালিয়ে যাওয়ার জন্য এটিকে ডিবাগ মোডে দেখুন। এটি গুরুত্বপূর্ণ, কারণ এটি ডেমো ওয়েব পেজটিকে ঘিরে থাকা <iframe> সরিয়ে দেয়, যা কিছু টেস্টিং টুলের কাজে বাধা সৃষ্টি করতে পারে। CodePen-এর ডিবাগ মোড সম্পর্কে আরও জানুন।
ধাপ ২
আপনার ম্যানুয়াল টেস্টিং প্রক্রিয়া শুরু করতে, মাউস বা ট্র্যাকপ্যাড একপাশে সরিয়ে রাখুন এবং শুধুমাত্র কিবোর্ড ব্যবহার করে DOM-এর উপরে ও নিচে চলাচল করুন।
সমস্যা ১: দৃশ্যমান ফোকাস নির্দেশক
আপনি প্রথম কীবোর্ডের সমস্যাটি সাথে সাথেই দেখতে পাবেন—অথবা বলা ভালো, দেখতে পাবেন না—কারণ দৃশ্যমান ফোকাস ইন্ডিকেটরটি সরিয়ে ফেলা হয়েছে। ডেমোর CSS কোডটি স্ক্যান করলে, আপনি কোডবেসে সেই ভয়ংকর "outline: none" যুক্ত হতে দেখবেন।
:focus {
outline: none;
}
আপনি কিবোর্ড ফোকাস মডিউলে যেমন শিখেছেন, ওয়েব ব্রাউজারগুলোকে ব্যবহারকারীদের জন্য একটি দৃশ্যমান ফোকাস যোগ করার সুযোগ দিতে আপনাকে এই কোড লাইনটি মুছে ফেলতে হবে। আপনি আরও এক ধাপ এগিয়ে গিয়ে আপনার ডিজিটাল পণ্যের নান্দনিকতার সাথে সামঞ্জস্য রেখে একটি ফোকাস ইন্ডিকেটর তৈরি করতে পারেন।
:focus {
outline: 3px dotted #008576;
}
সমস্যা ২: ফোকাস ক্রম
ফোকাস ইন্ডিকেটরটি পরিবর্তন করার পর এবং সেটি দৃশ্যমান হলে, পৃষ্ঠাটি ট্যাব চেপে স্ক্রল করতে ভুলবেন না। এটি করার সময়, আপনি লক্ষ্য করবেন যে নিউজলেটারে সাবস্ক্রাইব করার জন্য ব্যবহৃত ফর্ম ইনপুট ফিল্ডটি ফোকাস পাচ্ছে না। একটি নেগেটিভ ট্যাবইনডেক্সের মাধ্যমে এটিকে স্বাভাবিক ফোকাস ক্রম থেকে সরিয়ে দেওয়া হয়েছে।
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
যেহেতু আমরা চাই মানুষ আমাদের নিউজলেটারের জন্য সাইন-আপ করতে এই ফিল্ডটি ব্যবহার করুক, তাই আমাদের শুধু নেগেটিভ ট্যাবইনডেক্সটি সরিয়ে ফেলতে হবে অথবা এটিকে শূন্যে সেট করতে হবে, যাতে ইনপুটটি আবার কিবোর্ড ফোকাসযোগ্য হয়ে ওঠে।
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>
ধাপ ৩
একবার কিবোর্ড ফোকাস যাচাই করা হয়ে গেলে, আমরা ভিজ্যুয়াল এবং কন্টেন্ট যাচাইয়ের দিকে অগ্রসর হই।
সমস্যা ৩: লিঙ্কের রঙের বৈসাদৃশ্য
ডেমো পেজে ট্যাব উপরে-নিচে চেপে কিবোর্ড পরীক্ষা করার সময়, আপনি সম্ভবত লক্ষ্য করেছেন যে কিবোর্ডটি বিভিন্ন চিকিৎসা পরিস্থিতি সম্পর্কিত অনুচ্ছেদগুলিতে থাকা দৃশ্যত লুকানো তিনটি লিঙ্কের উপর ফোকাস করছিল।
আমাদের পেজটিকে অ্যাক্সেসযোগ্য করার জন্য, লিঙ্কগুলিকে অবশ্যই চারপাশের লেখা থেকে আলাদাভাবে দৃশ্যমান হতে হবে এবং মাউস হোভার ও কিবোর্ড ফোকাসের সময় সেগুলির স্টাইলে কোনো রঙ পরিবর্তন হওয়া চলবে না।
একটি দ্রুত সমাধান হলো অনুচ্ছেদের ভেতরের লিঙ্কগুলোতে আন্ডারলাইন যোগ করে সেগুলোকে আলাদাভাবে ফুটিয়ে তোলা। এতে অ্যাক্সেসিবিলিটির সমস্যাটির সমাধান হবে, কিন্তু এটি আপনার কাঙ্ক্ষিত সামগ্রিক ডিজাইন নান্দনিকতার সাথে নাও মিলতে পারে।
যদি আপনি আন্ডারলাইন যোগ না করার সিদ্ধান্ত নেন, তাহলে আপনাকে রংগুলো এমনভাবে পরিবর্তন করতে হবে যাতে তা ব্যাকগ্রাউন্ড এবং লেখা উভয়ের শর্ত পূরণ করে।
একটি লিঙ্ক কনট্রাস্ট চেকার টুল ব্যবহার করে ডেমোটি দেখলে আপনি দেখতে পাবেন যে, লিঙ্কের রঙটি সাধারণ আকারের টেক্সট এবং ব্যাকগ্রাউন্ডের মধ্যে ৪.৫:১ কালার কনট্রাস্টের শর্ত পূরণ করে। তবে, আন্ডারলাইন করা নয় এমন লিঙ্কগুলোকে অবশ্যই চারপাশের টেক্সটের সাথে ৩:১ কালার কনট্রাস্টের শর্তও পূরণ করতে হবে।
একটি উপায় হলো পেজের অন্যান্য উপাদানের সাথে মিলিয়ে লিঙ্কের রঙ পরিবর্তন করা। কিন্তু আপনি যদি লিঙ্কের রঙ সবুজ করেন, তাহলে লিঙ্ক, ব্যাকগ্রাউন্ড এবং চারপাশের লেখা—এই তিনটি উপাদানের মধ্যে সামগ্রিক রঙের বৈসাদৃশ্যের প্রয়োজনীয়তা মেটাতে মূল লেখাটিও পরিবর্তন করতে হবে।


সমস্যা ৪: আইকনের রঙের বৈসাদৃশ্য
রঙের বৈসাদৃশ্যের আরেকটি উপেক্ষিত বিষয় হলো সোশ্যাল মিডিয়া আইকনগুলো। রঙ ও বৈসাদৃশ্য মডিউলে আপনারা শিখেছেন যে, অপরিহার্য আইকনগুলোর পটভূমির সাথে ৩:১ রঙের বৈসাদৃশ্য থাকা প্রয়োজন। কিন্তু, ডেমোতে সোশ্যাল মিডিয়া আইকনগুলোর বৈসাদৃশ্য অনুপাত হলো ১.৩:১।
৩:১ রঙের বৈসাদৃশ্যের শর্ত পূরণ করার জন্য, সোশ্যাল মিডিয়া আইকনগুলোকে আরও গাঢ় ধূসর রঙে পরিবর্তন করা হয়েছে।

সমস্যা ৫: বিষয়বস্তুর বিন্যাস
আপনি যদি অনুচ্ছেদের বিষয়বস্তুর বিন্যাসটি দেখেন, তাহলে দেখবেন লেখাটি সম্পূর্ণ জাস্টিফাইড। টাইপোগ্রাফি মডিউলে যেমন শিখেছেন, এটি ‘ফাঁকা জায়গার স্রোত’ তৈরি করে, যা কিছু ব্যবহারকারীর জন্য লেখাটি পড়তে কঠিন করে তুলতে পারে।
p.bullet {
text-align: justify;
}
ডেমোতে টেক্সট অ্যালাইনমেন্ট রিসেট করতে, আপনি কোডটি আপডেট করে ` text-align: left; ব্যবহার করতে পারেন অথবা CSS থেকে ওই লাইনটি পুরোপুরি মুছে ফেলতে পারেন, কারণ ব্রাউজারগুলোর জন্য লেফট (left) হলো ডিফল্ট অ্যালাইনমেন্ট। কোডটি অবশ্যই পরীক্ষা করে দেখবেন, কারণ অন্য কোনো ইনহেরিটেড স্টাইল ডিফল্ট টেক্সট অ্যালাইনমেন্টটি সরিয়ে দিতে পারে।
p.bullet {
text-align: left;
}
ধাপ ৪

পূর্ববর্তী ধাপগুলিতে বর্ণিত সমস্ত ম্যানুয়াল অ্যাক্সেসিবিলিটি সমস্যা শনাক্ত করে সমাধান করার পরে, আপনার পৃষ্ঠাটি আমাদের স্ক্রিনশটের মতো দেখতে হবে।
এই মডিউলে আমরা যা আলোচনা করেছি, তার চেয়েও বেশি অ্যাক্সেসিবিলিটি সমস্যা আপনি আপনার ম্যানুয়াল যাচাইয়ে খুঁজে পেতে পারেন। এই সমস্যাগুলোর মধ্যে অনেকগুলোই আমরা পরবর্তী মডিউলে আলোচনা করব।
পরবর্তী পদক্ষেপ
সাবাশ! আপনি স্বয়ংক্রিয় এবং ম্যানুয়াল টেস্টিং মডিউলগুলো সম্পন্ন করেছেন। আপনি আমাদের আপডেট করা কোডপেন দেখতে পারেন, যেখানে সমস্ত স্বয়ংক্রিয় এবং ম্যানুয়াল অ্যাক্সেসিবিলিটি ফিক্সগুলো প্রয়োগ করা হয়েছে।
এখন, সহায়ক প্রযুক্তি পরীক্ষার উপর কেন্দ্র করে তৈরি শেষ টেস্টিং মডিউলটিতে যান।