ARIA অ্যাট্রিবিউটস ব্যবহার করে অ্যাক্সেসিবিলিটি বৃদ্ধি

ARIA (Accessible Rich Internet Applications) অ্যাট্রিবিউটস এমন এক গুচ্ছ বৈশিষ্ট্য যা ওয়েব অ্যাপ্লিকেশনগুলোর অ্যাক্সেসিবিলিটি উন্নত করার জন্য ডিজাইন করা হয়েছে। এগুলো বিশেষত স্ক্রীন রিডার ব্যবহারকারী এবং অন্যান্য সাহায্যকারী প্রযুক্তির জন্য সহায়ক, যাতে তারা সঠিকভাবে ওয়েব কনটেন্ট এবং অ্যাপ্লিকেশন ইন্টারঅ্যাক্ট করতে পারে। XHTML ডকুমেন্টে ARIA অ্যাট্রিবিউটস ব্যবহারের মাধ্যমে আপনি আপনার ওয়েবসাইটের অ্যাক্সেসিবিলিটি উন্নত করতে পারেন।

১. ARIA কী?

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

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

ARIA অ্যাট্রিবিউটস বিভিন্ন উপাদানের জন্য অ্যাক্সেসিবিলিটি তথ্য প্রদান করতে সাহায্য করে, যেমন: ইন্টারঅ্যাকটিভ এলিমেন্ট, ডায়নামিক কনটেন্ট এবং UI উপাদান।

২.১ aria-label

aria-label অ্যাট্রিবিউটটি একটি উপাদানের বর্ণনা প্রদান করে যখন এটি শুধুমাত্র একটি আইকন বা চিত্রের আকারে থাকে। এটি স্ক্রীন রিডার ব্যবহারকারীকে সেই উপাদানটি সম্পর্কে বোঝানোর জন্য সাহায্য করে।

<button aria-label="Search" onclick="searchFunction()">🔍</button>

এখানে, বাটনটি শুধুমাত্র একটি চিহ্ন (🔍) দেখায়, কিন্তু স্ক্রীন রিডার ব্যবহারকারী এটি "Search" হিসেবে শোনাবে।

২.২ aria-labelledby

aria-labelledby অ্যাট্রিবিউটটি একটি উপাদানকে অন্য একটি উপাদানের মাধ্যমে বর্ণনা করে। এটি ব্যবহারকারীকে জানায় কোন এলিমেন্টের মাধ্যমে বর্ণনা করা হচ্ছে।

<h1 id="header">Welcome to My Website</h1>
<p aria-labelledby="header">This is the main page of my site.</p>

এখানে, প্যারাগ্রাফটি aria-labelledby="header" ব্যবহার করে <h1> এলিমেন্টের মাধ্যমে বর্ণিত হচ্ছে, যাতে স্ক্রীন রিডার ব্যবহারকারী এটি শোনে যে প্যারাগ্রাফটি "Welcome to My Website" শিরোনামের অধীনে।

২.৩ aria-hidden

aria-hidden অ্যাট্রিবিউটটি একটি উপাদানকে স্ক্রীন রিডার থেকে লুকানোর জন্য ব্যবহৃত হয়, যাতে এটি অ্যাক্সেসযোগ্য না হয়।

<div aria-hidden="true">This content is hidden from screen readers.</div>

এখানে, <div> ট্যাগের কনটেন্ট স্ক্রীন রিডার ব্যবহারকারীদের জন্য দৃশ্যমান হবে না।

২.৪ aria-live

aria-live অ্যাট্রিবিউটটি ডায়নামিক কনটেন্টের জন্য ব্যবহৃত হয়, যেমন একাধিক পৃষ্ঠা বা কনটেন্ট যা সাইটের মধ্যে পরিবর্তিত হয় (উদাহরণস্বরূপ, একটি খবরের স্ট্রিম)। এটি স্ক্রীন রিডারকে জানায় যে কনটেন্টে পরিবর্তন হয়েছে এবং ব্যবহারকারীকে তা জানাতে হবে।

<div aria-live="polite">New updates will appear here.</div>

এখানে, aria-live="polite" ব্যবহার করে স্ক্রীন রিডারকে সূক্ষ্মভাবে নতুন আপডেট সম্পর্কে জানানো হচ্ছে।

৩. ARIA এর মাধ্যমে ডায়নামিক কনটেন্টের অ্যাক্সেসিবিলিটি উন্নয়ন

XHTML ডকুমেন্টে ডায়নামিক কনটেন্ট থাকতে পারে যা JavaScript বা অন্যান্য প্রযুক্তির মাধ্যমে পরিবর্তিত হয়। ARIA অ্যাট্রিবিউটস এই ধরনের কনটেন্টের অ্যাক্সেসিবিলিটি নিশ্চিত করতে সাহায্য করে।

৩.১ aria-expanded

aria-expanded অ্যাট্রিবিউটটি ব্যবহার করা হয় যদি কোন উপাদান (যেমন ড্রপডাউন মেনু) সম্প্রসারিত বা সংকুচিত হয়ে থাকে।

<button aria-expanded="false" onclick="toggleMenu()">Menu</button>

এখানে, aria-expanded="false" অ্যাট্রিবিউটটি ব্যবহার করে বোঝানো হচ্ছে যে মেনুটি সংকুচিত রয়েছে এবং যখন এটি সম্প্রসারিত হবে, তখন aria-expanded="true" হবে।

৩.২ aria-controls

aria-controls অ্যাট্রিবিউটটি এক উপাদানকে অন্য উপাদান নিয়ন্ত্রণ করতে বলে, যেমন একটি মেনু যা অন্য একটি কনটেন্ট এলিমেন্টের প্রদর্শন বা অবস্থান নিয়ন্ত্রণ করে।

<button aria-controls="menu" aria-expanded="false" onclick="toggleMenu()">Toggle Menu</button>
<div id="menu">Menu Content</div>

এখানে, aria-controls="menu" ব্যবহার করে বোঝানো হচ্ছে যে বাটনটি মেনু কনটেন্ট নিয়ন্ত্রণ করে।

৪. এক্সএইচটিএমএল এবং ARIA: কিছু গুরুত্বপূর্ণ দিক

• কেস-সেনসিটিভ অ্যাট্রিবিউটস: XHTML এ সমস্ত অ্যাট্রিবিউট নাম ছোট হাতের অক্ষরে থাকতে হবে। যেমন, aria-label, aria-hidden, aria-expanded ইত্যাদি।
• ট্যাগ বন্ধন: XHTML তে সব ট্যাগ এবং অ্যাট্রিবিউট সঠিকভাবে বন্ধ করতে হবে। যেমন: <div />, <button /> ইত্যাদি।

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