WCAG 2.2 AA চেকলিস্ট: অনলাইন স্টোরের ওয়েব অ্যাক্সেসিবিলিটি

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

মূল বিষয়গুলো

• WCAG 2.2, 5 অক্টোবর 2023-এ W3C Recommendation হয়। বর্তমান সংস্করণটির তারিখ 12 ডিসেম্বর 2024, এবং এটি ISO/IEC 40500:2025 (নতুন ট্যাবে খোলে) হিসেবে অনুমোদিত হয়েছে।
• WebAIM Million 2026 (নতুন ট্যাবে খোলে)-এ (ফেব্রুয়ারি 2026-এর ডেটা) শীর্ষ 10 লাখ ওয়েবসাইটের হোম পেজের 95.9%-এ শনাক্তযোগ্য WCAG 2 ত্রুটি ছিল।
• সবচেয়ে সাধারণ ছয়টি ত্রুটি ছিল কম কনট্রাস্টের টেক্সট (83.9% পেজে), alt টেক্সট না থাকা (53.1%), ফর্ম লেবেল না থাকা (51%), খালি লিংক (46.3%), খালি বাটন (30.6%) এবং পেজের ভাষা নির্ধারিত না থাকা (13.5%)।
• ওই নমুনার 42,516টি Shopify হোম পেজে গড়ে 75.1টি শনাক্ত ত্রুটি ছিল, যেখানে সব পেজের গড় ছিল 56.1।
• WCAG 2.2 চারটি AA মানদণ্ড (2.4.11, 2.5.7, 2.5.8, 3.3.8) এবং দুটি Level A মানদণ্ড (3.2.6, 3.3.7) যোগ করে, আর 4.1.1 Parsing বাদ দেয়।

WCAG 2.2-এ অনলাইন স্টোরের জন্য কী বদলেছে?

WCAG 2.2 নয়টি সাফল্যের মানদণ্ড (success criteria) যোগ করেছে, যার ছয়টি Level A বা AA-র, এবং 4.1.1 Parsing-কে অপ্রচলিত হিসেবে বাদ দিয়েছে (W3C WAI (নতুন ট্যাবে খোলে))।

বাকি তিনটি (2.4.12, 2.4.13 ও 3.3.9) Level AAA-র। যেহেতু 2.2, 4.1.1 ছাড়া 2.1-এর প্রতিটি মানদণ্ড বহাল রাখে, তাই 2.2 AA পূরণ করলে 2.1 AA-ও পূরণ হয়।

স্টোর টেমপ্লেটে কোন WCAG মানদণ্ডগুলো সবচেয়ে বেশি লঙ্ঘিত হয়?

প্রতি বছর ঘুরেফিরে সেই কয়েকটিই আসে: কনট্রাস্ট, alt টেক্সট, ফর্ম লেবেল এবং লিংক ও বাটনের নাম, সঙ্গে কিবোর্ড ও ফোকাসের সমস্যা, যা অটোমেটেড টুল কেবল আংশিকভাবে ধরতে পারে।

WebAIM আরও দেখেছে যে লিংক করা প্রতি চারটি ছবির একটিতে alt টেক্সট ছিল না, এবং alt টেক্সটহীন ছবির 45% ছিল লিংক (WebAIM (নতুন ট্যাবে খোলে))। কালেকশন গ্রিডে এর মানে সাধারণত প্রোডাক্টের ছবির লিংক।

হোম পেজে কী কী যাচাই করবেন?

হেডার, হিরো অংশ এবং যা কিছু পপআপ হয়ে আসে সেগুলো যাচাই করুন, কারণ প্রত্যেক ভিজিটর সবার আগে এগুলোরই মুখোমুখি হন।

• স্কিপ লিংক। প্রথম ফোকাসযোগ্য এলিমেন্ট হিসেবে একটি “Skip to content” (সরাসরি কনটেন্টে যান) লিংক (2.4.1 Bypass Blocks, A)।
• হেডারের আইকন। সার্চ, অ্যাকাউন্ট ও কার্ট আইকনের অ্যাক্সেসিবল নাম আছে, এবং কার্টের নামে আইটেমের সংখ্যা থাকে।
• মেনু। Enter বা Space দিয়ে খোলে, Tab দিয়ে সাব-আইটেমে পৌঁছানো যায়, Escape দিয়ে বন্ধ হয়, এবং হোভারের ওপর নির্ভর করে না (2.1.1)। Shopify-এর Theme Store requirements (নতুন ট্যাবে খোলে) অনুযায়ী ড্রপডাউন মেনুসহ পেজের সব অংশ কিবোর্ড দিয়ে ব্যবহারযোগ্য হতে হবে।
• হিরো স্লাইডার। স্লাইড পাঁচ সেকেন্ডের বেশি স্বয়ংক্রিয়ভাবে চললে একটি পজ কন্ট্রোল দিন (2.2.2 Pause, Stop, Hide, A)।
• অ্যানাউন্সমেন্ট বার ও ছবির ওপরের লেখা। কনট্রাস্ট মেপে দেখুন; ব্র্যান্ডের রং প্রায়ই 4.5:1 পূরণ করে না।
• পপআপ ও কুকি ব্যানার। ফোকাস পপআপের ভেতরে নিয়ে যান, ইমেইল ফিল্ডে লেবেল দিন, Escape দিয়ে বন্ধ করার সুযোগ রাখুন, এবং নিশ্চিত করুন যে কোনো স্টিকি ব্যানার ফোকাস করা এলিমেন্টকে কখনো পুরোপুরি ঢেকে না দেয় (2.4.11)। ফোকাস করা এলিমেন্টকে স্টিকি বার থেকে মুক্ত রাখার একটি উপায় হিসেবে W3C CSS-এর scroll-padding-এর কথা বলে (W3C (নতুন ট্যাবে খোলে))।
• পেজের ভাষা। html এলিমেন্টে একটি সঠিক lang অ্যাট্রিবিউট আছে (3.1.1 Language of Page, A)।

কালেকশন পেজে কী কী যাচাই করবেন?

কালেকশন পেজ সাধারণত প্রোডাক্ট কার্ড, ফিল্টার ও সোয়াচে ব্যর্থ হয়।

• প্রোডাক্ট কার্ড। ছবির লিংকে alt টেক্সট আছে, অথবা ছবিটি অ্যাসিস্টিভ টেকনোলজি থেকে লুকানো এবং টাইটেলের লিংক নামটি বহন করে।
• ফিল্টার। প্রতিটি চেকবক্সের লেবেল আছে এবং প্রতিটি গ্রুপের একটি হেডিং বা legend আছে। ফিল্টার ড্রয়ার কিবোর্ড দিয়ে খোলা, ব্যবহার ও বন্ধ করা যায়। হালনাগাদ হওয়া ফলাফলের সংখ্যা স্ট্যাটাস মেসেজ হিসেবে ঘোষণা করুন (4.1.3 Status Messages, AA)।
• দামের স্লাইডার। সর্বনিম্ন ও সর্বোচ্চ দামের জন্য সংখ্যার ইনপুট যোগ করুন, যাতে ফিল্টারটি টেনে নেওয়া ছাড়া (2.5.7) এবং মাউস ছাড়া (2.1.1) কাজ করে।
• রঙের সোয়াচ। প্রতিটি সোয়াচের একটি টেক্সট নাম আছে, এবং “স্টক শেষ” কেবল রং দিয়ে বোঝানো হয় না (1.4.1 Use of Color, A)। সোয়াচগুলো 24 × 24 CSS পিক্সেল বা দূরত্বের নিয়ম পূরণ করে (2.5.8)।
• সর্টিং ও পেজিনেশন। সর্ট ড্রপডাউনের লেবেল আছে; পেজ লিংক ও “আরও দেখুন” (load more) বাটন টার্গেট সাইজের শর্ত পূরণ করে।

প্রোডাক্ট পেজে কী কী যাচাই করবেন?

কেনার সিদ্ধান্ত হয় প্রোডাক্ট পেজেই, তাই ছবি থেকে অ্যাড-টু-কার্ট বাটন পর্যন্ত প্রতিটি কন্ট্রোল পরীক্ষা করুন।

• গ্যালারি। প্রতিটি ছবির alt টেক্সট আছে, থাম্বনেইলগুলো “ছবি 2 দেখান”-এর মতো নামসহ বাটন, এবং তীরগুলো টেনে নেওয়া ছাড়াই কাজ করে (2.5.7)।
• ভ্যারিয়েন্ট বাছাই। সাইজ ও রঙের অপশনগুলো একটি লেবেলযুক্ত গ্রুপে থাকে (1.3.1), বাছাই করা অপশনটি স্ক্রিন রিডারকে জানানো হয় (4.1.2), এবং যেসব সাইজ পাওয়া যায় না সেগুলো টেক্সটে চিহ্নিত থাকে।
• পরিমাণ। ইনপুটের লেবেল আছে, এবং মাইনাস ও প্লাস বাটনের নাম আছে ও সেগুলো 2.5.8 পূরণ করে। Shopify-এর Theme Store এখন অন্তত 24 × 24 CSS পিক্সেলের টাচ টার্গেট বাধ্যতামূলক করে, আর Shopify-এর accessibility best practices (নতুন ট্যাবে খোলে) প্রধান কন্ট্রোলের জন্য 44 × 44 সুপারিশ করে।
• অ্যাড টু কার্ট। সফলতা ও ত্রুটির বার্তা ঘোষণা করা হয় (4.1.3)। একটি ওভারলে বিক্রেতার বিরুদ্ধে FTC-র অভিযোগে এমন একটি সাইটের উল্লেখ ছিল, যেখানে কার্টে আইটেম যোগ হওয়ার কথা স্ক্রিন রিডার ঘোষণা করেনি, এবং একটি 5-স্টার রেটিং গ্রাফিক “previous” বাটন হিসেবে পড়ে শোনানো হয়েছিল (FTC-র অভিযোগ (নতুন ট্যাবে খোলে))।
• রেটিং, ট্যাব ও অ্যাকর্ডিয়ন। রেটিংয়ে “5-এর মধ্যে 4.5 স্টার”-এর মতো টেক্সট থাকে। অ্যাকর্ডিয়ন জানায় সেটি খোলা আছে কি না।
• স্টিকি অ্যাড-টু-কার্ট বার। কিবোর্ড ব্যবহারকারী Tab চেপে পেজের নিচে নামার সময় এটি ফোকাস করা এলিমেন্টকে পুরোপুরি ঢেকে দিতে পারবে না (2.4.11)।
• ভিডিও। কথা আছে এমন প্রোডাক্ট ভিডিওতে ক্যাপশন থাকে (1.2.2 Captions (Prerecorded), A)।

কার্টে ও সাইন-ইনে কী কী যাচাই করবেন?

বেশিরভাগ থিম পুরোপুরি নিয়ন্ত্রণ করে এমন শেষ পেজ হলো কার্ট, তাই চেকআউট বাটন পর্যন্ত এটি পরীক্ষা করুন, তারপর দেখে নিন অ্যাকাউন্টে সাইন-ইন মনে রাখা বা আবার টাইপ করার ওপর নির্ভর করে কি না।

• কার্ট ড্রয়ার। Shopify-এর best practices যেমন বর্ণনা করে, ফোকাস ড্রয়ারের ভেতরে যায়, খোলা থাকা পর্যন্ত সেখানেই থাকে, এবং Escape দিয়ে বন্ধ করলে কার্ট বাটনে ফিরে আসে।
• লাইন আইটেম। প্রতিটি পরিমাণের ইনপুট প্রোডাক্টের নাম দিয়ে লেবেল করা, এবং প্রতিটি রিমুভ বাটন বলে দেয় কী সরাচ্ছে, যেমন “লিনেন শার্ট, সাইজ M সরান”।
• ডিসকাউন্ট ও নোট ফিল্ড। লেবেলসহ, এবং ত্রুটিগুলো টেক্সটে বর্ণিত (3.3.1 Error Identification, A)।
• চেকআউট বাটন। Tab দিয়ে পৌঁছানো যায়, ফোকাস দৃশ্যমান, এবং স্টিকি এলিমেন্টের পেছনে লুকানো নয়।
• সাইন-ইন (3.3.8)। Shopify-এর কাস্টমার অ্যাকাউন্ট ডিফল্টভাবে ওয়ান-টাইম কোড দিয়ে পাসওয়ার্ডবিহীন সাইন-ইন (নতুন ট্যাবে খোলে) ব্যবহার করে। W3C বলে কোড পেস্ট করা বা স্বয়ংক্রিয়ভাবে পূরণ করা যেতে হবে, এবং পেস্ট বা পাসওয়ার্ড ম্যানেজার ব্লক করলে মানদণ্ডটি পূরণ হয় না; AA লেভেলে বস্তু শনাক্তকরণের CAPTCHA অনুমোদিত, তবে ধাঁধা বা অঙ্কের CAPTCHA-র জন্য অন্য কোনো পদ্ধতি লাগবে (W3C (নতুন ট্যাবে খোলে))।

এখানে প্ল্যাটফর্মের পার্থক্য গুরুত্বপূর্ণ। Shopify-তে তথ্য, শিপিং ও পেমেন্ট ধাপের জন্য checkout.liquid আর সমর্থিত নয় (নতুন ট্যাবে খোলে), তাই চেকআউটের বেশিরভাগ মার্কআপ আপনার থিমের নয়, Shopify-এর; আপনি যেসব চেকআউট অ্যাপ ও কাস্টমাইজেশন যোগ করেন সেগুলো পরীক্ষা করুন। WooCommerce-এ চেকআউট আপনার WordPress সাইটেরই একটি পেজ। WooCommerce বলে তার core ফ্রন্ট এন্ড WCAG 2.2 AA-র সঙ্গে মূলত সামঞ্জস্যপূর্ণ (বিবৃতিটির সর্বশেষ হালনাগাদ 1 এপ্রিল 2025), তবে আপনার থিম ও প্লাগইন তবুও এটি ভেঙে দিতে পারে (WooCommerce (নতুন ট্যাবে খোলে))।

এই চেকলিস্ট অনুযায়ী স্টোর কীভাবে পরীক্ষা করবেন?

প্রতিটি পেজ টাইপে একটি অটোমেটেড স্ক্যান, শুধু কিবোর্ড দিয়ে একটি কেনাকাটা এবং স্ক্রিন রিডার দিয়ে একটি সংক্ষিপ্ত যাচাই একসঙ্গে করুন।

1. অটোমেটেড স্ক্যান। axe, WAVE বা Lighthouse-এর মতো টুল কনট্রাস্ট, alt টেক্সট, লেবেল ও খালি লিংকের সমস্যা ধরে। Shopify-এর Theme Store হোম, কালেকশন ও প্রোডাক্ট পেজে গড়ে অন্তত 90-এর Lighthouse accessibility স্কোর চায়। এটি ন্যূনতম মান, কনফরম্যান্স নয়: W3C বলে টুল নিজে থেকে অ্যাক্সেসিবিলিটি নির্ধারণ করতে পারে না (নতুন ট্যাবে খোলে)।
2. শুধু কিবোর্ড দিয়ে কেনাকাটা। মাউস ছাড়া হোম পেজ থেকে মেনু বা সার্চের মাধ্যমে একটি প্রোডাক্টে পৌঁছান, ফিল্টার করুন, একটি ভ্যারিয়েন্ট বেছে নিন, কার্টে যোগ করুন, কার্ট খুলুন এবং চেকআউট বাটনে পৌঁছান।
3. স্ক্রিন রিডার দিয়ে নমুনা যাচাই। VoiceOver বা NVDA দিয়ে প্রোডাক্টের নাম, দাম, ভ্যারিয়েন্টের অবস্থা এবং কার্টে যোগ হওয়ার নিশ্চিতকরণ শুনে দেখুন।
4. পরিবর্তনের পর আবার পরীক্ষা করুন। থিম আপডেট ও নতুন অ্যাপ আগের সংশোধন নষ্ট করে দিতে পারে।

আমাদের বিনামূল্যের স্ক্যান আসল Chromium-এ axe-core দিয়ে একটি হোম, কালেকশন, প্রোডাক্ট, কার্ট ও কনটেন্ট পেজে ধাপ 1 সম্পন্ন করে। অ্যাক্সেসিবিলিটি সংশোধন রিপোর্ট সর্বোচ্চ 25টি পেজ পরীক্ষা করে, চেকআউট বাটন পর্যন্ত শুধু কিবোর্ড দিয়ে কেনাকাটার একটি টেস্ট হিসেবে ধাপ 2 যোগ করে, আগে-ও-পরের কোড দেয়, এবং ধাপ 3-এর জন্য একটি চেকলিস্ট রাখে, যা স্ক্রিন রিডার নিয়ে একজন মানুষকেই করতে হয়। কোনোটিই ADA বা WCAG কমপ্লায়েন্সের নিশ্চয়তা দেয় না।

প্রায়শই জিজ্ঞাসিত প্রশ্ন

যুক্তরাষ্ট্রের অনলাইন স্টোরের জন্য কি WCAG 2.2 আইনত বাধ্যতামূলক?

মার্কিন বিচার বিভাগের (Department of Justice) এমন কোনো ADA বিধি নেই যা বেসরকারি ব্যবসার জন্য ওয়েব স্ট্যান্ডার্ড নির্ধারণ করে, এবং এর 2022 সালের ওয়েব নির্দেশিকা (নতুন ট্যাবে খোলে) WCAG-কে সহায়ক নির্দেশনা হিসেবে উল্লেখ করে। ডিমান্ড লেটারে সাধারণত WCAG 2.1 বা 2.2 AA উদ্ধৃত করা হয়, তাই আপনার নির্দিষ্ট দায়বদ্ধতা নিয়ে একজন আইনজীবীর সঙ্গে কথা বলুন।

WCAG 2.2 AA পূরণ করলে কি WCAG 2.1 AA-ও পূরণ হয়?

হ্যাঁ, ব্যবহারিক দিক থেকে হয়। WCAG 2.2, 4.1.1 Parsing ছাড়া WCAG 2.1-এর সব সাফল্যের মানদণ্ড বহাল রাখে; 4.1.1-কে W3C অপ্রচলিত হিসেবে বাদ দিয়েছে।

WCAG 2.2-এ ন্যূনতম টার্গেট সাইজ কত?

2.5.8 অনুযায়ী টার্গেট অন্তত 24 × 24 CSS পিক্সেল হতে হবে, যদি না প্রতিটি ছোট টার্গেটের কেন্দ্রে বসানো 24 px-এর একটি বৃত্ত অন্য টার্গেট বা তাদের বৃত্তকে না ছোঁয়। বাক্যের ভেতরের লিংক, স্টাইল না করা ব্রাউজার কন্ট্রোল, অপরিহার্য উপস্থাপনা এবং শর্ত পূরণ করে এমন সমতুল্য কন্ট্রোল থাকা টার্গেট এর আওতামুক্ত।

Lighthouse accessibility স্কোর 100 হলে কি আমার স্টোর মানদণ্ড পূরণ করছে?

না। অটোমেটেড টুল কেবল কিছু ত্রুটি শনাক্ত করে, এবং WebAIM উল্লেখ করে যে শনাক্ত ত্রুটি না থাকার মানে এই নয় যে পেজটি অ্যাক্সেসিবল বা মানদণ্ড-সম্মত।

পাসওয়ার্ড দিয়ে লগইন কি 3.3.8 লঙ্ঘন করে?

নিজে থেকে করে না। মানুষ যদি পাসওয়ার্ড ফিল্ডে পেস্ট করতে পারেন এবং পাসওয়ার্ড ম্যানেজার ব্যবহার করতে পারেন, তাহলে ফিল্ডটি মানদণ্ড পূরণ করে; পেস্ট বা অটোফিল ব্লক করলেই তা লঙ্ঘন হয়।

আমার স্টোর কত ঘন ঘন আবার পরীক্ষা করা উচিত?

প্রতিটি থিম আপডেট, নতুন অ্যাপ বা বড় টেমপ্লেট পরিবর্তনের পর আবার পরীক্ষা করুন, এবং কেনাকাটার পথটি নিয়মিত নমুনা হিসেবে যাচাই করুন, কারণ অ্যাপ কোনো সতর্কতা ছাড়াই নতুন মার্কআপ যোগ করতে পারে।

তথ্যসূত্র

• Web Content Accessibility Guidelines (WCAG) 2.2 (নতুন ট্যাবে খোলে), W3C, Recommendation, 12 ডিসেম্বর 2024
• What's New in WCAG 2.2 (নতুন ট্যাবে খোলে), W3C Web Accessibility Initiative, 5 অক্টোবর 2023
• WCAG 2.2 Approved as an ISO Standard (নতুন ট্যাবে খোলে), W3C Web Accessibility Initiative, 21 অক্টোবর 2025
• How to Meet WCAG 2.2 (Quick Reference) (নতুন ট্যাবে খোলে), W3C Web Accessibility Initiative, দেখা হয়েছে 22 অক্টোবর 2026 (কনফরম্যান্স লেভেল)
• Understanding SC 1.4.3 Contrast (Minimum) (নতুন ট্যাবে খোলে), SC 2.4.11 Focus Not Obscured (Minimum) (নতুন ট্যাবে খোলে), SC 2.5.8 Target Size (Minimum) (নতুন ট্যাবে খোলে) ও SC 3.3.8 Accessible Authentication (Minimum) (নতুন ট্যাবে খোলে), W3C Web Accessibility Initiative, দেখা হয়েছে 22 অক্টোবর 2026
• Selecting Web Accessibility Evaluation Tools (নতুন ট্যাবে খোলে), W3C Web Accessibility Initiative, হালনাগাদ 13 মে 2024
• The WebAIM Million: 2026 report (নতুন ট্যাবে খোলে), WebAIM, ফেব্রুয়ারি 2026-এর ডেটা, সর্বশেষ হালনাগাদ 30 মার্চ 2026
• Theme Store requirements (নতুন ট্যাবে খোলে), Shopify, দেখা হয়েছে 22 অক্টোবর 2026
• Accessibility best practices for Shopify themes (নতুন ট্যাবে খোলে), Shopify, দেখা হয়েছে 22 অক্টোবর 2026
• checkout.liquid (নতুন ট্যাবে খোলে), Shopify, দেখা হয়েছে 22 অক্টোবর 2026
• Sign-in options for customer accounts (নতুন ট্যাবে খোলে), Shopify Help Center, দেখা হয়েছে 22 অক্টোবর 2026
• Accessibility in WooCommerce (নতুন ট্যাবে খোলে), WooCommerce, বিবৃতির সর্বশেষ হালনাগাদ 1 এপ্রিল 2025
• accessiBe complaint (নতুন ট্যাবে খোলে), Federal Trade Commission, 3 জানুয়ারি 2025
• Guidance on Web Accessibility and the ADA (নতুন ট্যাবে খোলে), U.S. Department of Justice, 18 মার্চ 2022