আধুনিক ওয়েব অ্যাপ ও ARIA রোলস: সকলের জন্য উন্মুক্ত ইন্টারনেট গড়ার চাবিকাঠি
আমরা আজকে ওয়েব ডেভেলপমেন্টের এমন একটি বিষয় নিয়ে আলোচনা করব যা আপাতদৃষ্টিতে সাধারণ মনে হলেও, এর গুরুত্ব অপরিসীম। বিষয়টি হলো ARIA রোলস এবং ওয়েব অ্যাক্সেসিবিলিটি। আধুনিক যুগে আমরা যখন জটিল সব ওয়েব অ্যাপ্লিকেশন তৈরি করি, তখন শুধুমাত্র সাধারণ HTML ট্যাগ সবসময় যথেষ্ঠ হয় না। এখানেই ARIA (Accessible Rich Internet Applications)-এর জাদুকরী ভূমিকা শুরু হয়।
সহজ কথায় বলতে গেলে, ARIA হলো ওয়েব দুনিয়ার "দোভাষী"। ভাবুন তো, আপনি এমন একটি দেশে গিয়েছেন যার ভাষা আপনি বোঝেন না। সেখানে একজন দোভাষী যেমন আপনাকে সব বুঝিয়ে দেয়, ঠিক তেমনি যখন সাধারণ HTML কোড স্ক্রিন রিডার বা অন্যান্য সহায়ক প্রযুক্তির (Assistive Technology) কাছে অর্থহীন মনে হয়, তখন ARIA সেই কোডগুলোর অর্থ বা 'ভূমিকা' বুঝিয়ে দেয়। এটি স্ক্রিন রিডার ব্যবহারকারী, বিশেষ করে দৃষ্টি প্রতিবন্ধী ব্যক্তিদের জন্য ওয়েবসাইটটি ব্যবহারযোগ্য করে তোলে।
ARIA ব্যবহারের সোনালী নিয়ম বা 'গোল্ডেন রুল'
ARIA ব্যবহারের আগে একটি অত্যন্ত গুরুত্বপূর্ণ নিয়ম বা 'গোল্ডেন রুল' আমাদের মনে রাখতে হবে: যদি সাধারণ HTML এলিমেন্ট দিয়ে কাজ চলে যায়, তবে অকারণে ARIA ব্যবহার করার প্রয়োজন নেই।
উদাহরণস্বরূপ, যদি একটি <button> ট্যাগ দিয়েই আপনার কাজ হয়ে যায়, সেখানে অযথা <div> ব্যবহার করে তাতে role="button" যোগ করার দরকার নেই। কিন্তু বর্তমানের জটিল ডিজাইনের যুগে সবসময় এই নিয়ম মেনে চলা সম্ভব হয় না। ডিজাইনের প্রয়োজনে আমাদের অনেক সময় আপোষ করতে হয়। আমাদের লক্ষ্য হলো, সেই আপোষ যেন প্রতিবন্ধী ব্যক্তিদের জন্য ওয়েবসাইটটি ব্যবহারের অযোগ্য না করে তোলে।
একটি বাস্তব উদাহরণ: সমস্যা এবং সমাধান
আসুন বিষয়টি হাতে-কলমে বোঝা যাক। ধরা যাক, আমরা আমাদের ওয়েবসাইটে The Transcendent লেখাটিকে বিশেষভাবে উপস্থাপন করতে চাই। ডিজাইনের খাতিরে আমরা প্রতিটি অক্ষরকে আলাদা আলাদা স্টাইল বা অ্যানিমেশন দিতে চাইছি। এর জন্য আমরা প্রতিটি অক্ষরকে আলাদা <span> ট্যাগের মধ্যে রাখলাম।
দৃশ্যপট: কোডিং স্ট্রাকচার
সাধারণত ডেভেলপাররা টেক্সট অ্যানিমেশনের জন্য নিচের মতো কোড লেখেন:
<span>T</span><span>h</span><span>e</span>
<span>T</span><span>r</span><span>a</span><span>n</span>...
</h1>
দৃশ্যত এটি ব্রাউজারে চমৎকার দেখাবে। কিন্তু পর্দার আড়ালে "অ্যাক্সেসিবিলিটি ট্রি" (Accessibility Tree) তে এটি একটি বড় সমস্যা তৈরি করে।
স্ক্রিন রিডারের চোখে সমস্যা
ব্রাউজার যখন আমাদের কোড পড়ে, তখন সে দুটি জিনিস তৈরি করে। একটি হলো DOM (Document Object Model), যা আমরা চিনি। অন্যটি হলো 'অ্যাক্সেসিবিলিটি ট্রি'। স্ক্রিন রিডারগুলো এই ট্রি থেকেই তথ্য পড়ে শোনায়।
যখন আমরা "The Transcendent" লেখাটিকে ভেঙে টুকরো টুকরো করি, স্ক্রিন রিডার এটিকে একটি সম্পূর্ণ শব্দ বা বাক্য হিসেবে না পড়ে, প্রতিটি অক্ষর আলাদা আলাদাভাবে উচ্চারণ করতে পারে। ভাবুন তো, "T-H-E... T-R-A-N-S..." এভাবে শুনলে ব্যবহারকারীর কতটা বিরক্তি লাগবে! এটি মোটেও ভালো ইউজার এক্সপেরিয়েন্স নয়।
সমাধান: ARIA-এর জাদুকরী ব্যবহার
এই সমস্যা সমাধানের জন্য আমরা দুটি শক্তিশালী অ্যাট্রিবিউট ব্যবহার করব: aria-label এবং aria-hidden।
ধাপ ১: সঠিক লেবেল যুক্ত করা
প্রথমে, পুরো লেখাটিকে একটি কন্টেইনার বা div-এর মধ্যে রাখব। এরপর সেই div-এ aria-label="The Transcendent" যুক্ত করব। এর ফলে আমরা স্ক্রিন রিডারকে নির্দেশ দিচ্ছি, "ভেতরের কোড যাই হোক না কেন, তুমি ব্যবহারকারীকে শুধু 'The Transcendent' এই বাক্যটিই পড়ে শোনাবে।"
ধাপ ২: অপ্রয়োজনীয় অংশ লুকানো
ভেতরের আলাদা আলাদা <span> বা অক্ষরগুলোকে আড়াল করতে হবে, নাহলে স্ক্রিন রিডার দুবার পড়ে ফেলতে পারে। এজন্য আমরা ভেতরের স্টাইল করা অংশটিতে aria-hidden="true" ব্যবহার করব। এর ফলে, সেই অংশটি দৃশ্যমান থাকবে ঠিকই, কিন্তু অ্যাক্সেসিবিলিটি ট্রি থেকে সেটি অদৃশ্য হয়ে যাবে।
<h1 aria-label="The Transcendent">
<span aria-hidden="true">
<span>T</span><span>h</span><span>e</span>...
</span>
</h1>
এই পদ্ধতি প্রয়োগের পর যদি আমরা স্ক্রিন রিডার দিয়ে টেস্ট করি, দেখব যে সমস্যাটি জাদুর মতো সমাধান হয়ে গেছে। এখন আর ভাঙা ভাঙা অক্ষর নয়, বরং স্পষ্ট ও সুন্দরভাবে পুরো বাক্যটি শোনা যাচ্ছে।
ডেভেলপারদের জন্য সারসংক্ষেপ
দিনশেষে আমাদের লক্ষ্য হলো কোড এবং মানুষের মধ্যে সেতু তৈরি করা। মনে রাখবেন, ARIA হলো রান্নার মশলার মতো—সঠিক পরিমাণে দিলে স্বাদ বাড়ে, কিন্তু ভুল জায়গায় দিলে পুরো খাবারটিই নষ্ট হয়ে যেতে পারে। নিচে সংক্ষেপে কাজের ধাপগুলো দেওয়া হলো:
| ধাপ | বিষয় | বর্ণনা ও করণীয় |
|---|---|---|
| ১ | সমস্যা চিহ্নিতকরণ | আপনার কোডের জটিল ডিজাইন স্ক্রিন রিডারে কীভাবে শোনা যাচ্ছে তা চেক করুন। |
| ২ | aria-label প্রয়োগ | মূল কন্টেইনারে সঠিক টেক্সট লেবেল হিসেবে যুক্ত করুন যাতে অর্থ ঠিক থাকে। |
| ৩ | aria-hidden ব্যবহার | যেসব উপাদান শুধুমাত্র ভিজ্যুয়াল ডিজাইনের জন্য, সেগুলোকে স্ক্রিন রিডার থেকে লুকাতে true ভ্যালু দিন। |
উপসংহার
বর্তমান সময়ে ওয়েব টেকনোলজি দ্রুত পাল্টাচ্ছে। আধুনিক ফ্রেমওয়ার্কগুলোতে অনেক অটোমেটেড টুলস থাকে, কিন্তু যন্ত্রের ওপর পুরোপুরি নির্ভর না করে ম্যানুয়ালি কোড চেক করা সবসময়ই বুদ্ধিমানের কাজ। The Transcendent সর্বদা এমন প্রযুক্তির চর্চা করে যা সকলের জন্য সমান সুযোগ তৈরি করে।
আপনার ওয়েবসাইটটিকে এমনভাবে তৈরি করুন যেন স্ক্রিন রিডার সেটিকে একজন মানুষের মতো পড়ে, কোনো তোতলামি করা রোবটের মতো নয়।