JavaScript

আমরা যা কিছু তৈরি করি তার প্রায় সবকিছুর মধ্যেই জাভাস্ক্রিপ্ট একটি প্রধান ভূমিকা পালন করে—ছোট ডাইনামিক কম্পোনেন্ট থেকে শুরু করে রিয়্যাক্ট বা অ্যাঙ্গুলারের মতো জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কে চালিত পূর্ণাঙ্গ প্রোডাক্ট পর্যন্ত।

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

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

ট্রিগার ইভেন্ট

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

চলুন একটি ক্লিক ইভেন্ট দেখি। যদি একটি <button> বা <a> -এর মতো কোনো সিম্যান্টিক HTML এলিমেন্টে onClick() ইভেন্ট ব্যবহার করা হয়, তবে এটি স্বাভাবিকভাবেই মাউস এবং কীবোর্ড উভয় কার্যকারিতাই অন্তর্ভুক্ত করে। তবে, একটি সাধারণ <div> এর মতো কোনো নন-সিম্যান্টিক এলিমেন্টে onClick() ইভেন্ট যোগ করা হলে কীবোর্ড কার্যকারিতা স্বয়ংক্রিয়ভাবে প্রয়োগ হয় না।

<div role="button" tabindex="0" onclick="doAction()">Click me!</div>

<button onclick="doAction()">Click me!</button>

CodePen-এ এই তুলনাটির প্রিভিউ দেখুন।

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

পৃষ্ঠার শিরোনাম

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

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

এসপিএ-এর ক্ষেত্রে, ` document.title` ভ্যালুটি ম্যানুয়ালি অথবা কোনো হেল্পার প্যাকেজের মাধ্যমে যোগ করা যেতে পারে (যা জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের উপর নির্ভর করে)। স্ক্রিন রিডার ব্যবহারকারীকে আপডেট করা পেজ টাইটেলগুলো জানানোর জন্য কিছু অতিরিক্ত কাজ লাগতে পারে, কিন্তু সুখবর হলো আপনার কাছে ডাইনামিক কন্টেন্টের মতো বিভিন্ন বিকল্প রয়েছে।

গতিশীল বিষয়বস্তু

জাভাস্ক্রিপ্টের অন্যতম শক্তিশালী একটি কার্যকারিতা হলো পেজের যেকোনো এলিমেন্টে HTML এবং CSS যোগ করার ক্ষমতা। ডেভেলপাররা ব্যবহারকারীদের কার্যকলাপ বা আচরণের উপর ভিত্তি করে ডাইনামিক অ্যাপ্লিকেশন তৈরি করতে পারেন।

ধরুন, আপনার ওয়েবসাইট বা অ্যাপে ব্যবহারকারীরা সাইন ইন করলে তাদের একটি বার্তা পাঠাতে হবে। আপনি চান বার্তাটি সাদা পটভূমি থেকে স্পষ্টভাবে ফুটে উঠুক এবং এই বার্তাটি পৌঁছে দিক: "আপনি এখন সাইন ইন করেছেন।"

আপনি innerHTML এলিমেন্টটি ব্যবহার করে কন্টেন্ট সেট করতে পারেন:

document.querySelector("#banner").innerHTML = '<p>You are now signed in</p>';

আপনি setAttribute ব্যবহার করে একইভাবে CSS প্রয়োগ করতে পারেন:

document.querySelector("#banner").setAttribute("style", "border-color:#0000ff;");

মহান ক্ষমতার সাথে মহান দায়িত্বও আসে। দুর্ভাগ্যবশত, এইচটিএমএল (HTML) এবং সিএসএস (CSS)-এ জাভাস্ক্রিপ্ট ইনজেকশন ঐতিহাসিকভাবে অ্যাক্সেস-অযোগ্য কন্টেন্ট তৈরি করতে অপব্যবহার করা হয়েছে। এর কিছু সাধারণ অপব্যবহার নিচে তালিকাভুক্ত করা হলো:

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

ফোকাস ব্যবস্থাপনা

কিবোর্ড ফোকাস মডিউলে আমরা ফোকাস অর্ডার এবং ইন্ডিকেটর স্টাইল নিয়ে আলোচনা করেছি। ফোকাস ম্যানেজমেন্ট হলো এটা জানা যে কখন এবং কোথায় ফোকাসকে আটকে রাখতে হবে এবং কখন তা আটকে রাখা উচিত নয়।

শুধুমাত্র কিবোর্ড ব্যবহারকারীদের জন্য ফোকাস ব্যবস্থাপনা অত্যন্ত গুরুত্বপূর্ণ।

উপাদান স্তর

যখন কোনো কম্পোনেন্টের ফোকাস সঠিকভাবে পরিচালিত হয় না, তখন আপনি কিবোর্ড ট্র্যাপ তৈরি করতে পারেন। যখন শুধুমাত্র কিবোর্ড ব্যবহারকারী কোনো কম্পোনেন্টে আটকে যান, অথবা যখন ফোকাস বজায় থাকা উচিত তখন তা বজায় থাকে না, তখন একটি কিবোর্ড ট্র্যাপ ঘটে।

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

পৃষ্ঠা স্তর

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

পৃষ্ঠা পরিবর্তন করার সময় (বা রাউটিং করার সময়), ডেভেলপমেন্ট টিমকে অবশ্যই সিদ্ধান্ত নিতে হবে যে পৃষ্ঠা লোড হওয়ার পর ফোকাস কোথায় যাবে।

এটি অর্জন করার একাধিক কৌশল রয়েছে:

• একটি aria-live ঘোষণার মাধ্যমে মূল কন্টেইনারের উপর ফোকাস করুন।
• মূল বিষয়বস্তুতে যেতে লিঙ্কে আবার ফোকাস করুন।
• নতুন পৃষ্ঠার শীর্ষ শিরোনামে ফোকাস সরান।

আপনি কোথায় মনোযোগ দেবেন, তা নির্ভর করবে আপনার ব্যবহৃত ফ্রেমওয়ার্ক এবং ব্যবহারকারীদের কাছে পরিবেশন করতে চাওয়া কন্টেন্টের উপর। এটি প্রেক্ষাপট-নির্ভর বা কার্যকলাপ-নির্ভর হতে পারে।

রাষ্ট্রীয় ব্যবস্থাপনা

অ্যাক্সেসিবিলিটির জন্য জাভাস্ক্রিপ্টের গুরুত্বপূর্ণ আরেকটি ক্ষেত্র হলো স্টেট ম্যানেজমেন্ট, অর্থাৎ যখন কোনো কম্পোনেন্ট বা পেজের বর্তমান ভিজ্যুয়াল স্টেট স্বল্প-দৃষ্টিসম্পন্ন, অন্ধ বা বধির-অন্ধ সহায়ক প্রযুক্তি ব্যবহারকারীর কাছে পৌঁছে দেওয়া হয়।

প্রায়শই, কোনো কম্পোনেন্ট বা পেজের অবস্থা ARIA অ্যাট্রিবিউটের মাধ্যমে পরিচালিত হয়, যেমনটি ARIA এবং HTML মডিউলে আলোচনা করা হয়েছে। চলুন, কোনো এলিমেন্টের অবস্থা পরিচালনায় ব্যবহৃত কয়েকটি সাধারণ ধরনের ARIA অ্যাট্রিবিউট পর্যালোচনা করা যাক।

উপাদান স্তর

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

উদাহরণস্বরূপ, কোনো ড্রপ-ডাউন মেনু বা তালিকা প্রসারিত নাকি সংকুচিত আছে, তা ব্যবহারকারীকে জানানোর জন্য আপনি aria-expanded অ্যাট্রিবিউট ব্যবহার করতে পারেন।

অথবা, কোনো বাটন চাপা হয়েছে তা বোঝাতে আপনি aria-pressed ব্যবহার করতে পারেন।

ARIA অ্যাট্রিবিউট প্রয়োগ করার সময় বাছাই করা জরুরি। ব্যবহারকারীর প্রবাহ (ইউজার ফ্লো) ভালোভাবে ভেবে দেখুন, যাতে বোঝা যায় ব্যবহারকারীকে কোন গুরুত্বপূর্ণ তথ্য জানানো উচিত।

পৃষ্ঠা স্তর

ডেভেলপাররা প্রায়শই স্ক্রিনের পরিবর্তন ঘোষণা করতে এবং সহায়ক প্রযুক্তি (AT) ব্যবহারকারীদের সতর্কবার্তা জানাতে ARIA লাইভ রিজিয়ন নামক একটি দৃশ্যত লুকানো এলাকা ব্যবহার করেন। সম্পূর্ণ পৃষ্ঠাটি পুনরায় লোড করার প্রয়োজন ছাড়াই পৃষ্ঠার গতিশীল পরিবর্তন সম্পর্কে ব্যবহারকারীদের অবহিত করতে এই এলাকাটিকে জাভাস্ক্রিপ্টের সাথে যুক্ত করা যেতে পারে।

ঐতিহাসিকভাবে, জাভাস্ক্রিপ্ট তার ডাইনামিক প্রকৃতির কারণে aria-live এবং alert রিজিয়নে কন্টেন্ট ঘোষণা করতে হিমশিম খেয়েছে। অ্যাসিঙ্ক্রোনাসভাবে DOM-এ কন্টেন্ট যুক্ত করার ফলে AT-এর পক্ষে রিজিয়নটি শনাক্ত করে ঘোষণা করা কঠিন হয়ে পড়ে। কন্টেন্টটি সঠিকভাবে পড়ার জন্য, লোড হওয়ার সময় live বা alert রিজিয়নটি অবশ্যই DOM-এ থাকতে হবে, তারপরই টেক্সটটি ডাইনামিকভাবে পরিবর্তন করা যায়।

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

এখানে সাধারণ জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলোর জন্য কিছু লাইভ প্যাকেজ দেওয়া হলো:

• React: react-aria-live এবং react-a11y-announcer
• অ্যাঙ্গুলার: LiveAnnouncer
• Vue: vue-a11y-utils

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