এক্সটেনশনগুলো ব্যবহারকারীদের তাদের আদর্শ ব্রাউজিং অভিজ্ঞতা তৈরি করতে সক্ষম করে, যা ব্যক্তির সামর্থ্য ও পছন্দ অনুযায়ী বিশেষভাবে তৈরি হয়। এক্সটেনশনগুলোতে এমন অ্যাক্সেসিবিলিটি উপাদান থাকা উচিত যা দৃষ্টি প্রতিবন্ধী, শ্রবণশক্তিহীন, সীমিত কর্মদক্ষতাসম্পন্ন এবং অন্যান্য প্রতিবন্ধী ব্যক্তিদের এক্সটেনশনটি ব্যবহার করতে সক্ষম করার মাধ্যমে একটি অন্তর্ভুক্তিমূলক ব্যবহারকারী গোষ্ঠীকে উৎসাহিত করে।
শুধু বিশেষ চাহিদাসম্পন্ন ব্যবহারকারীরাই নন, প্রত্যেকেই অ্যাক্সেসিবিলিটি ফিচার থেকে উপকৃত হতে পারেন। দৃষ্টি প্রতিবন্ধী, কর্মদক্ষতায় কম পারদর্শী এবং দক্ষ ব্যবহারকারীরা সকলেই কিবোর্ড শর্টকাট থেকে উপকৃত হন। বধির ব্যবহারকারীদের জন্য ক্যাপশন এবং ট্রান্সক্রিপ্ট অপরিহার্য, এবং এগুলো ভাষা শিক্ষার্থীদেরও সাহায্য করে।
ব্যবহারকারীরা বিভিন্ন উপায়ে একটি এক্সটেনশনের সাথে ইন্টারঅ্যাক্ট করতে পারেন। কিছু ব্যবহারকারীর একটি সাধারণ মনিটর, কীবোর্ড এবং মাউস থাকে - অথবা তারা একটি স্ক্রিন ম্যাগনিফায়ার এবং সম্ভবত একটি স্ক্রিন রিডারের উপর নির্ভর করতে পারেন। যদিও ব্যবহারকারীরা একটি এক্সটেনশন অ্যাক্সেস করার জন্য কোন টুল ব্যবহার করবেন তা আগে থেকে অনুমান করা অসম্ভব, তবুও যেকোনো ডেভেলপার একটি এক্সটেনশনকে যথাসম্ভব অ্যাক্সেসযোগ্য করে তোলার জন্য কিছু পদক্ষেপ নিতে পারেন।
অ্যাক্সেসযোগ্য UI নিয়ন্ত্রণগুলি একীভূত করুন
যদি ব্যবহারকারীরা ইউজার ইন্টারফেস কন্ট্রোলগুলো অ্যাক্সেস করতে না পারেন, তাহলে তারা কোনো এক্সটেনশন ব্যবহার করতে পারেন না। একটি অ্যাক্সেসিবল UI তৈরি করার সবচেয়ে সহজ উপায় হলো একটি স্ট্যান্ডার্ড HTML কন্ট্রোল ব্যবহার করা।
স্ট্যান্ডার্ড নিয়ন্ত্রণ
যথাসম্ভব, স্ট্যান্ডার্ড এইচটিএমএল ইউআই কন্ট্রোল ব্যবহার করুন। স্ট্যান্ডার্ড এইচটিএমএল কন্ট্রোলগুলো কিবোর্ডের মাধ্যমে ব্যবহারযোগ্য, সহজে আকার পরিবর্তন করা যায় এবং সাধারণত স্ক্রিন রিডার দ্বারা বোঝা যায়।
কাস্টম নিয়ন্ত্রণে WAI-ARIA
ওয়েব অ্যাক্সেসিবিলিটি ইনিশিয়েটিভ - অ্যাক্সেসিবল রিচ ইন্টারনেট অ্যাপ্লিকেশনস (WAI-ARIA) হলো একটি স্পেসিফিকেশন, যা একগুচ্ছ স্ট্যান্ডার্ড DOM অ্যাট্রিবিউটের মাধ্যমে UI কন্ট্রোলগুলোকে স্ক্রিন রিডারের কাছে অ্যাক্সেসিবল করে তোলে। এই অ্যাট্রিবিউটগুলো একটি ওয়েব পেজের কন্ট্রোলগুলোর কার্যকারিতা এবং বর্তমান অবস্থা সম্পর্কে স্ক্রিন রিডারকে তথ্য প্রদান করে।
কাস্টম কন্ট্রোলে WAI-ARIA সাপোর্ট যোগ করতে হলে, এক্সটেনশনের DOM এলিমেন্টগুলোকে এমনভাবে পরিবর্তন করতে হবে যাতে ব্যবহারকারীর ইন্টারঅ্যাকশনের সময় ইভেন্ট তৈরি করার জন্য Chrome-এর ব্যবহৃত অ্যাট্রিবিউটগুলো অন্তর্ভুক্ত থাকে। স্ক্রিন রিডার এই ইভেন্টগুলোতে সাড়া দেয় এবং কন্ট্রোলটির কার্যকারিতা বর্ণনা করে। WAI-ARIA দ্বারা নির্দিষ্ট করা DOM অ্যাট্রিবিউটগুলোকে রোল (role) , স্টেট (state) এবং প্রপার্টি (property) এই তিন ভাগে ভাগ করা হয়।
<div role="toolbar">
aria-activedescendant প্রপার্টিটি নির্দিষ্ট করে যে, যখন কোনো টুলবার ফোকাস পায়, তখন তার কোন চাইল্ড ফোকাস পাবে। tabindex="0" কোডটি নির্দিষ্ট করে যে টুলবারটি ডকুমেন্ট অর্ডার অনুযায়ী ফোকাস পাবে।
নিচে একটি উদাহরণ টুলবারের সম্পূর্ণ স্পেসিফিকেশনটি বিবেচনা করুন:
<div role="toolbar" tabindex="0" aria-activedescendant="button1">
<img src="buttoncut.png" role="button" alt="cut" id="button1">
<img src="buttoncopy.png" role="button" alt="copy" id="button2">
<img src="buttonpaste.png" role="button" alt="paste" id="button3">
</div>
কোনো কন্ট্রোলের DOM-এ WAI-ARIA রোল, স্টেট এবং প্রোপার্টি যুক্ত হয়ে গেলে, গুগল ক্রোম স্ক্রিন রিডারের কাছে উপযুক্ত ইভেন্টগুলো পাঠায়। যেহেতু WAI-ARIA সাপোর্ট এখনও নির্মাণাধীন, তাই গুগল ক্রোম হয়তো প্রতিটি WAI-ARIA প্রোপার্টির জন্য ইভেন্ট নাও পাঠাতে পারে এবং স্ক্রিন রিডারগুলোও হয়তো পাঠানো সব ইভেন্ট চিনতে পারবে না।
কাস্টম কন্ট্রোলে WAI-ARIA কন্ট্রোল যোগ করার বিষয়ে একটি সংক্ষিপ্ত টিউটোরিয়ালের জন্য, WWW2010-এ ডেভ র্যাগেটের প্রেজেন্টেশনটি দেখুন।
কাস্টম নিয়ন্ত্রণে ফোকাস করুন
যারা মাউস ছাড়া ওয়েব ব্রাউজ করেন, তাদের জন্য কিবোর্ড ফোকাস অপরিহার্য। নিশ্চিত করুন যেন বাটন, লিস্ট বক্স এবং মেনু বারের মতো অপারেশন ও নেভিগেশন কন্ট্রোলগুলো কিবোর্ড ফোকাস পেতে পারে।
ডিফল্টরূপে, HTML DOM-এর শুধুমাত্র অ্যাঙ্কর, বাটন এবং ফর্ম কন্ট্রোলগুলোই কিবোর্ড ফোকাস পেতে পারে। তবে, HTML অ্যাট্রিবিউট tabIndex মান 0 সেট করলে DOM এলিমেন্টগুলো ডিফল্ট ট্যাব সিকোয়েন্সে চলে যায়, ফলে সেগুলো কিবোর্ড ফোকাস পেতে সক্ষম হয়।
element.tabIndex = 0
element.focus();
tabIndex = -1 সেট করলে এলিমেন্টটি ট্যাব সিকোয়েন্স থেকে অপসারিত হয়, কিন্তু প্রোগ্রাম্যাটিকভাবে এলিমেন্টটি কিবোর্ড ফোকাস পেতে পারে।
কিবোর্ড অ্যাক্সেস সমর্থন করে
এক্সটেনশনগুলো শুধু কিবোর্ড দিয়েই ব্যবহারযোগ্য হওয়া উচিত, যাতে যারা মাউস ব্যবহার করতে পারেন না এবং যারা একেবারেই পারেন না, সেইসব পাওয়ার ইউজাররাও সেগুলো অ্যাক্সেস করতে পারেন।
নেভিগেশন
ব্যবহারকারী মাউস ব্যবহার না করে কোনো এক্সটেনশনের বিভিন্ন অংশের মধ্যে চলাচল করতে পারে কিনা তা যাচাই করুন। কোনো পপআপ কিবোর্ডের মাধ্যমে নেভিগেট করা যায় কিনা তা পরীক্ষা করুন। কোনো এক্সটেনশন নেভিগেটযোগ্য কিনা তা নির্ধারণ করতে ক্রোম কিবোর্ড শর্টকাট ব্যবহার করুন।
ইন্টারফেসের কোন অংশগুলোতে কিবোর্ড ফোকাস আছে, তা যেন সহজে দেখা যায়, তা নিশ্চিত করুন। সাধারণত একটি ফোকাস আউটলাইন ইন্টারফেসের চারপাশে ঘোরাফেরা করে, তবে, যদি অতিরিক্ত CSS ব্যবহার করা হয়, তাহলে আউটলাইনটি চাপা পড়ে যেতে পারে বা এর কনট্রাস্ট কমে যেতে পারে।
শর্টকাট
যদিও কোনো এক্সটেনশনের ইন্টারফেসে ফোকাস ঘোরানোর জন্য ট্যাব কী ব্যবহার করাই সবচেয়ে প্রচলিত কিবোর্ড নেভিগেশন কৌশল, এটি সবসময় সবচেয়ে সহজ বা সবচেয়ে কার্যকর বিকল্প নয়।
একটি সাধারণ জাভাস্ক্রিপ্ট কীবোর্ড হ্যান্ডলার নিচের মতো দেখতে হতে পারে। লক্ষ্য করুন, ব্যবহারকারীর ইনপুটের প্রতিক্রিয়ায় WAI-ARIA প্রপার্টি aria-activedescendant কীভাবে বর্তমান সক্রিয় টুলবার বাটনটিকে প্রতিফলিত করার জন্য আপডেট হয়।
function optionKeyEvent(event) {
var tb = event.target;
var buttonid;
ENTER_KEYCODE = 13;
RIGHT_KEYCODE = 39;
LEFT_KEYCODE = 37;
// Partial sample code for processing arrow keys.
if (event.type == "keydown") {
// Implement circular keyboard navigation within the toolbar buttons
if (event.keyCode == ENTER_KEYCODE) {
ExecuteButtonAction(getCurrentButtonID());
// getCurrentButtonID defined elsewhere
} else if (event.keyCode == event.RIGHT_KEYCODE) {
// Change the active toolbar button to the one to the right (circular).
var buttonid = getNextButtonID();
// getNextButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else if (event.keyCode == event.LEFT_KEYCODE) {
// Change the active toolbar button to the one to the left (circular).
var buttonid = getPrevButtonID();
// getPrevButtonID defined elsewhere
tb.setAttribute("aria-activedescendant", buttonid);
} else {
return true;
}
return false;
}
}
<div role="toolbar" tabindex="0" aria-activedescendant="button1" id="tb1"
onkeydown="return optionKeyEvent(event);"
onkeypress="return optionKeyEvent(event);">
<img src="buttoncut" role="button" alt="cut" id="button1">
<img src="buttoncopy" role="button" alt="copy" id="button2">
<img src="buttonpaste" role="button" alt="paste" id="button3">
</div>
এক্সটেনশনগুলো গুরুত্বপূর্ণ UI এলিমেন্টগুলোর জন্য সুস্পষ্ট কিবোর্ড শর্টকাট তৈরি করতে পারে। এই শর্টকাটগুলো প্রয়োগ করতে, কন্ট্রোলগুলোর সাথে কিবোর্ড ইভেন্ট লিসেনার সংযুক্ত করুন। অপশন পেজে উপলব্ধ শর্টকাটগুলো প্রদান করে ব্যবহারকারীদের সে সম্পর্কে অবহিত করুন।
সহজলভ্য বিষয়বস্তু প্রদান করুন
সকল ব্যবহারকারীর জন্য সহজলভ্য কন্টেন্ট প্রদান করা গুরুত্বপূর্ণ। নিচের অনেক নির্দেশিকাই আপনার কাছে পরিচিত মনে হতে পারে, কারণ এগুলো সকল ওয়েব কন্টেন্টের জন্য উত্তম অনুশীলনকে প্রতিফলিত করে।
পাঠ্য
ফন্টের পছন্দ এবং লেখার আকার একটি এক্সটেনশনের বিষয়বস্তু কতটা পাঠযোগ্য হবে তার উপর প্রভাব ফেলে। যাদের দৃষ্টিশক্তির সমস্যা আছে, তাদের এক্সটেনশনের লেখার আকার বাড়ানোর প্রয়োজন হতে পারে। কিবোর্ড শর্টকাট ব্যবহার করলে, নিশ্চিত করুন যেন সেগুলো ক্রোমের বিল্ট-ইন জুম শর্টকাটগুলোর সাথে সাংঘর্ষিক না হয়।
একটি এক্সটেনশনের UI-এর নমনীয়তার সূচক হিসেবে ২০০% পরীক্ষাটি প্রয়োগ করুন; যদি লেখার আকার বা পৃষ্ঠার জুম ২০০% বাড়ানো হয়, তাহলেও কি এটি ব্যবহারযোগ্য থাকে?
ছবির মধ্যে টেক্সট যুক্ত করা থেকে বিরত থাকুন। ব্যবহারকারীরা এর আকার পরিবর্তন করতে পারেন না এবং স্ক্রিন রিডারও ছবি পড়তে পারে না। এর পরিবর্তে, স্টাইল করা ওয়েব ফন্ট ব্যবহার করুন, যেমন গুগল ফন্ট এপিআই-তে (Google Font API ) থাকা ফন্টগুলোর মধ্যে কোনো একটি। ওয়েব ফন্ট বিভিন্ন আকারে পরিবর্তন করা যায় এবং স্ক্রিন রিডার ব্যবহারকারীরাও এটি পড়তে পারেন।
রং
একটি এক্সটেনশনে ব্যাকগ্রাউন্ড কালার এবং টেক্সট কালারের মধ্যে পর্যাপ্ত বৈসাদৃশ্য থাকা উচিত। ব্যাকগ্রাউন্ড এবং ফোরগ্রাউন্ড কালারগুলো যথাযথ বৈসাদৃশ্য প্রদান করছে কিনা তা পরীক্ষা করতে একটি কনট্রাস্ট চেকিং টুল ব্যবহার করুন।
কনট্রাস্ট মূল্যায়ন করার সময়, যাচাই করে নিন যে এক্সটেনশনের প্রতিটি অংশ, যা তথ্য জানানোর জন্য গ্রাফিক্সের উপর নির্ভর করে, তা যেন স্পষ্টভাবে দেখা যায়। নির্দিষ্ট ছবির ক্ষেত্রে, বিভিন্ন ধরনের বর্ণান্ধতায় ছবিটি কেমন দেখায় তা দেখার জন্য Coblis—Color Blindness Simulator- এর মতো টুল ব্যবহার করা যেতে পারে।
আরও ভালো কনট্রাস্ট তৈরির জন্য বিভিন্ন কালার থিম দেওয়ার কথা বিবেচনা করুন, অথবা ব্যবহারকারীকে কালার স্কিমটি নিজের পছন্দমতো সাজিয়ে নেওয়ার সুযোগ দিন।
শব্দ
যদি কোনো এক্সটেনশন তথ্য জানানোর জন্য শব্দ বা ভিডিওর ওপর নির্ভর করে, তাহলে ক্যাপশন বা ট্রান্সক্রিপ্ট উপলব্ধ আছে কিনা তা নিশ্চিত করুন। ক্যাপশন সম্পর্কে আরও তথ্যের জন্য ‘বর্ণিত ও ক্যাপশনযুক্ত মিডিয়া প্রোগ্রাম’ নির্দেশিকা দেখুন।
ছবি
ছবিগুলোর জন্য তথ্যপূর্ণ অল্ট টেক্সট দিন।
<img src="img.jpg" alt="The logo for the extension">
ছবির বিষয়বস্তুর আক্ষরিক বর্ণনার পরিবর্তে, ছবিটির উদ্দেশ্য বোঝাতে অল্ট টেক্সট ব্যবহার করুন। স্পেসার ইমেজ বা শুধুমাত্র আলংকারিক ছবির ক্ষেত্রে একটি ফাঁকা "" অল্ট টেক্সট ব্যবহার করা উচিত, অথবা সেগুলোকে HTML থেকে সম্পূর্ণভাবে সরিয়ে CSS-এ রাখা উচিত।
যদি এক্সটেনশনটিতে কোনো ছবির মধ্যে টেক্সট ব্যবহার করতেই হয়, তাহলে ছবির টেক্সটটি অল্ট টেক্সটে অন্তর্ভুক্ত করুন। উপযুক্ত অল্ট টেক্সট বিষয়ে WebAIM-এর আর্টিকেলটি একটি ভালো সহায়ক উৎস হতে পারে।
আরও জানুন
Chrome-এ অ্যাক্সেসিবিলিটি সম্পর্কে আরও জানতে A11ycasts চ্যানেলটি দেখুন এবং Chromium Accessibility Technical Documentation-টি পড়ুন।