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

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

ডিজিটাল স্পেসে, ATs হতে পারে:

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

আমরা আপনাকে আপনার সামগ্রিক পরীক্ষার কর্মপ্রবাহে একাধিক ধরনের ATs ব্যবহার করতে উৎসাহিত করি।

স্ক্রীন রিডার টেস্টিং বেসিক

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

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

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

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

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

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

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

অ্যাক্সেসিবিলিটি পরীক্ষার জন্য স্ক্রিন রিডার ব্যবহার করার সময়, আপনার লক্ষ্য হল আপনার কোডের সমস্যাগুলি সনাক্ত করা যা আপনার ওয়েবসাইট বা অ্যাপের ব্যবহারে হস্তক্ষেপ করে, স্ক্রিন রিডার ব্যবহারকারীর অভিজ্ঞতাকে অনুকরণ করা নয়। যেমন, কিছু মৌলিক জ্ঞান, কয়েকটি স্ক্রিন রিডার কমান্ড এবং কিছুটা (বা প্রচুর) অনুশীলনের মাধ্যমে আপনি অনেক কিছু করতে পারেন।

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

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

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

স্ক্রীন রিডার টেস্টিং ডেমো

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

ধাপ 1

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

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

ধাপ 2

আপনার পছন্দের স্ক্রিন রিডার সক্রিয় করুন এবং ডেমো পৃষ্ঠায় যান। আপনি নির্দিষ্ট সমস্যাগুলিতে ফোকাস করার আগে পুরো পৃষ্ঠাটি উপরে থেকে নীচে নেভিগেট করার কথা বিবেচনা করতে পারেন।

ডেমোতে সংশোধনগুলি প্রয়োগ করার আগে এবং পরে আমরা প্রতিটি সমস্যার জন্য আমাদের স্ক্রিন রিডার রেকর্ড করেছি। আমরা আপনাকে আপনার নিজস্ব স্ক্রিন রিডার দিয়ে ডেমো চালানোর জন্য উত্সাহিত করি।

ইস্যু 1: বিষয়বস্তুর গঠন

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

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

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

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

এটা ঠিক করা যাক.

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

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

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

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

ইস্যু 2: লিঙ্ক প্রসঙ্গ

একটি লিঙ্কের উদ্দেশ্য সম্পর্কে স্ক্রিন রিডার ব্যবহারকারীদের বিষয়বস্তু দেওয়া এবং লিঙ্কটি তাদের ওয়েবসাইট বা অ্যাপের বাইরে একটি নতুন অবস্থানে পুনঃনির্দেশিত করছে কিনা তা গুরুত্বপূর্ণ।

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

<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>

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

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

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

এটা ঠিক করা যাক.

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

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

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

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

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

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

এটা ঠিক করা যাক.

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

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

ইস্যু 5: ফর্ম ক্ষেত্র

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

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

<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>

গুটিয়ে নিন

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

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

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

আপনার উপলব্ধি পরীক্ষা করুন

স্বয়ংক্রিয় অ্যাক্সেসিবিলিটি পরীক্ষার আপনার জ্ঞান পরীক্ষা করুন