JavaScript

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

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

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

ট্রিগার ঘটনা

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

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

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

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

কোডপেনে এই তুলনার পূর্বরূপ দেখুন।

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

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

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

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

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

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

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

ধরা যাক ব্যবহারকারীরা যখন আপনার ওয়েবসাইট বা অ্যাপে লগ ইন করে তখন আপনাকে একটি বার্তা পাঠাতে হবে। আপনি সাদা ব্যাকগ্রাউন্ড থেকে বার্তাটি আলাদা করতে চান এবং বার্তাটি রিলে করতে চান: "আপনি এখন লগ ইন করেছেন।"

আপনি বিষয়বস্তু সেট করতে উপাদান innerHTML ব্যবহার করতে পারেন:

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

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

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

মহান শক্তি দিয়ে মহান দায়িত্ব আসে। দুর্ভাগ্যবশত, এইচটিএমএল এবং সিএসএসের জাভাস্ক্রিপ্ট ইনজেকশনটি ঐতিহাসিকভাবে দুর্গম সামগ্রী তৈরি করতে অপব্যবহার করা হয়েছে। কিছু সাধারণ অপব্যবহার এখানে তালিকাভুক্ত করা হয়েছে:

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

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

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

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

উপাদান স্তর

একটি উপাদানের ফোকাস সঠিকভাবে পরিচালিত না হলে আপনি কীবোর্ড ফাঁদ তৈরি করতে পারেন। একটি কীবোর্ড ফাঁদ ঘটে যখন একটি কীবোর্ড-অনলি ব্যবহারকারী একটি উপাদানে আটকে যায়, বা ফোকাস যখন হওয়া উচিত তখন বজায় রাখা হয় না।

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

পৃষ্ঠা স্তর

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

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

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

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

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

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

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

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

উপাদান স্তর

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

উদাহরণস্বরূপ, ড্রপ-ডাউন মেনু বা তালিকা প্রসারিত বা ভেঙে ফেলা হয়েছে কিনা তা ব্যবহারকারীকে জানাতে আপনি একটি aria-expanded বৈশিষ্ট্য ব্যবহার করতে পারেন।

অথবা আপনি একটি বোতাম টিপানো হয়েছে তা নির্দেশ করতে aria-pressed ব্যবহার করতে পারেন।

ARIA গুণাবলী প্রয়োগ করার সময় নির্বাচনী হওয়া গুরুত্বপূর্ণ। ব্যবহারকারীর কাছে কী গুরুত্বপূর্ণ তথ্য জানানো উচিত তা বোঝার জন্য ব্যবহারকারীর প্রবাহের মাধ্যমে চিন্তা করুন।

পৃষ্ঠা স্তর

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

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

আপনি যদি একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক ব্যবহার করেন, তবে সুসংবাদটি হল তাদের প্রায় সকলেরই একটি "লাইভ ঘোষক" প্যাকেজ রয়েছে যা আপনার জন্য সমস্ত কাজ করে এবং সম্পূর্ণ অ্যাক্সেসযোগ্য৷ একটি লাইভ অঞ্চল তৈরি করা এবং পূর্ববর্তী বিভাগে বর্ণিত সমস্যাগুলি মোকাবেলা করার বিষয়ে চিন্তা করার দরকার নেই।

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

• প্রতিক্রিয়া: প্রতিক্রিয়া-আরিয়া-লাইভ এবং প্রতিক্রিয়া-a11y-ঘোষক
• কৌণিক: LiveAnnouncer
• Vue: vue-a11y-utils

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

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

জাভাস্ক্রিপ্ট সম্পর্কে আপনার জ্ঞান পরীক্ষা করুন