বিশ্বব্যাপী একশ কোটিরও বেশি মানুষ কোনো না কোনো ধরনের প্রতিবন্ধিতা নিয়ে বসবাস করছেন। এটি বিশ্ব জনসংখ্যার প্রায় ১৫%। এদের মধ্যে রয়েছেন দৃষ্টি প্রতিবন্ধী বা স্বল্প দৃষ্টিসম্পন্ন ব্যক্তিরা, শ্রবণ প্রতিবন্ধী বা কম শোনেন এমন ব্যক্তিরা, চলাচলে সীমাবদ্ধতাযুক্ত ব্যক্তিরা, জ্ঞানীয় পার্থক্যযুক্ত ব্যক্তিরা, অথবা ভাঙা হাত বা মাইগ্রেনের মতো সাময়িক অবস্থার ব্যক্তিরা।
যখন আমরা এই বাস্তবতাগুলো বিবেচনা না করে ওয়েবসাইট তৈরি করি, তখন আমরা শুধু অসুবিধা সৃষ্টি করছি না। আমরা মানুষদের সেই তথ্য, সেবা এবং সুযোগ থেকে বঞ্চিত করছি যা অন্যরা স্বাভাবিক হিসেবে গ্রহণ করে। অ্যাক্সেসিবিলিটি কোনো ফিচার নয়। এটি একটি দায়িত্ব।
ওয়েব অ্যাক্সেসিবিলিটি কী
ওয়েব অ্যাক্সেসিবিলিটি মানে হলো ওয়েবসাইট এমনভাবে ডিজাইন ও ডেভেলপ করা যাতে প্রতিবন্ধী ব্যক্তিরা সেগুলো অনুধাবন করতে, বুঝতে, নেভিগেট করতে এবং ইন্টারঅ্যাক্ট করতে পারেন। এর মানে হলো তারা ওয়েবে অবদান রাখতেও পারেন।
এটি শুধু স্ক্রিন রিডারের বিষয় নয়। অ্যাক্সেসিবিলিটি নিম্নলিখিত ক্ষেত্রগুলো অন্তর্ভুক্ত করে:
- দৃষ্টিগত: অন্ধত্ব, স্বল্প দৃষ্টি, বর্ণান্ধতা
- শ্রবণগত: বধিরতা, কম শ্রবণশক্তি
- শারীরিক সক্ষমতা: সূক্ষ্ম মোটর নিয়ন্ত্রণের সীমাবদ্ধতা, কম্পন, পক্ষাঘাত
- জ্ঞানীয়: ডিসলেক্সিয়া, ADHD, স্মৃতি সমস্যা, শেখার অক্ষমতা
- সাময়িক ও পরিস্থিতিগত: কব্জি ভাঙা, স্ক্রিনে তীব্র সূর্যের আলো, কোলাহলপূর্ণ পরিবেশ, ধীর ইন্টারনেট
মূল উপলব্ধি হলো অ্যাক্সেসযোগ্য ডিজাইন সবার উপকার করে। ক্যাপশন কোলাহলপূর্ণ জায়গায় কাজে আসে। উচ্চ কনট্রাস্ট উজ্জ্বল আলোতে সাহায্য করে। কীবোর্ড নেভিগেশন পাওয়ার ইউজারদের সাহায্য করে। স্পষ্ট লেখা অ-মাতৃভাষীদের সাহায্য করে। অ্যাক্সেসিবিলিটি কোনো বিশেষ মোড নয় — এটি ভালো ডিজাইন।
WCAG মানদণ্ড
Web Content Accessibility Guidelines (WCAG) হলো W3C কর্তৃক প্রকাশিত ওয়েব অ্যাক্সেসিবিলিটির আন্তর্জাতিক মানদণ্ড। বর্তমান সংস্করণ হলো WCAG 2.2, যা POUR সংক্ষেপে পরিচিত চারটি নীতির উপর ভিত্তি করে সংগঠিত:
অনুধাবনযোগ্য (Perceivable)
তথ্য এমনভাবে উপস্থাপন করতে হবে যা সব ব্যবহারকারী অনুধাবন করতে পারেন।
- টেক্সট বিকল্প: প্রতিটি ইমেজে তার বিষয়বস্তু বর্ণনা করা
altঅ্যাট্রিবিউট থাকতে হবে। আলংকারিক ইমেজেalt=""ব্যবহার করুন। - ক্যাপশন ও ট্রান্সক্রিপ্ট: ভিডিও কন্টেন্টে ক্যাপশন প্রয়োজন; অডিও কন্টেন্টে ট্রান্সক্রিপ্ট প্রয়োজন।
- অভিযোজিত কাঠামো: স্টাইল সরিয়ে দিলেও কন্টেন্ট অর্থবহ হওয়া উচিত। শুধু ভিজ্যুয়াল স্টাইলিং নয়, সিমান্টিক HTML (
<h1>,<nav>,<main>,<article>) ব্যবহার করুন। - পৃথকযোগ্য কন্টেন্ট: পর্যাপ্ত রঙের কনট্রাস্ট, আকার পরিবর্তনযোগ্য টেক্সট, শুধু রঙ দিয়ে তথ্য প্রদান না করা।
পরিচালনাযোগ্য (Operable)
ব্যবহারকারীদের ইন্টারফেস পরিচালনা করতে সক্ষম হতে হবে।
- কীবোর্ড অ্যাক্সেসযোগ্য: প্রতিটি ইন্টারঅ্যাক্টিভ উপাদান শুধুমাত্র কীবোর্ড দিয়ে পৌঁছানো ও ব্যবহারযোগ্য হতে হবে। মাউস ট্র্যাপ তৈরি করবেন না।
- পর্যাপ্ত সময়: যদি কন্টেন্টে সময়সীমা থাকে, ব্যবহারকারীরা তা বাড়াতে বা নিষ্ক্রিয় করতে পারবেন।
- খিঁচুনি প্রতিরোধ: প্রতি সেকেন্ডে তিনবারের বেশি ঝলকানো কন্টেন্ট এড়িয়ে চলুন।
- নেভিগেটযোগ্য: স্পষ্ট পেজ শিরোনাম, যৌক্তিক হেডিং কাঠামো, স্কিপ নেভিগেশন লিংক, দৃশ্যমান ফোকাস ইন্ডিকেটর।
বোধগম্য (Understandable)
কন্টেন্ট ও ইন্টারফেস বোধগম্য হতে হবে।
- পাঠযোগ্য টেক্সট: পেজের ভাষা নির্দিষ্ট করুন (
langঅ্যাট্রিবিউট)। যতটা সম্ভব স্পষ্ট, সহজ ভাষা ব্যবহার করুন। - অনুমানযোগ্য আচরণ: নেভিগেশন সামঞ্জস্যপূর্ণ হওয়া উচিত। পেজগুলো অপ্রত্যাশিতভাবে প্রসঙ্গ পরিবর্তন করা উচিত নয়।
- ইনপুট সহায়তা: ফর্ম ফিল্ডে স্পষ্ট লেবেল দিন। সহায়ক ত্রুটি বার্তা প্রদান করুন যা ব্যাখ্যা করে কী ভুল হয়েছে এবং কীভাবে ঠিক করবেন।
দৃঢ় (Robust)
কন্টেন্ট বর্তমান ও ভবিষ্যৎ প্রযুক্তির সাথে কাজ করার জন্য যথেষ্ট দৃঢ় হতে হবে।
- বৈধ HTML: সঠিক সিমান্টিক মার্কআপ যা সহায়ক প্রযুক্তি নির্ভরযোগ্যভাবে ব্যাখ্যা করতে পারে।
- নাম, ভূমিকা, মান: কাস্টম কম্পোনেন্টগুলোকে অ্যাক্সেসিবিলিটি API-তে তাদের উদ্দেশ্য প্রকাশ করতে হবে (প্রয়োজনে ARIA ব্যবহার করে)।
কনফরম্যান্স স্তর
WCAG তিনটি স্তর নির্ধারণ করে:
| স্তর | অর্থ | উদাহরণ |
|---|---|---|
| A | ন্যূনতম অ্যাক্সেসিবিলিটি | ইমেজে alt টেক্সট আছে, পেজে শিরোনাম আছে |
| AA | বেশিরভাগ ওয়েবসাইটের স্ট্যান্ডার্ড লক্ষ্য | সাধারণ টেক্সটের জন্য রঙের কনট্রাস্ট অনুপাত কমপক্ষে ৪.৫:১ |
| AAA | সর্বোচ্চ স্তর, সবসময় অর্জনযোগ্য নয় | কনট্রাস্ট অনুপাত ৭:১, সব ভিডিওতে সাংকেতিক ভাষা |
বিশ্বব্যাপী বেশিরভাগ আইন স্তর AA মেনে চলার দাবি করে। এটিই আপনার লক্ষ্য করা উচিত।
সাধারণ বাধা এবং সমাধান
ইমেজে alt টেক্সট নেই
সমস্যা: স্ক্রিন রিডার ব্যবহারকারীরা "ইমেজ" শোনেন অথবা কিছুই শোনেন না।
সমাধান: প্রতিটি তথ্যবহ ইমেজে বর্ণনামূলক alt টেক্সট যোগ করুন। আলংকারিক ইমেজের জন্য alt="" ব্যবহার করুন যাতে স্ক্রিন রিডার সেগুলো এড়িয়ে যায়।
<!-- Good -->
<img
src="chart.png"
alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>
<!-- Decorative -->
<img src="divider.svg" alt="" />
অপর্যাপ্ত রঙের কনট্রাস্ট
সমস্যা: স্বল্প দৃষ্টিসম্পন্ন বা বর্ণান্ধ ব্যক্তিরা টেক্সট পড়তে পারেন না।
সমাধান: সাধারণ টেক্সটের জন্য ন্যূনতম ৪.৫:১ এবং বড় টেক্সটের (১৮px+ বা ১৪px বোল্ড) জন্য ৩:১ কনট্রাস্ট অনুপাত নিশ্চিত করুন। আপনার রঙের সমন্বয় যাচাই করতে কনট্রাস্ট চেকার টুল ব্যবহার করুন।
আপনি এখনই রঙের কনট্রাস্ট পরীক্ষা করতে পারেন। আমাদের কনট্রাস্ট চেকার টুল ব্যবহার করুন — এটি WCAG AA এবং AAA পাস/ফেইল ফলাফল তাৎক্ষণিকভাবে দেখায়।
ফর্ম লেবেল নেই
সমস্যা: স্ক্রিন রিডার ব্যবহারকারীরা জানেন না ফর্ম ফিল্ডটি কিসের জন্য।
সমাধান: প্রতিটি ইনপুটে for অ্যাট্রিবিউট দিয়ে যুক্ত একটি দৃশ্যমান <label> উপাদান থাকতে হবে।
<!-- Good -->
<label for="email">Email address</label>
<input type="email" id="email" name="email" />
<!-- Bad: placeholder is not a label -->
<input type="email" placeholder="Email address" />
কীবোর্ড নেভিগেশন নেই
সমস্যা: যারা মাউস ব্যবহার করতে পারেন না তারা আটকে যান।
সমাধান: নেটিভ HTML উপাদান (<button>, <a>, <select>) ব্যবহার করুন যা ডিফল্টভাবে কীবোর্ড-অ্যাক্সেসযোগ্য। কাস্টম কম্পোনেন্ট তৈরি করলে নিশ্চিত করুন সেগুলো ফোকাসযোগ্য এবং কীবোর্ড ইভেন্টে সাড়া দেয়। বিকল্প না দিয়ে ফোকাস আউটলাইন কখনো সরাবেন না।
পেজ কাঠামো নেই
সমস্যা: স্ক্রিন রিডার ব্যবহারকারীরা দক্ষতার সাথে নেভিগেট করতে পারেন না।
সমাধান: সিমান্টিক HTML ব্যবহার করুন। প্রতি পেজে একটি <h1>, যৌক্তিক হেডিং শ্রেণিবিন্যাস (স্তর এড়িয়ে যাবেন না), ল্যান্ডমার্ক (<nav>, <main>, <footer>)।
মিডিয়ার অটো-প্লে
সমস্যা: অপ্রত্যাশিত অডিও স্ক্রিন রিডার ব্যবহারকারীদের বিরক্ত করে। অটো-প্লে ভিডিও খিঁচুনি ঘটাতে পারে বা অস্বস্তি সৃষ্টি করতে পারে।
সমাধান: অডিও কখনো অটো-প্লে করবেন না। ভিডিও অটো-প্লে হলে ডিফল্টে অডিও বন্ধ রাখুন এবং পজ নিয়ন্ত্রণ দিন।
শুধু রঙ যথেষ্ট নয়
তথ্য জানানোর একমাত্র উপায় হিসেবে রঙের উপর নির্ভর করবেন না। বিবেচনা করুন:
- ত্রুটির জন্য লাল বর্ডারযুক্ত ফর্ম ফিল্ডে একটি ত্রুটি আইকন বা টেক্সট বার্তাও থাকা দরকার
- রঙিন রেখাযুক্ত চার্টে প্যাটার্ন, লেবেল বা লিজেন্ডও থাকা দরকার
- টেক্সটের মধ্যে লিঙ্কে আন্ডারলাইন বা অন্য ভিজ্যুয়াল সংকেত থাকা দরকার, শুধু রঙ পরিবর্তন নয়
প্রায় ৮% পুরুষ এবং ০.৫% নারী কোনো না কোনো ধরনের বর্ণ দৃষ্টি ঘাটতিতে ভোগেন। এটি মাথায় রেখে ডিজাইন করা কোনো বিরল ঘটনা নয় — এটি মৌলিক অন্তর্ভুক্তি।
অ্যাক্সেসিবিলিটি পরীক্ষা
স্বয়ংক্রিয় পরীক্ষা
স্বয়ংক্রিয় টুলগুলো প্রায় ৩০-৪০% অ্যাক্সেসিবিলিটি সমস্যা শনাক্ত করে। এগুলো একটি ভালো প্রথম পদক্ষেপ, সম্পূর্ণ সমাধান নয়।
- axe DevTools (ব্রাউজার এক্সটেনশন) — পেজ স্ক্যান করে WCAG লঙ্ঘন রিপোর্ট করে
- Lighthouse (Chrome DevTools-এ অন্তর্নির্মিত) — অ্যাক্সেসিবিলিটি অডিট অন্তর্ভুক্ত
- WAVE (ওয়েব-ভিত্তিক টুল) — সমস্যা দেখানো ভিজ্যুয়াল ওভারলে
ম্যানুয়াল পরীক্ষা
অনেক অ্যাক্সেসিবিলিটি সমস্যার জন্য মানবিক বিচার প্রয়োজন:
- কীবোর্ড পরীক্ষা: মাউস সরিয়ে রাখুন এবং Tab, Enter, Escape ও তীর চিহ্ন দিয়ে পুরো সাইট নেভিগেট করুন। আপনি কি সবকিছুতে পৌঁছাতে পারছেন? ফোকাসের ক্রম কি যৌক্তিক?
- স্ক্রিন রিডার পরীক্ষা: VoiceOver (Mac), NVDA (Windows, বিনামূল্যে), বা TalkBack (Android) ব্যবহার করে দেখুন। জোরে পড়লে কন্টেন্ট কি বোধগম্য হয়?
- জুম পরীক্ষা: ব্রাউজার ২০০% জুম করুন। লেআউট কি এখনো কাজ করছে? কন্টেন্ট কি কাটা যাচ্ছে বা ওভারল্যাপ হচ্ছে?
- মোশন কমানো: আপনার OS সেটিংসে "reduce motion" সক্রিয় করুন। অ্যানিমেশন কি এই পছন্দ মেনে চলছে?
ব্যবহারকারী পরীক্ষা
সবচেয়ে মূল্যবান প্রতিক্রিয়া আসে তাদের কাছ থেকে যারা দৈনন্দিন জীবনে সত্যিই সহায়ক প্রযুক্তি ব্যবহার করেন। আপনার বাজেট অনুমতি দিলে প্রতিবন্ধী ব্যবহারকারীদের পরীক্ষা প্রক্রিয়ায় অন্তর্ভুক্ত করুন।
অ্যাক্সেসিবিলিটি একটি বর্ণালী, চেকবক্স নয়
অ্যাক্সেসিবিলিটি কোনো এককালীন প্রকল্প নয় যার একটি সমাপ্তি রেখা আছে। এটি একটি চলমান চর্চা। ওয়েবসাইট পরিবর্তিত হয়, কন্টেন্ট যোগ হয়, এবং প্রতিটি আপডেটের সাথে নতুন বাধা তৈরি হতে পারে।
লক্ষ্য নিখুঁততা নয়। লক্ষ্য হলো ক্রমাগত উন্নতি এবং আপনি যা তৈরি করেছেন তা ব্যবহারকারীদের প্রতি সত্যিকারের যত্ন। সবচেয়ে প্রভাবশালী পরিবর্তনগুলো দিয়ে শুরু করুন — রঙের কনট্রাস্ট, alt টেক্সট, কীবোর্ড নেভিগেশন, ফর্ম লেবেল — এবং সেখান থেকে এগিয়ে যান।
আপনি যে প্রতিটি বাধা সরান তা কারো জন্য একটি দরজা খুলে দেয়।
দ্রুত চেকলিস্ট
- সব ইমেজে অর্থবহ
altটেক্সট আছে (আলংকারিক হলেalt="") - রঙের কনট্রাস্ট WCAG AA পূরণ করে (টেক্সট ৪.৫:১, বড় টেক্সট ৩:১)
- সব ফর্ম ফিল্ডে দৃশ্যমান লেবেল আছে
- সাইট সম্পূর্ণরূপে কীবোর্ড দিয়ে নেভিগেটযোগ্য
- হেডিং যৌক্তিক শ্রেণিবিন্যাস অনুসরণ করে
- ফোকাস ইন্ডিকেটর দৃশ্যমান
- পেজের ভাষা সেট করা আছে (
<html>-এlangঅ্যাট্রিবিউট) - শুধু রঙ দিয়ে কোনো তথ্য জানানো হয়নি
- ভিডিওতে ক্যাপশন আছে
- অ্যানিমেশন
prefers-reduced-motionমেনে চলে