অ্যাক্সেসিবিলিটি এবং সম্মতি এখন কেন ওভারল্যাপ করে

GDPR প্রয়োজন করে যে সম্মতি প্রতিটি ব্যবহারকারীর কাছ থেকে পাওয়া যায়, শুধুমাত্র তাদের কাছ থেকে নয় যারা একটি ব্যানার দেখতে এবং ক্লিক করতে পারে। ইউরোপীয় ডেটা সুরক্ষা বোর্ড স্পষ্ট করেছে যে যদি কোনো ডেটা বিষয় সম্মতি ইন্টারফেসের সাথে অর্থপূর্ণভাবে যোগাযোগ করতে না পারে — সাইটটি যে প্রতিবন্ধিতাকে সামঞ্জস্য করেনি তার কারণে — সম্মতি বৈধভাবে প্রাপ্ত হয়নি। এর মানে হল কুকিগুলি প্রথম স্থানে লোড হওয়া উচিত ছিল না।

অ্যাক্সেসিবিলিটি পক্ষে, ইউরোপীয় অ্যাক্সেসিবিলিটি আইন (EAA) ইইউ সদস্য রাষ্ট্রগুলিতে জাতীয় আইনে অন্তর্ভুক্ত হয়ে ভোক্তা পরিষেবা প্রদানকারী বেসরকারি খাতের ওয়েবসাইট এবং অ্যাপগুলির জন্য WCAG 2.1 AA-কে ন্যূনতম করে তোলে। জরিমানা ব্যবস্থা দেশ অনুযায়ী পরিবর্তিত হয় তবে সাধারণত প্রতি লঙ্ঘনে ৫০,০০০ থেকে ৫০০,০০০ ইউরো পর্যন্ত, সাথে ক্রমাগত অ-সম্মতির জন্য বাজার প্রত্যাহার আদেশ।

কুকি ব্যানারের জন্য মূল WCAG প্রয়োজনীয়তা

কীবোর্ড পরিচালনযোগ্যতা

প্রতিটি ব্যানার নিয়ন্ত্রণ — গ্রহণ করুন, প্রত্যাখ্যান করুন, পছন্দ পরিচালনা করুন, বন্ধ করুন — শুধুমাত্র কীবোর্ড দিয়ে নাগালযোগ্য এবং পরিচালনযোগ্য হতে হবে। ব্যবহারকারীরা যেন Tab দিয়ে বোতামগুলির মাধ্যমে যৌক্তিক ক্রমে নেভিগেট করতে এবং Enter বা Space দিয়ে সক্রিয় করতে পারে। ফোকাস অবশ্যই পটভূমির বিপরীতে ন্যূনতম 3:1 কনট্রাস্ট অনুপাত সহ দৃশ্যমান হতে হবে।

মডাল ব্যানারে ফোকাস ট্র্যাপিং

যদি ব্যানার পৃষ্ঠার বাকি অংশের সাথে ইন্টারঅ্যাকশন ব্লক করে, তাহলে ব্যবহারকারী পছন্দ করা পর্যন্ত কীবোর্ড ফোকাস ব্যানারের ভেতরে আটকে থাকতে হবে। ব্যবহারকারীরা অন্তর্নিহিত পৃষ্ঠা স্ক্রোল করতে ব্যানার থেকে Tab করে বের হতে পারবে না। ফোকাস আটকে থাকলে এবং ব্যানার বন্ধ হলে, ফোকাস সেই উপাদানে ফিরে যাওয়া উচিত যা ব্যানার ট্রিগার করেছিল বা একটি যুক্তিসঙ্গত ডিফল্টে।

স্ক্রিন রিডার ঘোষণা

ব্যানারটিকে একটি অ্যাক্সেসযোগ্য নাম এবং ভূমিকা সহ একটি ডায়ালগ হিসেবে ঘোষণা করতে হবে। ব্যানার শিরোনামে নির্দেশকারী aria-labelledby এবং ব্যাখ্যামূলক পাঠ্যে নির্দেশকারী aria-describedby সহ role="dialog" বা role="alertdialog" ব্যবহার করুন।

রঙের কনট্রাস্ট

বডি টেক্সটকে পটভূমির বিরুদ্ধে 4.5:1 কনট্রাস্ট পূরণ করতে হবে; বড় পাঠ্য (18pt+ বা 14pt বোল্ড) 3:1 প্রয়োজন। বোতামের পাঠ্য, আইকন এবং ফোকাস ইন্ডিকেটরের নিজস্ব কনট্রাস্ট ন্যূনতম আছে। একটি সাদা পটভূমিতে হালকা-ধূসর "প্রত্যাখ্যান" বোতাম একটি ঘন ঘন WCAG ব্যর্থতা যা আমরা অডিটে দেখি।

শুধুমাত্র রঙের ইঙ্গিত নয়

গ্রহণ এবং প্রত্যাখ্যান আলাদা করতে শুধুমাত্র রঙের উপর নির্ভর করবেন না। বর্ণান্ধ ব্যবহারকারীরা যাতে বোতামগুলি আলাদা করতে পারে তার জন্য স্বতন্ত্র লেবেল, আইকন বা আকার ব্যবহার করুন।

ডার্ক প্যাটার্ন এবং অ্যাক্সেসিবিলিটি

WCAG 2.2 নতুন মানদণ্ড প্রবর্তন করে যা সরাসরি ডার্ক প্যাটার্নগুলিকে লক্ষ্য করে — সম্মতির জন্য বিশেষভাবে প্রাসঙ্গিক:

• 3.3.8 অ্যাক্সেসযোগ্য প্রমাণীকরণ — সম্মতি ঘর্ষণ হিসেবে জ্ঞানীয় ধাঁধা নিষিদ্ধ করে।
• 3.3.7 অতিরিক্ত প্রবেশ — শুধুমাত্র সম্মতি প্রত্যাহার করতে ব্যবহারকারীদের তথ্য পুনরায় প্রবেশ করতে হবে না।
• 2.4.11 ফোকাস অস্পষ্ট নয় — ব্যানার নিজেই এর পিছনের উপাদানগুলির ফোকাস ইন্ডিকেটর অস্পষ্ট করা উচিত নয়।
• 2.5.7 ড্র্যাগিং আন্দোলন — আপনার ব্যানার যদি ড্র্যাগ-টু-অ্যাকসেপ্ট ইন্টারঅ্যাকশন ব্যবহার করে, একটি একক-পয়েন্টার বিকল্প অবশ্যই থাকতে হবে।

RTL এবং আন্তর্জাতিকীকরণ

অ্যাক্সেসিবিলিটি ডান-থেকে-বাম ভাষা (আরবি, হিব্রু, ফারসি, উর্দু) এবং স্ক্রিন রিডার উচ্চারণে বিস্তৃত:

• ব্যানারে dir="rtl" সেট করুন যখন দস্তাবেজের ভাষা RTL হয় যাতে বোতামের ক্রম এবং ফোকাস প্রবাহ পঠন দিকনির্দেশনার সাথে মিলে।
• সঠিক lang অ্যাট্রিবিউট ব্যবহার করুন অনুবাদিত ব্যানার কপিতে যাতে স্ক্রিন রিডার সঠিক ফোনেটিক্স দিয়ে শব্দ উচ্চারণ করে।
• আইকনোগ্রাফি মিরর করুন — শেভ্রন, তীর এবং অগ্রগতি সূচকগুলি RTL লোকেলের জন্য উল্টাতে হবে।

WCAG সম্মতির জন্য আপনার ব্যানার পরীক্ষা করা

একটি একক সরঞ্জামের উপর নির্ভর করবেন না। স্বয়ংক্রিয় স্ক্যানিং এবং বাস্তব সহায়ক-প্রযুক্তি পরীক্ষা একত্রিত করুন:

• axe DevTools বা Lighthouse — স্বয়ংক্রিয়ভাবে প্রায় 30-40% WCAG ব্যর্থতা ধরে।
• Windows-এ NVDA বা JAWS, Mac/iOS-এ VoiceOver, Android-এ TalkBack — বাস্তব স্ক্রিন রিডার দিয়ে পরীক্ষা করুন। ব্যানারটি কি শুধুমাত্র স্ক্রিন রিডার ব্যবহার করে ঘোষণা, নেভিগেট এবং বাতিল করা যায়?
• শুধুমাত্র কীবোর্ড নেভিগেশন — আপনার মাউস আনপ্লাগ করুন। যদি আপনি গ্রহণ, প্রত্যাখ্যান এবং পছন্দ পরিচালনা করতে না পারেন, কীবোর্ড ব্যবহারকারীরাও পারবে না।
• বর্ণান্ধতা সিমুলেশন — Chrome DevTools-এ অন্তর্নির্মিত দৃষ্টি ঘাটতি সিমুলেটর আছে। প্রোটানোপিয়া, ডিউটেরানোপিয়া এবং ট্রিটানোপিয়ার অধীনে গ্রহণ এবং প্রত্যাখ্যান আলাদাযোগ্য কিনা পরীক্ষা করুন।
• 400%-এ জুম করুন — WCAG প্রয়োজন করে যে অনুভূমিক স্ক্রোলিং ছাড়াই 400% জুমে বিষয়বস্তু ব্যবহারযোগ্য থাকে। ফিক্সড-পজিশন ব্যানারগুলি প্রায়ই এই পরীক্ষায় ব্যর্থ হয়।

আমরা যে সাধারণ অ্যাক্সেসিবিলিটি ব্যর্থতা দেখি

• একটি কগহুইল আইকনের পিছনে লুকানো প্রত্যাখ্যান — ডার্ক প্যাটার্ন এবং অ্যাক্সেসিবিলিটি ব্যর্থতা (আইকন বোতামে কোনো অ্যাক্সেসযোগ্য নাম নেই)।
• ফোকাস কখনই ব্যানারে পৌঁছায় না — ব্যানার যা দৃশ্যমান মনোযোগ আকর্ষণ করে কিন্তু Tab অর্ডারে এড়িয়ে যাওয়া হয়।
• ফোকাস ট্র্যাপ ছাড়া মডাল ব্যানার — ব্যানার ইন্টারঅ্যাকশন ব্লক করার দাবি করার সময় ব্যবহারকারীরা পটভূমির পৃষ্ঠায় ট্যাব করতে পারে।
• পছন্দ পরিবর্তনে কোনো aria-live নেই — স্ক্রিন রিডার ব্যবহারকারীরা তাদের পছন্দ সংরক্ষিত হয়েছে বলে নিশ্চিতকরণ শুনতে পান না।
• lang অ্যাট্রিবিউট ছাড়া অনুবাদিত ব্যানার — স্ক্রিন রিডার স্প্যানিশ কপি ইংরেজি ফোনেটিক্স দিয়ে উচ্চারণ করে।

FlexyConsent কীভাবে অ্যাক্সেসিবিলিটি প্রদান করে