অন্তর্ভুক্তিমূলক ব্রাউজার এক্সটেনশন তৈরি করুন:ধাপে ধাপে অ্যাক্সেসিবিলিটি ডিজাইন

একটি ব্রাউজার এক্সটেনশন তৈরি করা সহজ, কিন্তু প্রত্যেকের কাছে এটি অ্যাক্সেসযোগ্য তা নিশ্চিত করার জন্য ইচ্ছাকৃত যত্ন এবং দক্ষতা প্রয়োজন৷

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

এই নিবন্ধে, আমরা অ্যাক্সেসিবিলিটি সমস্যাগুলির জন্য একটি Chrome ব্রাউজার এক্সটেনশন অডিট করব এবং এটিকে একটি অন্তর্ভুক্ত অভিজ্ঞতায় রূপান্তর করব যা সবার জন্য কাজ করে৷

সূচিপত্র

• কেন ব্রাউজার এক্সটেনশনগুলিতে অ্যাক্সেসযোগ্যতা গুরুত্বপূর্ণ

• কিভাবে ম্যানুয়াল ব্রাউজার এক্সটেনশন অ্যাক্সেসিবিলিটি টেস্টগুলি সম্পাদন করবেন

• কিভাবে ব্রাউজার এক্সটেনশন অ্যাক্সেসিবিলিটি উন্নতি বাস্তবায়ন করবেন

• কিভাবে স্বয়ংক্রিয় ব্রাউজার এক্সটেনশন অ্যাক্সেসিবিলিটি টেস্টগুলি সম্পাদন করবেন

• অ্যাক্সেসযোগ্য ব্রাউজার এক্সটেনশনের জন্য সর্বোত্তম অনুশীলন

• উপসংহার

ব্রাউজার এক্সটেনশনে কেন অ্যাক্সেসযোগ্যতা গুরুত্বপূর্ণ

আপনার ব্রাউজার এক্সটেনশনের প্রতিটি ক্লিক ব্যবহারকারীদের ক্ষমতায়ন করার একটি সুযোগ বা অ্যাক্সেসযোগ্যতা আপনার ডিজাইনের অংশ না হলে তাদের বাদ দেওয়ার সুযোগ৷

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

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

ব্রাউজার এক্সটেনশনের জন্য, অ্যাক্সেসিবিলিটি বাধাগুলি সাধারণত এই হিসাবে আবির্ভূত হয়:

• কীবোর্ড নেভিগেশন শেষ হয়ে গেছে :পপআপ এবং ইন্টারফেস যা কীবোর্ড ব্যবহারকারীদের আটকে রাখে বা বাদ দেয়।

• নীরব মিথস্ক্রিয়া :অনুপস্থিত লেবেল এবং বিবরণ, যেমন স্ক্রীন রিডারদের দ্বারা "লেবেলবিহীন বোতাম" হিসাবে ঘোষণা করা শুধুমাত্র একটি আইকন সহ একটি বোতাম, ব্যবহারকারীদের এর উদ্দেশ্য সম্পর্কে অনুমান করতে ছেড়ে দেয়৷

• অঘোষিত গতিশীল সামগ্রী আপডেটগুলি৷ :বিষয়বস্তুর পরিবর্তন যা সহায়ক প্রযুক্তি সচেতনতা ছাড়াই ঘটে, যেমন পরিবর্তনের স্ক্রীন রিডারদেরকে অবহিত না করে একটি উদ্ধৃতি আপডেট করা, লোডিং অবস্থা বা ত্রুটির জন্য অনুপস্থিত প্রতিক্রিয়া সহ

• প্রসঙ্গ একীকরণ দ্বন্দ্ব :বিদ্যমান ওয়েব পৃষ্ঠাগুলিকে সংশোধনকারী এক্সটেনশনগুলি ভুলবশত পৃষ্ঠার অ্যাক্সেসিবিলিটি বৈশিষ্ট্যগুলিকে ভঙ্গ করতে পারে বা প্রতিষ্ঠিত নেভিগেশন প্যাটার্নগুলির সাথে সংঘর্ষকারী উপাদানগুলি প্রবর্তন করতে পারে

এই বাধাগুলি বোঝার মাধ্যমে, বিকাশকারীরা তাদের এক্সটেনশনের অ্যাক্সেসযোগ্যতা পরীক্ষা এবং উন্নত করতে লক্ষ্যযুক্ত পদক্ষেপ নিতে পারে।

ম্যানুয়াল ব্রাউজার এক্সটেনশন অ্যাক্সেসিবিলিটি টেস্ট কিভাবে সম্পাদন করবেন

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

কীবোর্ড নেভিগেশন পরীক্ষা

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

• কোন উপাদানে ফোকাস আছে তা কি সবসময় পরিষ্কার?

• আপনি কি Enter দিয়ে বোতাম সক্রিয় করতে পারেন অথবা Space প্রত্যাশিত হিসাবে?

• ব্যবহারকারীরা কি মডেল ডায়ালগ বা ড্রপডাউন মেনু থেকে প্রস্থান করতে পারে?

আপনি যদি কোনো শেষ-শেষ বা বিভ্রান্তিকর পয়েন্টের সম্মুখীন হন, কীবোর্ড ব্যবহারকারীরা একই বাধার সম্মুখীন হবেন৷

স্ক্রিন রিডার মূল্যায়ন

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

• প্রতিটি উপাদানের উদ্দেশ্য কি স্পষ্টভাবে আসে, যেমন একটি বোতাম শুধুমাত্র "বোতাম" এর পরিবর্তে "নতুন পরামর্শ তৈরি করুন" হিসাবে ঘোষণা করা হয়েছে?

• শিরোনাম, তালিকা এবং অন্যান্য কাঠামো কি সঠিকভাবে জানানো হয়েছে?

• ব্যবহারকারীরা কি বোঝেন কখন বিষয়বস্তু লোড হচ্ছে, নির্বাচন করা হচ্ছে বা পরিবর্তিত হয়েছে?

এই পরীক্ষার পর্যায়টি প্রায়শই আপনি কী যোগাযোগ করতে চেয়েছিলেন এবং আসলে ব্যবহারকারীদের কাছে কী পৌঁছায় তার মধ্যে ব্যবধান প্রকাশ করে৷

ভিজ্যুয়াল অ্যাক্সেসিবিলিটি পর্যালোচনা

বিভিন্ন ভিজ্যুয়াল প্রসঙ্গে আপনার এক্সটেনশন পরীক্ষা করুন। পাঠ্য পাঠযোগ্যতার জন্য WCAG-এর 4.5:1 বৈসাদৃশ্য অনুপাত পূরণ করে তা যাচাই করতে WebAIM-এর কনট্রাস্ট চেকারের মতো বিকাশকারী সরঞ্জামগুলি ব্যবহার করুন৷ সিস্টেম হাই-কনট্রাস্ট সেটিংসে আপনার এক্সটেনশনটি কীভাবে প্রদর্শিত হবে তা পরীক্ষা করুন। নিশ্চিত করুন:

• কার্যকারিতা 200% জুমে ব্যবহারযোগ্য থাকে।

• শুধুমাত্র রঙের মাধ্যমে তথ্য জানানো হয় না, যেমন রঙ-কোডেড সূচকের পাশাপাশি টেক্সট লেবেল ব্যবহার করা।

এই ম্যানুয়াল পরীক্ষাগুলি গুরুত্বপূর্ণ অ্যাক্সেসিবিলিটি সমস্যাগুলিকে উন্মোচন করবে, আপনার এক্সটেনশনকে অন্তর্ভুক্ত করার লক্ষ্যে উন্নতির পথ প্রশস্ত করবে৷

ব্রাউজার এক্সটেনশন অ্যাক্সেসিবিলিটি উন্নতি কিভাবে প্রয়োগ করবেন

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

• বাটন লেবেল নেই :ডাইস বোতামে শুধুমাত্র অল্ট টেক্সট "ডাইস আইকন" সহ একটি চিত্র রয়েছে, যার প্রসঙ্গ স্ক্রিন পাঠকদের প্রয়োজন নেই

• নিরব গতিশীল আপডেট :যখন নতুন পরামর্শ লোড হয়, তখন স্ক্রীন রিডাররা জানেন না বিষয়বস্তু পরিবর্তিত হয়েছে

• কোন লোডিং অবস্থা নেই৷ :পরামর্শ আনার সময়, ব্যবহারকারীরা কোনো প্রতিক্রিয়া পান না যে কিছু ঘটছে

স্বয়ংক্রিয় পরীক্ষা পরিচালনা করার আগে আসুন সমস্যাগুলি সমাধান করি৷

কিভাবে অনুপস্থিত বোতাম লেবেল এবং Alt টেক্সট এড্রেস করবেন

আমরা aria-label যোগ করব বোতামের উদ্দেশ্য স্পষ্টভাবে ব্যাখ্যা করতে এবং আইকনের জন্য বর্ণনামূলক Alt পাঠ্য প্রদান করতে। role="presentation" অ্যাট্রিবিউট নিশ্চিত করে যে ছবিটি স্ক্রিন রিডারদের দ্বারা আলংকারিক হিসাবে বিবেচিত হয়।

<!--Before: Unclear Button Purpose and icon alt text-->
<button class="dice-button" id="generate-advice-btn">
 <img src="/icons/icon-dice.png" alt="Dice icon">
</button>
<!--After: Clear, Accessible Button and icon alt text-->
<button class="dice-button" id="generate-advice-btn" aria-label="Generate new advice">
 <img src="/icons/icon-dice.png" alt="A dice icon with green background" role="presentation">
</button>

কীভাবে নীরব গতিশীল আপডেটগুলিকে সম্বোধন করবেন

আমরা aria-live="polite" যোগ করব স্ক্রীন রিডারদের জন্য নতুন পরামর্শ এবং aria-atomic="true" ঘোষণা করতে সম্পূর্ণ উদ্ধৃতি পড়া হয়েছে তা নিশ্চিত করতে। সেটি হল:

<!--Before: Silent Dynamic Updates-->
<p class="advice-quote" id="advice-quote">
 "It is easy to sit up and take notice, what's difficult is getting up and taking action."
</p>
<!--After: Announced Content Changes-->
<p class="advice-quote" id="advice-quote" aria-live="polite" aria-atomic="true">
 "It is easy to sit up and take notice, what's difficult is getting up and taking action."
</p>

কোন লোডিং স্টেটস এড্রেস করবেন কিভাবে

আমরা একটি setLoadingState যোগ করব লোডিং ইন্ডিকেটর প্রদান করার ফাংশন, নিশ্চিত করে যে কন্টেন্ট আনা হলে স্ক্রিন রিডার ব্যবহারকারীদের জানানো হয়:

// Before: No Loading Feedback
function requestNewAdvice() {
 chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
 // No loading indicators...
 });
}
// After: Accessible Loading States
function requestNewAdvice() {
 setLoadingState(true); 
 chrome.runtime.sendMessage({ action: "fetchAdvice" }, (response) => {
 setLoadingState(false);
 // Handle response with proper announcements...
 });
}
function setLoadingState(isLoading) {
 if (isLoading) {
 // Disable button and show loading text
 generateAdviceBtn.disabled = true;
 generateAdviceBtn.setAttribute('aria-label', 'Loading new advice...');
 // Show loading text in the advice quote element
 adviceQuoteElement.textContent = "Loading new advice...";
 } else {
 // Re-enable button
 generateAdviceBtn.disabled = false;
 generateAdviceBtn.setAttribute('aria-label', 'Generate new advice');
 }
}

ম্যানুয়াল পরীক্ষার সমস্যা সমাধানের সাথে, আমরা এখন একই এক্সটেনশনের একটি স্বয়ংক্রিয় পরীক্ষা সম্পাদন করতে যেতে পারি।

কিভাবে স্বয়ংক্রিয় ব্রাউজার এক্সটেনশন অ্যাক্সেসিবিলিটি টেস্টগুলি সম্পাদন করবেন

ম্যানুয়াল টেস্টিং গুরুত্বপূর্ণ অন্তর্দৃষ্টি প্রদান করে, তবে স্বয়ংক্রিয় সরঞ্জামগুলি দক্ষতার সাথে সাধারণ সমস্যাগুলি ধরতে পারে এবং চলমান পর্যবেক্ষণ প্রদান করতে পারে।

এই এক্সটেনশন অ্যাক্সেসিবিলিটি চেকারটি WCAG সম্মতির জন্য ব্রাউজার এক্সটেনশন ইন্টারফেস, যেমন পপআপ এবং বিষয়বস্তু স্ক্রিপ্ট বিশ্লেষণ করে, পপআপ সীমাবদ্ধতা এবং বিষয়বস্তু ইনজেকশন দ্বন্দ্বের মতো অনন্য চ্যালেঞ্জ মোকাবেলা করে পরীক্ষাকে সহজ করে তোলে৷

এক্সটেনশন অ্যাক্সেসিবিলিটি চেকার ব্যবহার করতে:

1. আপনার ব্রাউজার এক্সটেনশন ফোল্ডারটিকে একটি .zip ফাইলে কম্প্রেস করুন

2. .zip ফাইলটি https://extensiona11ychecker.vercel.app/

   -এ আপলোড করুন

3. নির্দিষ্ট অ্যাক্সেসিবিলিটি লঙ্ঘনের জন্য জেনারেট করা রিপোর্ট পর্যালোচনা করুন এবং প্রস্তাবিত সংশোধনগুলি বাস্তবায়ন করুন

উপরের GIF তে যেমন দেখানো হয়েছে, এই ওয়ার্কফ্লো আপনার বিকাশ প্রক্রিয়ার একটি রুটিন অংশ হিসাবে একটি পরবর্তী চিন্তার পরিবর্তে অ্যাক্সেসযোগ্যতা প্রতিষ্ঠা করতে সহায়তা করে৷

স্বয়ংক্রিয় পরীক্ষার জায়গায়, আসুন আপনার এক্সটেনশনটি বিকাশ জুড়ে অ্যাক্সেসযোগ্য থাকে তা নিশ্চিত করতে সর্বোত্তম অনুশীলনগুলি অন্বেষণ করি৷

অ্যাক্সেসযোগ্য ব্রাউজার এক্সটেনশনের জন্য সর্বোত্তম অনুশীলন

আমরা আমাদের নমুনা পরামর্শ-উৎপাদনকারী ব্রাউজার এক্সটেনশনকে একটি কার্যকরী কিন্তু অ্যাক্সেসযোগ্য টুল থেকে একটি অন্তর্ভুক্তিতে রূপান্তরিত করেছি যা সবার জন্য কাজ করে।

আমাদের উন্নতির উপর ভিত্তি করে, অ্যাক্সেসযোগ্য ব্রাউজার এক্সটেনশন ডিজাইন করার জন্য এখানে চারটি মূল নীতি রয়েছে:

1. অর্থসূচক HTML এবং পরিষ্কার, বর্ণনামূলক লেবেল

ARIA গুণাবলী যোগ করার আগে সর্বদা সঠিক HTML গঠন দিয়ে শুরু করুন, উপযুক্ত উপাদান ব্যবহার করে (উদাহরণস্বরূপ, "উপদেশ তৈরি করুন" অ্যাকশনের জন্য, সঠিক শিরোনাম শ্রেণিবিন্যাস)।

নিশ্চিত করুন যে প্রতিটি ইন্টারেক্টিভ উপাদানের aria-label এর মাধ্যমে একটি স্পষ্ট উদ্দেশ্য রয়েছে , aria-labelledby , বা দৃশ্যমান পাঠ্য যা এর ক্রিয়া ব্যাখ্যা করে।

1. প্রতিটি ধাপে যোগাযোগ পরিষ্কার করুন

প্রতিটি ইন্টারেক্টিভ উপাদান কার্যকরভাবে তার উদ্দেশ্য প্রকাশ করা আবশ্যক. ব্যবহারকারীদের বুঝতে হবে:

• • কি ঘটছে (উদাহরণস্বরূপ, লোড করার অবস্থার জন্য "নতুন পরামর্শ লোড হচ্ছে...")

    • কি ভুল হয়েছে (উদাহরণস্বরূপ, ত্রুটির জন্য "উপদেশ লোড করতে ব্যর্থ")

    • কি পরিবর্তিত হয়েছে (উদাহরণস্বরূপ, আপডেট করা বিষয়বস্তুর জন্য আরিয়া-লাইভ অঞ্চল)

1. সম্পূর্ণ কীবোর্ড অ্যাক্সেসিবিলিটি

সমস্ত কার্যকারিতা অবশ্যই কীবোর্ড নেভিগেশনের মাধ্যমে উপলব্ধ হতে হবে। এর জন্য Tab দিয়ে পরীক্ষা করা প্রয়োজন , Enter , Space , এবং উপযুক্ত তীর কীগুলি৷

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

1. ব্যবহারকারীর পছন্দ এবং বিষয়বস্তু স্ক্রিপ্ট বিবেচনা

সিস্টেম ফন্ট সাইজ সেটিংস সমর্থন করে এবং অপ্রয়োজনীয়ভাবে ব্যবহারকারী-সংজ্ঞায়িত রঙের স্কিমগুলিকে ওভাররাইড না করে ব্যবহারকারীর পছন্দকে সম্মান করুন।

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

উপসংহার

যেমনটি আমরা আমাদের পরামর্শ-উৎপাদনকারী এক্সটেনশনের সাথে দেখেছি, অ্যাক্সেসিবিলিটি সমস্যার সমাধান করা একটি কার্যকরী টুলকে একটি অন্তর্ভুক্তিতে রূপান্তরিত করে৷

যাইহোক, বিদ্যমান এক্সটেনশনগুলিতে সমস্যাগুলি সমাধান করা সহায়ক হলেও, সবচেয়ে কার্যকর পদ্ধতি হল অ্যাক্সেসযোগ্যতাকে কোডের প্রথম লাইন থেকে আপনার ডিজাইন এবং বিকাশের সিদ্ধান্তগুলিকে গাইড করতে দেওয়া৷

আপনার পরবর্তী ব্রাউজার এক্সটেনশন প্রকল্প শুরু করার সময়, জিজ্ঞাসা করুন:

• শুধুমাত্র একটি কীবোর্ড ব্যবহার করে কেউ কীভাবে এটি নেভিগেট করবে?

• প্রতিটি ইন্টারেক্টিভ উপাদানের উদ্দেশ্য কি স্ক্রিন রিডারদের কাছে অবিলম্বে পরিষ্কার?

• লোড করার সময় কী ঘটছে তা ব্যবহারকারীরা কীভাবে বুঝবেন?

এখানে কিছু সহায়ক সংস্থান রয়েছে

• Chrome এক্সটেনশন অ্যাক্সেসিবিলিটি ডকুমেন্টেশন

• এক্সটেনশন অ্যাক্সেসিবিলিটি চেকার

• ওয়েব কন্টেন্ট অ্যাক্সেসিবিলিটি নির্দেশিকা (WCAG) 2.1

বিনামূল্যে কোড শিখুন. freeCodeCamp-এর ওপেন সোর্স পাঠ্যক্রম 40,000-এরও বেশি লোককে ডেভেলপার হিসেবে চাকরি পেতে সাহায্য করেছে। শুরু করুন