টুলটিপ ইমপ্লিমেন্টেশন: হোভার এবং ফোকাস অ্যাক্সেসিবল তথ্য

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

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

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

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

অ্যাক্সেসিবিলিটির সেরা অনুশীলনগুলি অনুসরণ করে, আমরা নিশ্চিত করতে পারি যে টুলটিপগুলি সকলের জন্য ব্যবহারকারীর অভিজ্ঞতাকে বাধা দেওয়ার পরিবর্তে উন্নত করে।

অ্যাক্সেসিবল টুলটিপের জন্য মূল নীতি

অ্যাক্সেসিবল টুলটিপ তৈরির জন্য নিম্নলিখিত নীতিগুলি অত্যন্ত গুরুত্বপূর্ণ:

বিকল্প অ্যাক্সেস প্রদান করুন: নিশ্চিত করুন যে টুলটিপগুলি হোভার এবং কিবোর্ড ফোকাস উভয়ের মাধ্যমেই অ্যাক্সেসযোগ্য।
ARIA অ্যাট্রিবিউট ব্যবহার করুন: সহায়ক প্রযুক্তিগুলিতে টুলটিপগুলি সঠিকভাবে সনাক্ত এবং বর্ণনা করতে ARIA (Accessible Rich Internet Applications) অ্যাট্রিবিউট ব্যবহার করুন।
ফোকাস পরিচালনা করুন: একটি টুলটিপ প্রদর্শিত এবং লুকানো হলে ফোকাস কোথায় যাবে তা নিয়ন্ত্রণ করুন।
পর্যাপ্ত কনট্রাস্ট নিশ্চিত করুন: টুলটিপের টেক্সট এবং ব্যাকগ্রাউন্ডের মধ্যে পর্যাপ্ত রঙের কনট্রাস্ট প্রদান করুন।
পর্যাপ্ত সময় দিন: ব্যবহারকারীদের টুলটিপের বিষয়বস্তু পড়ার জন্য যথেষ্ট সময় দিন।
এগুলিকে বাতিলযোগ্য করুন: টুলটিপটি বাতিল করার একটি স্পষ্ট উপায় প্রদান করুন।
অতিরিক্ত ব্যবহার এড়িয়ে চলুন: টুলটিপগুলি পরিমিতভাবে এবং শুধুমাত্র যখন প্রয়োজন তখনই ব্যবহার করুন।

বাস্তবায়ন কৌশল

১. হোভার এবং ফোকাস ব্যবহার করা

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

HTML:

<a href="#" aria-describedby="tooltip-example">Example Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">This is an example tooltip.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Ensure the tooltip is on top */
}

ব্যাখ্যা:

aria-describedby: এই অ্যাট্রিবিউটটি লিঙ্কটিকে তার আইডি ব্যবহার করে টুলটিপ এলিমেন্টের সাথে সংযুক্ত করে। এটি সহায়ক প্রযুক্তিগুলিকে বলে যে টুলটিপটি লিঙ্ক সম্পর্কে অতিরিক্ত তথ্য প্রদান করে।
role="tooltip": এই ARIA রোলটি এলিমেন্টটিকে একটি টুলটিপ হিসাবে চিহ্নিত করে।
CSS-টি লিঙ্কটি হোভার করা বা ফোকাস করা হলে টুলটিপ দেখানোর জন্য অ্যাডজাসেন্ট সিবলিং সিলেক্টর (+) ব্যবহার করে।

জাভাস্ক্রিপ্ট (অ্যাডভান্সড কন্ট্রোল - ঐচ্ছিক):

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

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

২. ARIA অ্যাট্রিবিউট ব্যবহার করা

সহায়ক প্রযুক্তিগুলিতে শব্দার্থিক তথ্য প্রদানের জন্য ARIA অ্যাট্রিবিউটগুলি অপরিহার্য। এখানে মূল অ্যাট্রিবিউটগুলির একটি বিবরণ দেওয়া হলো:

aria-describedby: যেমন আগে উল্লেখ করা হয়েছে, এই অ্যাট্রিবিউটটি ট্রিগারিং এলিমেন্ট এবং টুলটিপ এলিমেন্টের মধ্যে সম্পর্ক স্থাপন করে।
role="tooltip": এই অ্যাট্রিবিউটটি স্পষ্টভাবে এলিমেন্টটিকে একটি টুলটিপ হিসাবে সংজ্ঞায়িত করে।
aria-hidden="true"/aria-hidden="false": টুলটিপটি বর্তমানে সহায়ক প্রযুক্তির কাছে দৃশ্যমান কিনা তা নির্দেশ করতে এগুলি ব্যবহার করুন। যখন টুলটিপটি লুকানো থাকে, তখন aria-hidden="true" সেট করুন। যখন এটি দৃশ্যমান থাকে, তখন aria-hidden="false" সেট করুন। এটি বিশেষত গুরুত্বপূর্ণ যখন টুলটিপের দৃশ্যমানতা নিয়ন্ত্রণ করতে জাভাস্ক্রিপ্ট ব্যবহার করা হয়।

উদাহরণ:

<button aria-describedby="help-tooltip">Submit</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Click here to submit the form.</div>

জাভাস্ক্রিপ্ট (aria-hidden এর জন্য):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

৩. ফোকাস পরিচালনা করা

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

তবে, এমন পরিস্থিতি থাকতে পারে যেখানে আপনি টুলটিপে ফোকাস সরাতে চান, বিশেষ করে যদি টুলটিপে ইন্টারেক্টিভ এলিমেন্ট (যেমন, লিঙ্ক, বোতাম) থাকে। এই ক্ষেত্রে, নিশ্চিত করুন যে:

টুলটিপটি ফোকাসে আছে তা বোঝানোর জন্য এটি দৃশ্যত স্বতন্ত্র।
মূল ট্রিগারিং এলিমেন্টে ফোকাস ফিরিয়ে আনার একটি স্পষ্ট উপায় আছে (যেমন, টুলটিপের মধ্যে একটি ক্লোজ বোতাম)।

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

৪. পর্যাপ্ত কনট্রাস্ট নিশ্চিত করা

পড়ার সুবিধার জন্য রঙের কনট্রাস্ট অত্যন্ত গুরুত্বপূর্ণ। নিশ্চিত করুন যে আপনার টুলটিপের টেক্সটের রঙের সাথে ব্যাকগ্রাউন্ডের রঙের যথেষ্ট কনট্রাস্ট রয়েছে। ওয়েব কনটেন্ট অ্যাক্সেসিবিলিটি গাইডলাইনস (WCAG) সাধারণ টেক্সটের জন্য কমপক্ষে ৪.৫:১ এবং বড় টেক্সটের (১৮pt বা ১৪pt বোল্ড) জন্য ৩:১ কনট্রাস্ট রেশিও সুপারিশ করে।

আপনার রঙের পছন্দগুলি অ্যাক্সেসিবিলিটি মান পূরণ করে কিনা তা যাচাই করতে অনলাইন কনট্রাস্ট চেকার ব্যবহার করুন। কনট্রাস্ট চেকারের উদাহরণগুলির মধ্যে রয়েছে:

WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
Coolors: https://coolors.co/contrast-checker

উদাহরণ (ভালো কনট্রাস্ট):

.tooltip {
  background-color: #000;
  color: #fff;
}

উদাহরণ (খারাপ কনট্রাস্ট):

.tooltip {
  background-color: #fff;
  color: #eee;
}

৫. পর্যাপ্ত সময় দেওয়া

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

যদি টুলটিপের বিষয়বস্তু দীর্ঘ হয়, তাহলে ব্যবহারকারীকে ম্যানুয়ালি টুলটিপটি বন্ধ করার একটি উপায় সরবরাহ করার কথা বিবেচনা করুন (যেমন, একটি ক্লোজ বোতাম বা Escape কী টিপে)।

৬. সেগুলিকে বাতিলযোগ্য করা

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

টুলটিপ বাতিল করার পদ্ধতি:

ক্লোজ বোতাম: টুলটিপের মধ্যে একটি দৃশ্যমান ক্লোজ বোতাম অন্তর্ভুক্ত করুন।
Escape কী: ব্যবহারকারীদের Escape কী টিপে টুলটিপ বাতিল করার অনুমতি দিন।
বাইরে ক্লিক করুন: ব্যবহারকারী যখন টুলটিপ এবং ট্রিগারিং এলিমেন্টের বাইরে যেকোনো জায়গায় ক্লিক করে তখন টুলটিপটি বাতিল করুন। (সাবধানতার সাথে ব্যবহার করুন কারণ এটি বিঘ্নিত করতে পারে)।

উদাহরণ (ক্লোজ বোতাম):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  This is my tooltip content.
  <button onclick="hideTooltip()">বন্ধ করুন</button>
</div>

উদাহরণ (Escape কী):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // আপনার আসল হাইড টুলটিপ ফাংশন দিয়ে প্রতিস্থাপন করুন
  }
});

৭. অতিরিক্ত ব্যবহার এড়ানো

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

টুলটিপের বিকল্প:

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

উন্নত বিবেচ্য বিষয়

ডাইনামিক কনটেন্ট

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

অবস্থান নির্ধারণ

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

মোবাইল ডিভাইস

টুলটিপগুলি ঐতিহ্যগতভাবে হোভার ইন্টারঅ্যাকশনের উপর নির্ভর করে, যা টাচ-ভিত্তিক ডিভাইসগুলিতে উপলব্ধ নয়। মোবাইল ডিভাইসগুলির জন্য, বিকল্প ইন্টারঅ্যাকশন পদ্ধতি ব্যবহার করার কথা বিবেচনা করুন, যেমন:

ট্যাপ: ব্যবহারকারী যখন এলিমেন্টে ট্যাপ করে তখন টুলটিপ প্রদর্শন করুন।
লং প্রেস: ব্যবহারকারী যখন এলিমেন্টে দীর্ঘক্ষণ প্রেস করে তখন টুলটিপ প্রদর্শন করুন।
ফোকাসে দেখান: এলিমেন্টটি ফোকাস পেলে প্রদর্শন করুন। এটি জাভাস্ক্রিপ্ট দিয়ে অর্জন করা যেতে পারে, টাচ সাপোর্ট পরীক্ষা করে (যেমন, ('ontouchstart' in window)) এবং সেই অনুযায়ী প্রদর্শনের আচরণ পরিবর্তন করে।

আপনার টুলটিপ পরীক্ষা করা

আপনার টুলটিপগুলি পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন যাতে সেগুলি সকল ব্যবহারকারীর জন্য অ্যাক্সেসিবল হয়। ম্যানুয়াল টেস্টিং এবং স্বয়ংক্রিয় অ্যাক্সেসিবিলিটি টেস্টিং সরঞ্জামগুলির সংমিশ্রণ ব্যবহার করুন।

পরীক্ষার পদ্ধতি:

কিবোর্ড নেভিগেশন: কিবোর্ড ব্যবহার করে টুলটিপগুলি অ্যাক্সেসযোগ্য কিনা তা যাচাই করুন।
স্ক্রিন রিডার টেস্টিং: টুলটিপগুলি সঠিকভাবে ঘোষণা করা হচ্ছে কিনা তা নিশ্চিত করতে একটি স্ক্রিন রিডার ব্যবহার করুন।
রঙের কনট্রাস্ট বিশ্লেষণ: পর্যাপ্ত কনট্রাস্ট যাচাই করতে একটি কালার কনট্রাস্ট চেকার ব্যবহার করুন।
মোবাইল টেস্টিং: বিভিন্ন মোবাইল ডিভাইস এবং স্ক্রিন সাইজে টুলটিপ পরীক্ষা করুন।
স্বয়ংক্রিয় অ্যাক্সেসিবিলিটি টেস্টিং: সম্ভাব্য অ্যাক্সেসিবিলিটি সমস্যাগুলি সনাক্ত করতে axe DevTools, WAVE, বা Lighthouse এর মতো সরঞ্জাম ব্যবহার করুন।

আন্তর্জাতিকীকরণ (i18n) এবং স্থানীয়করণ (l10n)

একটি বিশ্বব্যাপী দর্শকদের জন্য টুলটিপ তৈরি করার সময়, আন্তর্জাতিকীকরণ এবং স্থানীয়করণের কথা মাথায় রাখুন:

টেক্সটের দিক: বাম-থেকে-ডান (LTR) এবং ডান-থেকে-বাম (RTL) উভয় টেক্সটের দিক সমর্থন করুন। লেআউটের জন্য ফিজিক্যাল প্রপার্টি (যেমন, margin-left, margin-right) এর পরিবর্তে CSS লজিক্যাল প্রপার্টি (যেমন, margin-inline-start, margin-inline-end) ব্যবহার করুন।
ভাষা-নির্দিষ্ট অনুবাদ: বিভিন্ন ভাষার জন্য টুলটিপের বিষয়বস্তুর অনুবাদ প্রদান করুন।
তারিখ এবং সময় ফরম্যাট: ব্যবহারকারীর লোকেল অনুযায়ী তারিখ এবং সময় ফরম্যাট অভিযোজিত করুন।
সংখ্যা ফরম্যাট: বিভিন্ন অঞ্চলের জন্য উপযুক্ত সংখ্যা ফরম্যাট ব্যবহার করুন (যেমন, দশমিক বিভাজক, হাজার বিভাজক)।

উপসংহার

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

MLOG