ওয়েবসাইট কীভাবে সবার জন্য ব্যবহারযোগ্য করবেন: WCAG 2.2 স্টার্টার গাইড

ওয়েবসাইটকে অ্যাক্সেসিবল করতে হলে এমনভাবে বানান যাতে মানুষ শুধু মাউস নয়, কীবোর্ড, স্ক্রিন রিডার, জুম বা সুইচ ডিভাইস দিয়েও এটি ব্যবহার করতে পারেন: বাটন, লিংক, শিরোনাম ও ফর্মের লেবেলের জন্য আসল HTML উপাদান ব্যবহার করুন, ছবিতে অর্থবহ alt টেক্সট দিন, লেখার কনট্রাস্ট উচ্চ রাখুন, এবং ফোকাস দৃশ্যমান রাখুন। যে মান লক্ষ্য করা উচিত তা হলো WCAG 2.2 লেভেল AA। স্বয়ংক্রিয় চেকার সমস্যার একটি অংশ ধরে; দশ মিনিটের কীবোর্ড ও স্ক্রিন রিডার পরীক্ষা বাকি অনেকটা ধরে ফেলে।

বাস্তবে "অ্যাক্সেসিবল" মানে কী

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

প্রামাণ্য মানদণ্ড হলো W3C-এর Web Content Accessibility Guidelines (WCAG)। ২০২৬ সালের সেপ্টেম্বর পর্যন্ত বর্তমান সংস্করণ WCAG 2.2 (প্রকাশিত ২০২৩ সালের অক্টোবরে, ২০২৪ সালের ডিসেম্বরে হালনাগাদ); WCAG 3 একটি প্রাথমিক খসড়া। WCAG চারটি নীতির ওপর সাজানো — কনটেন্টকে হতে হবে পার্সিভেবল, অপারেবল, আন্ডারস্ট্যান্ডেবল ও রোবাস্ট — এবং এর তিনটি সম্মতি স্তর আছে:

একাধিক জায়গার আইন WCAG-এর উল্লেখ করে — যেমন European Accessibility Act, যা ২০২৫ সালের জুন থেকে EU-র অনেক ভোক্তামুখী ডিজিটাল সেবায় প্রযোজ্য। কোন নিয়ম আপনার ক্ষেত্রে প্রযোজ্য তা নির্ভর করে আপনি কোথায় কাজ করেন এবং কী বিক্রি করেন তার ওপর; অনিশ্চিত হলে একজন পরামর্শদাতার সঙ্গে কথা বলুন। এই গাইড ব্যবহারিক কাজের দিকটি নিয়ে।

বিকল্পসমূহ: সেখানে পৌঁছাবেন কীভাবে

বেশিরভাগ ছোট সাইটের জন্য প্রথম দুটিই যথেষ্ট: AI-কে শুরু থেকেই অ্যাক্সেসিবলভাবে বানাতে বলুন, তারপর লঞ্চের আগে নিরীক্ষা করুন।

সবচেয়ে গুরুত্বপূর্ণ সংশোধনগুলো

সঠিক HTML উপাদান ব্যবহার করুন

সঠিক HTML দিয়েই বেশিরভাগ অ্যাক্সেসিবিলিটি বিনামূল্যে আসে। একটি <button> ফোকাসযোগ্য, Enter ও Space দিয়ে কাজ করে এবং বাটন হিসেবে ঘোষিত হয়। ক্লিক হ্যান্ডলারসহ একটি <div>-এর কোনোটিই নেই। AI-লিখিত কোড কখনো কখনো সবকিছুর জন্য স্টাইল করা div ব্যবহার করে; সিম্যান্টিক উপাদান চান:

• অ্যাকশনের জন্য <button>, নেভিগেশনের জন্য <a href>
• প্রতি পেজে একটি <h1>, তারপর ক্রমানুসারে <h2>, <h3> — স্ক্রিন রিডার ব্যবহারকারীরা শিরোনামের মধ্যে লাফ দেন
• ল্যান্ডমার্ক: <header>, <nav>, <main>, <footer>
• প্রতিটি ফর্ম ফিল্ডের সঙ্গে সংযুক্ত <label>
• <html lang="en">-এ পেজের ভাষা

ARIA অ্যাট্রিবিউট শুধু তখনই ব্যবহার করুন যখন কোনো নেটিভ উপাদান মেলে না — যেমন একটি কাস্টম ট্যাব সেট বা combobox-এর জন্য। ভুল ARIA না থাকার চেয়েও খারাপ।

কীবোর্ড অ্যাক্সেস ও দৃশ্যমান ফোকাস

মাউস দিয়ে যা করা যায়, শুধু কীবোর্ড দিয়েও তা করা যেতে হবে (WCAG 2.1.1)। পেজে Tab চাপুন: প্রতিটি লিংক, বাটন ও ফিল্ড একটি যুক্তিসংগত ক্রমে পৌঁছানো উচিত, এবং ফোকাস কোথায় আছে তা সবসময় দেখা যেতে হবে (2.4.7 Focus Visible)। WCAG 2.2 যোগ করেছে যে ফোকাস করা উপাদান স্টিকি হেডার বা কুকি ব্যানারের পেছনে সম্পূর্ণ লুকিয়ে যেতে পারবে না (2.4.11, লেভেল AA)।

সাধারণ ত্রুটি: শুধু হোভারে খোলা মেনু, এমন মোডাল যা ফোকাস ধরে রাখে না বা Escape দিয়ে বন্ধ করা যায় না, এবং CSS-এ outline: none যার বদলে কিছু নেই।

টেক্সট বিকল্প

প্রতিটি অর্থবহ ছবির এমন alt টেক্সট দরকার যা প্রেক্ষাপটে কী দেখাচ্ছে তা বলে ("টেস্টিং মেনু সাজাচ্ছেন এক শেফ", "image1.jpg" নয়)। সাজানোর ছবিতে খালি alt="" দিন যাতে স্ক্রিন রিডার সেগুলো এড়িয়ে যায়। শুধু আইকনের বাটনের একটি অ্যাক্সেসিবল নাম দরকার ("Close", "Search")। ভিডিওতে ক্যাপশন ও অডিওতে ট্রান্সক্রিপ্ট লাগে।

রং ও কনট্রাস্ট

WCAG 2.2 AA সাধারণ লেখার জন্য কমপক্ষে 4.5:1 এবং বড় লেখার জন্য 3:1 কনট্রাস্ট রেশিও চায় (1.4.3), আর ইনপুট বর্ডার ও অর্থবহ আইকনের মতো ইন্টারফেস অংশের জন্য 3:1 (1.4.11)। হালকা ধূসর প্লেসহোল্ডার লেখা ও ফিকে বাটন সাধারণ ব্যর্থতা। এ ছাড়া শুধু রং দিয়ে অর্থ বোঝাবেন না — একটি অবৈধ ফিল্ডের লাল বর্ডারের সঙ্গে ত্রুটির বার্তাও লাগবে।

রিসাইজ ও রিফ্লো

200% জুম করলে লেখা ব্যবহারযোগ্য থাকতে হবে (1.4.4), এবং কনটেন্ট 320 CSS পিক্সেল প্রস্থে অনুভূমিকভাবে স্ক্রল না করে কাজ করতে হবে (1.4.10)। একটি সঠিক রেসপন্সিভ লেআউট এর বেশিরভাগই সামলায়।

টার্গেট, ফর্ম ও ত্রুটি

• টার্গেটের আকার: WCAG 2.2 AA পয়েন্টার টার্গেটের জন্য কমপক্ষে 24 বাই 24 CSS পিক্সেল চায়, অথবা ছোটগুলোর চারপাশে যথেষ্ট ফাঁকা জায়গা (2.5.8)। ফোনে বড় হলে ব্যবহারকারীর জন্য ভালো।
• ফর্ম: দৃশ্যমান লেবেল (শুধু প্লেসহোল্ডার নয়), স্পষ্ট নির্দেশনা, এবং ত্রুটির বার্তা যা বলে কী ভুল এবং কীভাবে ঠিক করতে হবে, ফিল্ডের পাশে।
• লগইন: বিকল্প ছাড়া মানুষকে ধাঁধা সমাধান বা কোড লিখতে বাধ্য করবেন না; পাসওয়ার্ড ম্যানেজার ও পেস্ট করার সুযোগ দিন (3.3.8 Accessible Authentication)।

কাজে লাগে এমন প্রম্পট

এই সাইটটি WCAG 2.2 লেভেল AA মেনে বানাও: সিম্যান্টিক HTML ল্যান্ডমার্ক, প্রতি পেজে একটি h1 এবং ক্রমানুসারে শিরোনাম, প্রকৃত বাটন ও লিংক উপাদান, প্রতিটি ফর্ম ফিল্ডে লেবেল, দৃশ্যমান ফোকাস স্টাইল, কমপক্ষে 4.5:1 লেখার কনট্রাস্ট, অর্থবহ ছবিতে alt টেক্সট এবং সাজানোর ছবিতে alt="", আর html lang সেট করা।

/signup ও /checkout পেজের অ্যাক্সেসিবিলিটি নিরীক্ষা করো। শুধু কীবোর্ড ব্যবহার, ফোকাসের ক্রম, দৃশ্যমান ফোকাস, লেবেল, ত্রুটির বার্তা, কনট্রাস্ট, এবং আইকন বাটনের স্ক্রিন রিডার নাম পরীক্ষা করো। প্রতিটি সমস্যা WCAG মানদণ্ডসহ তালিকা করো, তারপর দৃশ্যমান ডিজাইন যতটা সম্ভব কম বদলে সেগুলো ঠিক করো।

মোবাইল মেনু কীবোর্ড দিয়ে ব্যবহার করা যাচ্ছে না। এটিকে aria-expanded সহ একটি বাটন বানাও, মেনু খুললে ফোকাস মেনুর ভেতরে নাও, Escape দিয়ে বন্ধ করো এবং ফোকাস বাটনে ফিরিয়ে দাও।

ধাপে ধাপে

1. একটি স্বয়ংক্রিয় চেক চালান। Chrome DevTools-এর Lighthouse-এর Accessibility অংশ, অথবা axe ব্রাউজার এক্সটেনশন, প্রতিটি প্রধান পেজে। যা রিপোর্ট করে সবই ঠিক করুন।
2. মাউস সরিয়ে রাখুন। প্রতিটি পেজে Tab চাপুন এবং সব মূল কাজ সম্পন্ন করুন — সাইন আপ, অনুসন্ধান, চেকআউট। যেখানে পৌঁছানো যায় না, ফোকাস দেখা যায় না, বা বেরোনো যায় না, তা লিখে রাখুন।
3. 200% জুম করুন এবং জানালা ফোন-প্রস্থে সরু করুন। কিছুই যেন কাটা না যায় বা অনুভূমিক স্ক্রলের প্রয়োজন না হয়।
4. দশ মিনিট স্ক্রিন রিডার ব্যবহার করুন: Mac ও iPhone-এ VoiceOver, Android-এ TalkBack, অথবা Windows-এ NVDA (বিনামূল্যে)। শিরোনাম, লিংক ও ফর্ম ফিল্ড শুনুন। নাম ছাড়া "বাটন", বা "লিংক, এখানে ক্লিক করুন" মানে কাজ বাকি।
5. কনট্রাস্ট যাচাই করুন লেখা, বাটন ও ইনপুটের জন্য একটি কনট্রাস্ট চেকার দিয়ে।
6. ঠিক করুন, তারপর একই কাজগুলো আবার পরীক্ষা করুন।
7. একটি অ্যাক্সেসিবিলিটি বিবৃতি প্রকাশ করুন, যাতে লেখা থাকে কোন মান লক্ষ্য করা হচ্ছে এবং সমস্যা কীভাবে জানাতে হবে — আর সেই প্রতিবেদনের উত্তর দিন।

সাধারণ ভুল

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

অ্যাক্সেসিবিলিটি চেকলিস্ট

• মূল পেজগুলোতে স্বয়ংক্রিয় চেক (Lighthouse বা axe) পরিষ্কার
• প্রতিটি কাজ শুধু কীবোর্ড দিয়ে সম্পন্ন করা যায়
• ফোকাস সবসময় দৃশ্যমান এবং স্টিকি উপাদানের পেছনে কখনো লুকানো নয়
• সিম্যান্টিক শিরোনাম, ল্যান্ডমার্ক, বাটন ও লিংক; lang সেট করা
• অর্থবহ alt টেক্সট; সাজানোর ছবিতে alt=""; ভিডিওতে ক্যাপশন
• লেখার কনট্রাস্ট ≥ 4.5:1 (বড় লেখা ≥ 3:1); UI অংশ ≥ 3:1
• 200% জুম ও 320 px প্রস্থে কাজ করে
• প্রতিটি ফর্ম ফিল্ডের দৃশ্যমান লেবেল ও স্পষ্ট ত্রুটির বার্তা
• সমস্যা জানানোর উপায়সহ একটি অ্যাক্সেসিবিলিটি বিবৃতি

এর পেছনের ধারণাগুলো জানতে পড়ুন ওয়েব অ্যাক্সেসিবিলিটি কী। অ্যাক্সেসিবল ডিজাইন ও ভালো ডিজাইন অনেকটাই মেলে; ভিজ্যুয়াল দিক নিয়ে দেখুন AI দিয়ে সুন্দর অ্যাপ ডিজাইন করার উপায়।

Mythex-এ অ্যাক্সেসিবিলিটি

Mythex আপনি যে মান চান তাতেই বানায়, তাই আপনার প্রথম প্রম্পটে এবং পরের অনুরোধগুলোতে "WCAG 2.2 AA" লিখুন। ছোট স্ক্রিনের জন্য Preview-র ফোন-আকারের ফ্রেম ব্যবহার করতে পারেন (Preview and Code)। তবে কীবোর্ড, জুম ও স্ক্রিন রিডার পরীক্ষা সবচেয়ে ভালো হয় প্রকাশিত URL-এ বা একটি আলাদা ট্যাবে খোলা প্রিভিউতে। এজেন্টকে একটি পেজ নিরীক্ষা করতে, যা পায় তা ঠিক করতে বলুন, তারপর নিজে ঠিকগুলো পরীক্ষা করুন — স্বয়ংক্রিয় পাস একটি শুরু, চূড়ান্ত অনুমোদন নয়।

প্রশ্নোত্তর