ওয়েব অ্যাক্সেসিবিলিটি কী? WCAG ও ইনক্লুসিভ ডিজাইন
ওয়েব অ্যাক্সেসিবিলিটি মানে ওয়েবসাইট ও অ্যাপ এমনভাবে বানানো, যাতে প্রতিবন্ধী মানুষও সেগুলো ব্যবহার করতে পারেন — তারা দৃষ্টিহীন হয়ে স্ক্রিন রিডার ব্যবহার করুন, মাউস ব্যবহার করতে না পারুন, কম দৃষ্টিশক্তি বা রঙ-অন্ধতা থাকুক, শ্রবণ-প্রতিবন্ধী হোন, বা জ্ঞানীয় ও শেখার প্রতিবন্ধিতা থাকুক। বাস্তবে এর মানে ছবির বিকল্প লেখা, যথেষ্ট রঙের কনট্রাস্ট, ঠিক লেবেলযুক্ত ফর্ম, এবং শুধু কীবোর্ড দিয়ে সবকিছু কাজ করা। এর আন্তর্জাতিক মানদণ্ড হলো WCAG — W3C-এর Web Content Accessibility Guidelines।
Accessibility-কে সংক্ষেপে বলা হয় a11y — "a", তারপর ১১টি অক্ষর, তারপর "y"।
এআই দিয়ে বানানোর সময় অ্যাক্সেসিবিলিটি কেন গুরুত্বপূর্ণ
এআই বিল্ডাররা এমন অ্যাপ বানাতে ভালো যা দেখতে ঠিক মনে হয়। অ্যাক্সেসিবিলিটি মূলত এমন বিষয় নিয়ে, যা স্ক্রিনশটে দেখা যায় না: বোতামটি সত্যিই বোতাম কি না, ইনপুটের এমন লেবেল আছে কি না যা স্ক্রিন রিডার ঘোষণা করতে পারে, এবং Tab কী দিয়ে মেনুতে পৌঁছানো যায় কি না।
এজন্য এগুলো জিজ্ঞেস করা গুরুত্বপূর্ণ:
- এটি সহজে চোখ এড়িয়ে যায়। একটি কাস্টম-স্টাইল ড্রপডাউন দেখতে নিখুঁত হতে পারে, অথচ মাউস ছাড়া ব্যবহার করা অসম্ভব। আপনি পরীক্ষা না করলে বুঝতে পারবেন না।
- শুরুতেই ঠিক করা সস্তা। প্রথম প্রম্পট থেকে অ্যাক্সেসিবল কম্পোনেন্ট চাইলে প্রায় কোনো খরচ নেই। শেষ হওয়া অ্যাপ পরে ঠিক করতে গেলে প্রতিটি স্ক্রিন ছুঁতে হয়।
- এটি সবার উপকার করে। ক্যাপশন কোলাহলের জায়গায় মানুষকে সাহায্য করে, ভালো কনট্রাস্ট রোদে ফোনে থাকা মানুষকে সাহায্য করে, এবং স্পষ্ট লেবেল সবার ফর্ম দ্রুত পূরণে সাহায্য করে।
- এটি SEO-এর সাথে মেলে। সঠিক শিরোনাম, বর্ণনামূলক লিংক ও alt টেক্সট সার্চ ইঞ্জিনও আপনার পেজ বুঝতে সাহায্য করে — দেখুন এআই-বানানো ওয়েবসাইটের SEO।
- এটি প্রয়োজনীয় হতে পারে। আপনি কোথায় কাজ করেন এবং কাদের সেবা দেন, তার উপর নির্ভর করে অ্যাক্সেসিবিলিটি আইনগত বাধ্যবাধকতা হতে পারে।
একটি দৈনন্দিন উদাহরণ
একটি ভবনের প্রবেশপথের কথা ভাবুন।
সিঁড়ি অনেকের জন্য ভালোই কাজ করে। একটি র্যাম্প হুইলচেয়ার ব্যবহারকারীর জন্য কাজ করে — এবং প্রাম নিয়ে চলা অভিভাবক, ট্রলি নিয়ে ডেলিভারি কর্মী ও স্যুটকেস নিয়ে ভ্রমণকারীদের জন্যও। স্বয়ংক্রিয় দরজা, স্পষ্ট সাইনবোর্ড, লিফটের বোতামে ব্রেইল ও ভালো আলো — প্রতিটি কাউকে একটি বাধা থেকে মুক্ত করে।
ওয়েব অ্যাক্সেসিবিলিটি ডিজিটাল জায়গার জন্য একই ধারণা: আপনার অ্যাপের র্যাম্প, সাইনবোর্ড ও হ্যান্ডরেল। আর ভবনের মতোই, পরিকল্পনায় র্যাম্প যুক্ত করা কংক্রিট ঢালাইয়ের পরে যোগ করার চেয়ে অনেক সহজ।
WCAG সংক্ষেপে
WCAG প্রকাশ করে W3C-এর Web Accessibility Initiative। বর্তমান সংস্করণ WCAG 2.2, যা প্রথম প্রকাশিত হয় ২০২৩ সালের অক্টোবরে। এটি পশ্চাদমুখী সামঞ্জস্যপূর্ণ: WCAG 2.2 মেনে চলা কনটেন্ট 2.1 ও 2.0-ও মেনে চলে, এবং W3C সর্বশেষ সংস্করণ ব্যবহারের পরামর্শ দেয়। WCAG 2.2 ISO/IEC 40500:2025 হিসেবে আন্তর্জাতিক মানদণ্ডও অনুমোদিত। একটি সম্পূর্ণ আলাদা WCAG 3 একটি প্রাথমিক খসড়া হিসেবে উন্নয়নাধীন, চূড়ান্ত মানদণ্ড নয়।
WCAG চারটি নীতির অধীনে সংগঠিত, যা প্রায়ই POUR নামে মনে রাখা হয়:
| নীতি | মানে | উদাহরণ |
|---|---|---|
| Perceivable (উপলব্ধিযোগ্য) | মানুষ যে ইন্দ্রিয় ব্যবহার করে সেগুলো দিয়ে কনটেন্ট গ্রহণ করতে পারে | ছবির alt টেক্সট, ভিডিওর ক্যাপশন, যথেষ্ট কনট্রাস্ট |
| Operable (পরিচালনাযোগ্য) | মানুষ কন্ট্রোল ব্যবহার ও নেভিগেট করতে পারে | কীবোর্ড অ্যাক্সেস, বর্ধিত করা না যায় এমন সময়সীমা নয়, দৃশ্যমান ফোকাস |
| Understandable (বোধগম্য) | কনটেন্ট ও আচরণ অর্থপূর্ণ | স্পষ্ট লেবেল, সহায়ক ত্রুটির বার্তা, ধারাবাহিক নেভিগেশন |
| Robust (শক্তিশালী) | বিভিন্ন ব্রাউজার ও সহায়ক প্রযুক্তির সাথে কাজ করে | সঠিক HTML এলিমেন্ট, কন্ট্রোলের সঠিক নাম ও ভূমিকা |
প্রতিটি নির্দেশিকায় তিন স্তরে পরীক্ষাযোগ্য সাফল্য-মানদণ্ড আছে:
- Level A — ন্যূনতম। এগুলো ব্যর্থ হলে কিছু মানুষ পুরোপুরি আটকে যান।
- Level AA — সাধারণ লক্ষ্য, এবং বেশিরভাগ আইন ও নীতি যে স্তরের দিকে নির্দেশ করে।
- Level AAA — সর্বোচ্চ স্তর। কোথাও কোথাও লক্ষ্য করার মতো, কিন্তু W3C পুরো সাইটের জন্য এটি বাধ্যতামূলক করার সুপারিশ করে না, কারণ কিছু কনটেন্ট তা পূরণ করতে পারে না।
WCAG 2.2 তার আগের 2.1-এ নয়টি সাফল্য-মানদণ্ড যোগ করেছে, যার মধ্যে আছে AA স্তরে Target Size (Minimum) — ক্লিকযোগ্য টার্গেট সাধারণত কমপক্ষে ২৪ × ২৪ CSS পিক্সেল হওয়া উচিত, কিছু ব্যতিক্রম সহ — এবং Accessible Authentication (Minimum), যা স্মৃতি বা ধাঁধার উপর নির্ভরশীল লগইন ধাপ সীমিত করে, যেমন পাসওয়ার্ড পেস্ট করতে না দিয়ে আবার টাইপ করতে বলা। এটি পুরনো "Parsing" মানদণ্ডও অপ্রচলিত হিসেবে সরিয়ে দিয়েছে।
একটি বাস্তব উদাহরণ: একটি সাইন-আপ ফর্ম
একটি এআই যে সাইন-আপ ফর্ম বানাতে পারে এবং একটি অ্যাক্সেসিবিলিটি পরীক্ষায় কী ধরা পড়ে:
| সমস্যা | কে প্রভাবিত হয় | সমাধান |
|---|---|---|
| ইনপুটে লেবেলের বদলে প্লেসহোল্ডার লেখা ("Email") | স্ক্রিন রিডার ব্যবহারকারী; লেখা শুরু করার পর কোন ফিল্ড ছিল ভুলে যাওয়া যে কেউ | প্রতিটি ইনপুটের সাথে যুক্ত একটি দৃশ্যমান <label> |
| সাদার উপর হালকা ধূসর লেখা, ৪.৫:১-এর অনেক নিচে কনট্রাস্ট | কম দৃষ্টিশক্তির মানুষ, বাইরে থাকা যে কেউ | ৪.৫:১ কনট্রাস্ট মেটানো গাঢ় লেখা |
| ত্রুটি শুধু লাল বর্ডার দিয়ে দেখানো | রঙ-অন্ধ ব্যবহারকারী, স্ক্রিন রিডার ব্যবহারকারী | ফিল্ডের পাশে একটি টেক্সট বার্তা, যা স্ক্রিন রিডারও ঘোষণা করে |
"Sign up" একটি স্টাইল করা <div>, <button> নয় | কীবোর্ড ও স্ক্রিন রিডার ব্যবহারকারী এটি সক্রিয় করতে পারেন না | একটি আসল <button> এলিমেন্ট ব্যবহার |
| ফিল্ডগুলোতে Tab করার সময় কোনো দৃশ্যমান আউটলাইন নেই | কীবোর্ড ব্যবহারকারী কোথায় আছেন তা হারান | একটি স্পষ্ট ফোকাস স্টাইল |
| লোগো ছবিতে alt টেক্সট নেই | স্ক্রিন রিডার ব্যবহারকারী শুধু একটি ফাইলের নাম শোনেন | "Acme Bookings"-এর মতো alt টেক্সট |
এই সমাধানগুলোর কোনোটি ফর্মটি কেমন দেখায় তা খুব বেশি বদলায় না। কিন্তু প্রতিটি কিছু মানুষের জন্য ফর্মটি আদৌ ব্যবহার করা সম্ভব কি না, তা বদলায়।
মূল পরিভাষা
| পরিভাষা | মানে |
|---|---|
| স্ক্রিন রিডার | যে সফটওয়্যার স্ক্রিন জোরে বা ব্রেইল ডিসপ্লেতে পড়ে, যেমন VoiceOver, NVDA বা JAWS। |
| Alt টেক্সট | ছবির একটি টেক্সট বর্ণনা, যা স্ক্রিন রিডার পড়ে। সজ্জামূলক ছবিতে খালি alt দেওয়া হয়, যাতে সেগুলো এড়িয়ে যাওয়া হয়। |
| Contrast ratio (কনট্রাস্ট রেশিও) | লেখা ও ব্যাকগ্রাউন্ড রঙের পার্থক্য, ১:১ থেকে ২১:১ পর্যন্ত। |
| Keyboard navigation (কীবোর্ড নেভিগেশন) | মাউসের বদলে Tab, Enter, Space ও তীর কী দিয়ে সাইট ব্যবহার। |
| Focus indicator (ফোকাস ইন্ডিকেটর) | দৃশ্যমান আউটলাইন, যা দেখায় কীবোর্ড এখন কোন এলিমেন্টে আছে। |
| Semantic HTML (সিম্যান্টিক HTML) | কাজের জন্য সঠিক এলিমেন্ট ব্যবহার — <button>, <nav>, <h2> — যাতে ব্রাউজার ও সহায়ক প্রযুক্তি পেজ বোঝে। |
| ARIA | কাস্টম কন্ট্রোলের বর্ণনা দেওয়ার অতিরিক্ত অ্যাট্রিবিউট। কম ব্যবহার করা উচিত; আগে নেটিভ HTML এলিমেন্ট। |
| Assistive technology (সহায়ক প্রযুক্তি) | কম্পিউটার ব্যবহারের জন্য মানুষ যেসব টুল ব্যবহার করেন, স্ক্রিন রিডার থেকে সুইচ ডিভাইস ও ভয়েস কন্ট্রোল পর্যন্ত। |
সাধারণ ভুল ধারণা
- "অ্যাক্সেসিবিলিটি শুধু দৃষ্টিহীন ব্যবহারকারীদের জন্য।" এটি দৃষ্টি, মোটর, শ্রবণ, কথা ও জ্ঞানীয় প্রতিবন্ধিতা, সেই সাথে হাত ভাঙার মতো সাময়িক অবস্থাও ঢাকে।
- "অ্যাক্সেসিবল সাইট সাদামাটা দেখায়।" অ্যাক্সেসিবিলিটি কনট্রাস্ট, ফোকাস স্টাইল ও লেখার আকারের মতো কিছু বিষয় সীমিত করে, কিন্তু সুন্দর দেখতে অ্যাক্সেসিবল সাইট স্বাভাবিক, ব্যতিক্রম নয়।
- "একটি স্বয়ংক্রিয় চেকার ১০০ দিলে আমরা শেষ।" স্বয়ংক্রিয় টুল শুধু কিছু সমস্যা ধরে। alt টেক্সট সত্যিই অর্থপূর্ণ কি না, বা একটি ফ্লো স্ক্রিন রিডারে যুক্তিসঙ্গত কি না, তা দেখতে একজন মানুষ লাগে।
- "একটি ওভারলে উইজেট আমাদের সম্মতিপূর্ণ করবে।" উপরে বসানো টুলবার আপনার কোডে লেবেল না থাকা বা কীবোর্ড অ্যাক্সেসের সমস্যা ঠিক করতে পারে না। উৎসে ঠিক করুন।
- "আমাদের কোনো প্রতিবন্ধী ব্যবহারকারী নেই।" হয়তো আপনি জানেন না। অনেক প্রতিবন্ধিতা দৃশ্যমান নয়, আর যারা বাধা পান তারা সাধারণত শুধু চলে যান।
আপনার এআই বিল্ডারকে কী চাইবেন
- "এটি WCAG 2.2 লেভেল AA মেনে বানাও।"
- "সিম্যান্টিক HTML ব্যবহার করো: আসল বোতাম, লিংক, ক্রমানুসারে শিরোনাম, এবং প্রতিটি ফর্ম ফিল্ডের লেবেল।"
- "নিশ্চিত করো প্রতিটি ইন্টারঅ্যাক্টিভ এলিমেন্ট শুধু কীবোর্ড দিয়ে কাজ করে এবং দৃশ্যমান ফোকাস স্টাইল আছে।"
- "সব টেক্সট ও আইকনের রঙ কনট্রাস্টের জন্য পরীক্ষা করো — সাধারণ লেখায় ৪.৫:১, বড় লেখা ও আইকনে ৩:১।"
- "তথ্যবহ ছবিতে অর্থপূর্ণ alt টেক্সট এবং সজ্জামূলক ছবিতে খালি alt দাও।"
- "ফর্মের ত্রুটি শুধু রঙ দিয়ে নয়, টেক্সট হিসেবে দেখাও, যা ফিল্ডের সাথে যুক্ত থাকবে।"
- "অ্যানিমেশনের জন্য ব্যবহারকারীর reduced-motion সেটিং মেনে চলো।"
- "একটি স্বয়ংক্রিয় অ্যাক্সেসিবিলিটি চেক চালাও এবং যা পরীক্ষা করতে পারে না তার তালিকা দাও, যাতে আমি হাতে যাচাই করতে পারি।"
তারপর নিজে পরীক্ষা করুন: মাউস সরিয়ে রাখুন এবং শুধু Tab, Shift+Tab, Enter ও Space দিয়ে আপনার প্রধান ফ্লো শেষ করার চেষ্টা করুন। আপনার ফোনের বিল্ট-ইন স্ক্রিন রিডার দিয়ে মূল পেজ শুনুন। ব্রাউজার ২০০% জুম করে দেখুন কিছু ভেঙে যায় কি না।
Mythex-এ অ্যাক্সেসিবিলিটি
Mythex-এ কোনো নির্দিষ্ট অ্যাক্সেসিবিলিটি চেকার নেই, তাই অ্যাক্সেসিবিলিটিকে আপনার প্রম্পট ও পরীক্ষার অংশ হিসেবে দেখুন। প্রথম প্রম্পট থেকেই WCAG 2.2 AA চান, Preview-তে কীবোর্ড দিয়ে ফলাফল যাচাই করুন, এবং পাবলিশের আগে এজেন্ট দিয়ে মূল ফ্লো ক্লিক করিয়ে নিতে /test ব্যবহার করুন — দেখুন App Testing। SEO রেসিপি-ও সিম্যান্টিক শিরোনাম ও অর্থপূর্ণ alt টেক্সট চায়, যা দুই লক্ষ্যেই কাজ করে।
একটি হাতে-কলমে চেকলিস্টের জন্য দেখুন কীভাবে আপনার ওয়েবসাইট অ্যাক্সেসিবল করবেন। ডিজাইনের জন্য দেখুন এআই দিয়ে ভালো দেখতে অ্যাপ ডিজাইন, এবং লঞ্চের আগে লঞ্চের আগে অ্যাপ পরীক্ষা। W3C-এর নিজস্ব WCAG ওভারভিউ সবচেয়ে নির্ভরযোগ্য সূত্র।
প্রশ্নোত্তর
সহজ কথায় ওয়েব অ্যাক্সেসিবিলিটি কী?
ওয়েব অ্যাক্সেসিবিলিটি মানে ওয়েবসাইট ও অ্যাপ এমনভাবে ডিজাইন ও তৈরি করা, যাতে প্রতিবন্ধী মানুষ সেগুলো উপলব্ধি, বোঝা, নেভিগেট ও ব্যবহার করতে পারেন। এর মধ্যে আছে স্ক্রিন রিডার ব্যবহারকারী দৃষ্টিহীন মানুষ, যারা মাউস ব্যবহার করতে পারেন না, কম দৃষ্টিশক্তি বা রঙ-অন্ধ মানুষ, শ্রবণ-প্রতিবন্ধী ব্যবহারকারী এবং জ্ঞানীয় প্রতিবন্ধী মানুষ।
WCAG কী?
WCAG (Web Content Accessibility Guidelines) হলো ওয়েব অ্যাক্সেসিবিলিটির আন্তর্জাতিক মানদণ্ড, যা W3C প্রকাশ করেছে। বর্তমান সংস্করণ WCAG 2.2, যা প্রথম প্রকাশিত হয় ২০২৩ সালের অক্টোবরে। এর সাফল্য-মানদণ্ড A, AA ও AAA স্তরে ভাগ করা, এবং AA স্তরই বেশিরভাগ প্রতিষ্ঠান ও আইনে উল্লেখিত লক্ষ্য।
AA স্তরে কোন রঙের কনট্রাস্ট লাগে?
AA স্তরে সাধারণ লেখার জন্য ব্যাকগ্রাউন্ডের বিপরীতে কনট্রাস্ট রেশিও কমপক্ষে ৪.৫:১ লাগে, এবং বড় লেখার জন্য (মোটামুটি ১৮ পয়েন্ট, বা বোল্ড ১৪ পয়েন্ট) কমপক্ষে ৩:১ লাগে। আইকন ও কন্ট্রোলের দৃশ্যমান অংশের জন্য পাশের রঙের বিপরীতে কমপক্ষে ৩:১ লাগে।
ওয়েব অ্যাক্সেসিবিলিটি কি আইনগতভাবে বাধ্যতামূলক?
অনেক জায়গায়, অনেক প্রতিষ্ঠানের জন্য, হ্যাঁ। আইন দেশ ও খাতভেদে আলাদা — যেমন European Accessibility Act ইইউ-এর অনেক ভোক্তা ডিজিটাল পণ্য ও সেবা ঢেকে রাখে। আপনার প্রযোজ্য নিয়মগুলো দেখে নিন, অথবা একজন আইন উপদেষ্টার পরামর্শ নিন।
একটি অ্যাক্সেসিবিলিটি ওভারলে বা উইজেট কি আমার সাইটকে সম্মতিপূর্ণ করতে পারে?
শুধু একা নয়। ওভারলে আপনার সাইটের উপরে একটি টুলবার যোগ করে, কিন্তু লেবেল না থাকা, কীবোর্ডে অব্যবহারযোগ্য নেভিগেশন বা অস্পষ্ট কাঠামোর মতো মূল সমস্যা নির্ভরযোগ্যভাবে ঠিক করতে পারে না। নির্ভরযোগ্য উপায় হলো সাইটের কোড ও কনটেন্ট ঠিক করা।