সহায়ক প্রযুক্তি পরীক্ষা

এই মডিউলটি প্রবেশগম্যতা পরীক্ষার জন্য সহায়ক প্রযুক্তি (এটি) ব্যবহারের উপর আলোকপাত করে। একজন প্রতিবন্ধী ব্যক্তি কোনো কাজ সম্পাদনের সক্ষমতা বাড়াতে, বজায় রাখতে বা উন্নত করতে সহায়ক প্রযুক্তি ব্যবহার করতে পারেন।

ডিজিটাল জগতে, সহায়ক প্রযুক্তিগুলো হতে পারে:

• প্রযুক্তিবিহীন বা স্বল্প-প্রযুক্তির: মাথা ও মুখের কাঠি, হাতে ধরা বিবর্ধক যন্ত্র, বড় বোতামযুক্ত ডিভাইস
• উচ্চ প্রযুক্তি: কণ্ঠস্বর-চালিত ডিভাইস, আই-ট্র্যাকিং ডিভাইস, অ্যাডাপ্টিভ কিবোর্ড এবং মাউস
• হার্ডওয়্যার: সুইচ বাটন, আর্গোনমিক কিবোর্ড, অটো-রিফ্রেশিং ব্রেইল ডিভাইস
• সফটওয়্যার: টেক্সট-টু-স্পিচ প্রোগ্রাম, লাইভ ক্যাপশন, স্ক্রিন রিডার

আমরা আপনাকে আপনার সামগ্রিক টেস্টিং কার্যপ্রবাহে একাধিক ধরনের AT ব্যবহার করতে উৎসাহিত করি।

স্ক্রিন রিডার পরীক্ষার প্রাথমিক বিষয়

এই মডিউলে আমরা সবচেয়ে জনপ্রিয় ডিজিটাল সহায়ক প্রযুক্তিগুলোর মধ্যে অন্যতম, স্ক্রিন রিডার নিয়ে আলোচনা করব। স্ক্রিন রিডার হলো এক ধরনের সফটওয়্যার যা কোনো ওয়েবসাইট বা অ্যাপের অন্তর্নিহিত কোড পড়ে। এরপর এটি সেই তথ্যকে ব্যবহারকারীর জন্য কথ্য ভাষা বা ব্রেইল আউটপুটে রূপান্তরিত করে।

অন্ধ এবং বধির-অন্ধ ব্যক্তিদের জন্য স্ক্রিন রিডার অপরিহার্য, তবে এটি স্বল্প দৃষ্টি, পঠন সমস্যা এবং জ্ঞানীয় অক্ষমতা সম্পন্ন ব্যক্তিদের জন্যও উপকারী হতে পারে।

ব্রাউজার সামঞ্জস্যতা

একাধিক স্ক্রিন রিডার বিকল্প উপলব্ধ আছে। ডেস্কটপ কম্পিউটারের জন্য সবচেয়ে জনপ্রিয় স্ক্রিন রিডারগুলো হলো JAWS, NVDA ও VoiceOver এবং মোবাইল ডিভাইসের জন্য VoiceOver ও Talkback।

আপনার অপারেটিং সিস্টেম (OS), পছন্দের ব্রাউজার এবং ব্যবহৃত ডিভাইসের উপর নির্ভর করে, কোনো একটি স্ক্রিন রিডার সেরা বিকল্প হিসেবে উঠে আসতে পারে। বেশিরভাগ স্ক্রিন রিডার নির্দিষ্ট হার্ডওয়্যার এবং ওয়েব ব্রাউজারকে মাথায় রেখে তৈরি করা হয়। যখন আপনি এমন কোনো ব্রাউজারের সাথে স্ক্রিন রিডার ব্যবহার করেন যার জন্য এটি ক্যালিব্রেট করা হয়নি, তখন আপনি আরও বেশি "বাগ" বা অপ্রত্যাশিত আচরণের সম্মুখীন হতে পারেন। স্ক্রিন রিডারগুলো নিম্নলিখিত সংমিশ্রণে ব্যবহার করলে সবচেয়ে ভালোভাবে কাজ করে।

স্ক্রিন রিডার কমান্ড

আপনার ডেস্কটপ বা মোবাইল ডিভাইসের জন্য স্ক্রিন রিডার সফটওয়্যারটি সঠিকভাবে সেট-আপ করার পর, আপনার উচিত স্ক্রিন রিডারের ডকুমেন্টেশন (পূর্ববর্তী টেবিলে লিঙ্ক দেওয়া আছে) দেখে নেওয়া এবং প্রযুক্তিটির সাথে পরিচিত হওয়ার জন্য কিছু অপরিহার্য স্ক্রিন রিডার কমান্ড ব্যবহার করে দেখা। আপনি যদি আগে কোনো স্ক্রিন রিডার ব্যবহার করে থাকেন, তবে একটি নতুনটি ব্যবহার করে দেখতে পারেন!

অ্যাক্সেসিবিলিটি টেস্টিংয়ের জন্য স্ক্রিন রিডার ব্যবহার করার সময়, আপনার লক্ষ্য হলো কোডের সেইসব সমস্যা খুঁজে বের করা যা আপনার ওয়েবসাইট বা অ্যাপ ব্যবহারে বাধা সৃষ্টি করে; কোনো স্ক্রিন রিডার ব্যবহারকারীর অভিজ্ঞতা অনুকরণ করা আপনার উদ্দেশ্য নয়। সেই হিসেবে, কিছু প্রাথমিক জ্ঞান, কয়েকটি স্ক্রিন রিডার কমান্ড এবং কিছুটা (বা অনেকটা) অনুশীলনের মাধ্যমে আপনি অনেক কিছুই করতে পারেন।

স্ক্রিন রিডার এবং অন্যান্য সহায়ক প্রযুক্তি (AT) ব্যবহারকারীদের অভিজ্ঞতা আরও ভালোভাবে বোঝার প্রয়োজন হলে, এই মূল্যবান অন্তর্দৃষ্টি অর্জনের জন্য আপনি অনেক সংস্থা ও ব্যক্তির সাথে যোগাযোগ করতে পারেন। মনে রাখবেন যে, কিছু নির্দিষ্ট নিয়মের ভিত্তিতে কোড পরীক্ষা করার জন্য সহায়ক প্রযুক্তি ব্যবহার করা এবং ব্যবহারকারীদের তাদের অভিজ্ঞতা সম্পর্কে জিজ্ঞাসা করা—এই দুটি প্রায়শই ভিন্ন ফলাফল দেয়। সম্পূর্ণ অন্তর্ভুক্তিমূলক পণ্য তৈরি করার জন্য উভয়ই গুরুত্বপূর্ণ দিক।

ডেস্কটপ স্ক্রিন রিডারের জন্য কী কমান্ড

মোবাইল স্ক্রিন রিডারের জন্য কী কমান্ড

স্ক্রিন রিডার পরীক্ষার ডেমো

আমাদের ডেমোটি পরীক্ষা করার জন্য, আমরা macOS চালিত একটি ল্যাপটপে Safari ব্যবহার করেছি এবং শব্দ ধারণ করেছি। আপনি যেকোনো স্ক্রিন রিডার ব্যবহার করে এই ধাপগুলো অনুসরণ করতে পারেন, কিন্তু কিছু ত্রুটির সম্মুখীন হওয়ার পদ্ধতি এই মডিউলে বর্ণিত পদ্ধতির থেকে ভিন্ন হতে পারে।

ধাপ ১

আপডেট করা CodePen-টি দেখুন, যেখানে সমস্ত স্বয়ংক্রিয় এবং ম্যানুয়াল অ্যাক্সেসিবিলিটি আপডেট প্রয়োগ করা হয়েছে।

পরবর্তী টেস্টগুলো চালিয়ে যাওয়ার জন্য এটিকে ডিবাগ মোডে দেখুন। এটি গুরুত্বপূর্ণ, কারণ এটি ডেমো ওয়েব পেজটিকে ঘিরে থাকা <iframe> সরিয়ে দেয়, যা কিছু টেস্টিং টুলের কাজে বাধা সৃষ্টি করতে পারে। CodePen-এর ডিবাগ মোড সম্পর্কে আরও জানুন।

ধাপ ২

আপনার পছন্দের স্ক্রিন রিডারটি চালু করুন এবং ডেমো পেজটিতে যান। নির্দিষ্ট বিষয়গুলিতে মনোযোগ দেওয়ার আগে আপনি পুরো পেজটি উপর থেকে নিচে পর্যন্ত ঘুরে দেখতে পারেন।

ডেমোতে সমাধানগুলো প্রয়োগ করার আগে ও পরে, আমরা প্রতিটি সমস্যার জন্য আমাদের স্ক্রিন রিডারের প্রতিক্রিয়া রেকর্ড করেছি। আমরা আপনাকে আপনার নিজের স্ক্রিন রিডার দিয়ে ডেমোটি চালিয়ে দেখার জন্য উৎসাহিত করছি।

সমস্যা ১: বিষয়বস্তুর কাঠামো

স্ক্রিন রিডার ব্যবহার করে পথ খুঁজে বের করার অন্যতম প্রধান উপায় হলো শিরোনাম এবং নির্দেশক চিহ্ন। এগুলো না থাকলে, প্রসঙ্গ বোঝার জন্য একজন স্ক্রিন রিডার ব্যবহারকারীকে পুরো পৃষ্ঠাটি পড়তে হয়। এতে অনেক সময় লাগতে পারে এবং বিরক্তির কারণ হতে পারে।

আপনি যদি ডেমোতে থাকা এই দুটি উপাদানের কোনো একটি দিয়ে নেভিগেট করার চেষ্টা করেন, তাহলে দ্রুতই বুঝতে পারবেন যে সেগুলোর কোনো অস্তিত্ব নেই।

• ল্যান্ডমার্ক উদাহরণ: <div class="main">...</div>
• শিরোনামের উদাহরণ: <p class="h1">Join the Club</p>

আপনি যদি সবকিছু সঠিকভাবে আপডেট করে থাকেন, তাহলে দৃশ্যমান কোনো পরিবর্তন হওয়ার কথা নয়, কিন্তু আপনার স্ক্রিন রিডার ব্যবহারের অভিজ্ঞতা ব্যাপকভাবে উন্নত হবে।

চলুন এটা ঠিক করি।

কিছু অ্যাক্সেস-অযোগ্য এলিমেন্ট শুধু সাইটটি দেখে বোঝা যায় না। কন্টেন্ট স্ট্রাকচার মডিউল থেকে হেডিং লেভেল এবং সিমান্টিক এইচটিএমএল-এর গুরুত্ব আপনার মনে থাকতে পারে। কোনো কন্টেন্টকে দেখতে হেডিং-এর মতো মনে হতে পারে, কিন্তু কন্টেন্টটি আসলে একটি স্টাইলাইজড <div> মধ্যে মোড়ানো থাকে।

হেডিং এবং ল্যান্ডমার্ক সংক্রান্ত সমস্যাটি সমাধান করতে, আপনাকে প্রথমে প্রতিটি এলিমেন্ট শনাক্ত করতে হবে যেগুলোকে সেভাবে মার্কআপ করা উচিত এবং সংশ্লিষ্ট HTML আপডেট করতে হবে। এর সাথে সম্পর্কিত CSS-ও আপডেট করতে ভুলবেন না।

• ল্যান্ডমার্ক উদাহরণ: <main>...</main>
• শিরোনামের উদাহরণ: <h1>Join the Club</h1>

আপনি যদি সবকিছু সঠিকভাবে আপডেট করে থাকেন, তাহলে দৃশ্যমান কোনো পরিবর্তন হওয়ার কথা নয়, কিন্তু আপনার স্ক্রিন রিডার ব্যবহারের অভিজ্ঞতা ব্যাপকভাবে উন্নত হবে।

সমস্যা ২: লিঙ্ক প্রসঙ্গ

স্ক্রিন রিডার ব্যবহারকারীদের কোনো লিঙ্কের উদ্দেশ্য এবং লিঙ্কটি তাদেরকে ওয়েবসাইট বা অ্যাপের বাইরে কোনো নতুন স্থানে নিয়ে যাচ্ছে কিনা, সে সম্পর্কে তথ্য দেওয়া জরুরি।

আমাদের ডেমোতে, আমরা সক্রিয় ছবির বিকল্প টেক্সট আপডেট করার সময় বেশিরভাগ লিঙ্ক ঠিক করে ফেলেছি, কিন্তু বিভিন্ন বিরল রোগ সম্পর্কিত আরও কয়েকটি লিঙ্ক রয়েছে যেগুলোর জন্য অতিরিক্ত তথ্যের প্রয়োজন—বিশেষ করে যেহেতু সেগুলো একটি নতুন স্থানে রিডাইরেক্ট করে।

<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease">
  Maple syrup urine disease (MSUD)
</a>

চলুন এটা ঠিক করি।

স্ক্রিন রিডার ব্যবহারকারীদের জন্য এই সমস্যাটি সমাধান করতে, আমরা ভিজ্যুয়াল এলিমেন্টকে প্রভাবিত না করেই কোডটি আপডেট করে আরও তথ্য যোগ করি। অথবা, পঠন ও জ্ঞানীয় সমস্যায় আক্রান্তদের মতো আরও বেশি মানুষকে সাহায্য করার জন্য, আমরা এর পরিবর্তে অতিরিক্ত ভিজ্যুয়াল টেক্সট যোগ করার সিদ্ধান্ত নিতে পারি।

অতিরিক্ত লিঙ্ক তথ্য যোগ করার জন্য আমরা বিভিন্ন প্যাটার্ন বিবেচনা করতে পারি। আমাদের পরিবেশ যেহেতু কেবল একটি ভাষা সমর্থন করে, তাই এই পরিস্থিতিতে একটি ARIA লেবেল একটি সহজ বিকল্প। আপনি লক্ষ্য করতে পারেন যে ARIA লেবেলটি মূল লিঙ্কের লেখাটিকে ওভাররাইড করে, তাই আপনার আপডেটে এই তথ্যটি অন্তর্ভুক্ত করতে ভুলবেন না।

<a href="https://rarediseases.org/rare-diseases/maple-syrup-urine-disease"
  aria-label="Learn more about Maple syrup urine disease on the Rare Diseases website.">
  Maple syrup urine disease (MSUD)
</a>

ইস্যু ৩: আলংকারিক ছবি

আমাদের স্বয়ংক্রিয় টেস্টিং মডিউলে, লাইটহাউস আমাদের ডেমো পেজের প্রধান স্প্ল্যাশ ইমেজ হিসেবে ব্যবহৃত ইনলাইন SVG-টি শনাক্ত করতে পারেনি। তবে, স্ক্রিন রিডার এটি খুঁজে পায় এবং কোনো অতিরিক্ত তথ্য ছাড়াই এটিকে "image" হিসেবে ঘোষণা করে। এমনকি SVG-তে স্পষ্টভাবে role="img" অ্যাট্রিবিউটটি যোগ না করলেও এটি সত্য।

<div class="section-right">
  <svg>...</svg>
</div>

চলুন এটা ঠিক করি।

এই সমস্যাটি সমাধান করার জন্য, আমাদের প্রথমে সিদ্ধান্ত নিতে হবে যে ছবিটি তথ্যমূলক নাকি আলংকারিক । সেই সিদ্ধান্তের উপর ভিত্তি করে, আমাদের উপযুক্ত ছবির বিকল্প টেক্সট যোগ করতে হবে (তথ্যমূলক ছবির ক্ষেত্রে) অথবা স্ক্রিন রিডার ব্যবহারকারীদের কাছ থেকে ছবিটি লুকিয়ে রাখতে হবে (আলংকারিক ছবির ক্ষেত্রে)।

ছবিটিকে কীভাবে সবচেয়ে ভালোভাবে শ্রেণীবদ্ধ করা যায় তার সুবিধা-অসুবিধাগুলো বিবেচনা করে আমরা সিদ্ধান্ত নিয়েছি যে এটি আলংকারিক, যার অর্থ হলো আমরা ছবিটি লুকানোর জন্য কোডে কিছু যোগ বা পরিবর্তন করতে চাই। একটি দ্রুত পদ্ধতি হলো সরাসরি SVG ছবিতে role="presentation" যোগ করা। এটি স্ক্রিন রিডারকে এই ছবিটি এড়িয়ে যাওয়ার এবং images গ্রুপে তালিকাভুক্ত না করার জন্য একটি সংকেত পাঠায়।

<div class="section-right">
  <svg role="presentation">...</svg>
</div>

ইস্যু ৪: বুলেট সজ্জা

আপনি হয়তো লক্ষ্য করেছেন যে, স্ক্রিন রিডার বিরল রোগ সংক্রান্ত সেকশনগুলোর নিচে থাকা CSS বুলেট ইমেজটি পড়ে শোনায়। যদিও এই ইমেজটি ‘ইমেজ’ মডিউলে আলোচিত ইমেজটির মতো নয়, তবুও এটিকে অবশ্যই পরিবর্তন করতে হবে, কারণ এটি কন্টেন্টের ধারাবাহিকতায় ব্যাঘাত ঘটায় এবং স্ক্রিন রিডার ব্যবহারকারীকে বিভ্রান্ত বা বিচলিত করতে পারে।

<p class="bullet">...</p>

চলুন এটা ঠিক করি।

পূর্বে আলোচিত আলংকারিক ছবির উদাহরণের মতোই, স্ক্রিন রিডার থেকে কোনো কিছু লুকানোর জন্য আপনি বুলেট ক্লাসযুক্ত HTML-এ role="presentation" যোগ করতে পারেন। একইভাবে, role="none" ব্যবহার করলেও কাজ হবে। শুধু খেয়াল রাখবেন যেন aria-hidden: true ব্যবহার না করেন, নইলে স্ক্রিন রিডার ব্যবহারকারীদের কাছ থেকে অনুচ্ছেদের সমস্ত তথ্যই ঢাকা পড়ে যাবে।

<p class="bullet" role="none">...</p>

সমস্যা ৫: ফর্ম ফিল্ড

ফর্মস মডিউলে আমরা শিখেছি যে, সকল ফর্ম ফিল্ডের একটি ভিজ্যুয়াল এবং প্রোগ্রাম্যাটিক লেবেলও থাকতে হবে। এই লেবেলটি অবশ্যই সব সময় দৃশ্যমান থাকতে হবে।

আমাদের ডেমোতে, নিউজলেটার সাইন-আপ ইমেল ফিল্ডে একটি ভিজ্যুয়াল এবং প্রোগ্রাম্যাটিক লেবেল উভয়েরই অভাব রয়েছে। সেখানে একটি টেক্সট প্লেসহোল্ডার এলিমেন্ট আছে, কিন্তু এটি লেবেলটিকে প্রতিস্থাপন করে না, কারণ এটি দৃশ্যত স্থায়ী নয় এবং সব স্ক্রিন রিডারের সাথে সম্পূর্ণরূপে সামঞ্জস্যপূর্ণ নয়।

<form>
  <div class="form-group">
    <input type="email" placeholder="Enter your e-mail address" required>
    <button type="submit">Subscribe</button>
  </div>
</form>

চলুন এটা ঠিক করি।

এই সমস্যাটি সমাধান করতে, টেক্সট প্লেসহোল্ডারটিকে একটি দেখতে একই রকম লেবেল এলিমেন্ট দিয়ে প্রতিস্থাপন করুন। ঐ লেবেল এলিমেন্টটি প্রোগ্রাম্যাটিকভাবে ফর্ম ফিল্ডের সাথে সংযুক্ত এবং জাভাস্ক্রিপ্ট দিয়ে এর মুভমেন্ট যোগ করা হয়েছে, যাতে ফিল্ডে কন্টেন্ট যোগ করার পরেও লেবেলটি দৃশ্যমান থাকে।

<form>
  <div class="form-group">
    <input type="email" required id="youremail" name="youremail" type="text">
    <label for="youremail">Enter your e-mail address</label>
    <button type="submit" aria-label="Subscribe to our newsletter">Subscribe</button>
  </div>
</form>

শেষ করুন

অভিনন্দন! আপনি এই ডেমোটির সমস্ত টেস্টিং সম্পন্ন করেছেন। আপনি এই ডেমোটির আপডেট করা কোডপেন- এ এই সমস্ত পরিবর্তনগুলো দেখতে পারেন।

এখন, আপনি যা শিখেছেন তা ব্যবহার করে আপনার নিজের ওয়েবসাইট ও অ্যাপগুলোর অ্যাক্সেসিবিলিটি পর্যালোচনা করতে পারেন।

এই সমস্ত অ্যাক্সেসিবিলিটি পরীক্ষার লক্ষ্য হলো একজন ব্যবহারকারী সম্ভাব্য যতগুলো সমস্যার সম্মুখীন হতে পারেন, তার সবগুলোর সমাধান করা। তবে, এর মানে এই নয় যে কাজ শেষ হয়ে গেলেই আপনার ওয়েবসাইট বা অ্যাপটি পুরোপুরি অ্যাক্সেসিবল হয়ে যাবে। সবচেয়ে বেশি সাফল্য পাবেন যদি আপনি পুরো প্রক্রিয়া জুড়েই আপনার ওয়েবসাইট বা অ্যাপটি অ্যাক্সেসিবিলিটি মাথায় রেখে ডিজাইন করেন এবং এই পরীক্ষাগুলোকে আপনার অন্যান্য প্রি-লঞ্চ পরীক্ষার সাথে অন্তর্ভুক্ত করেন।