AI ইন্টারফেসের জন্য অ্যাক্সেসিবিলিটি নীতিমালা
এই পাঠে যা শিখবেন
- AI ইন্টারফেসে অ্যাক্সেসিবিলিটির নির্দিষ্ট চ্যালেঞ্জ — শুধু স্ট্যাটিক কনটেন্ট নয়, ডায়নামিক/অনিশ্চিত আউটপুট
- WCAG-এর রিলেটিভ-লুমিনেন্স ও কনট্রাস্ট-রেশিও ফর্মুলা কীভাবে কাজ করে
- একটি সত্যিকারের কনট্রাস্ট-রেশিও ক্যালকুলেটর কোড দিয়ে বাস্তব রঙ-জোড়া যাচাই
- স্ক্রিন-রিডার, কীবোর্ড-নেভিগেশন ও মোশন-সংবেদনশীলতার জন্য AI-নির্দিষ্ট ডিজাইন বিবেচনা
১ · AI ইন্টারফেসে অ্যাক্সেসিবিলিটি কেন আলাদা চ্যালেঞ্জ
সাধারণ ওয়েব অ্যাক্সেসিবিলিটি মূলত স্ট্যাটিক কনটেন্ট নিয়ে কাজ করে — একটি নির্দিষ্ট ছবির alt
টেক্সট, একটি নির্দিষ্ট বাটনের লেবেল। কিন্তু AI ইন্টারফেসে আউটপুট ডায়নামিক ও অনিশ্চিত —
প্রতিটি ব্যবহারকারীর জন্য ভিন্ন সাজেশন, ভিন্ন কনফিডেন্স স্কোর, ভিন্ন ব্যাখ্যা তৈরি হয়। তাই এখানে
অ্যাক্সেসিবিলিটির প্রশ্নও ভিন্নভাবে জিজ্ঞাসা করতে হয়: একজন স্ক্রিন-রিডার ব্যবহারকারী কি জানতে পারবেন AI
কখন একটি নতুন সাজেশন দেখাচ্ছে (L26-এর অনবোর্ডিং ও L27-এর ফিডব্যাক-লুপ ধারণার সাথে সরাসরি সম্পর্কিত)? একজন
মোটর-সীমাবদ্ধতাযুক্ত ব্যবহারকারী কি শুধু কীবোর্ড দিয়ে একটি AI সাজেশন গ্রহণ বা প্রত্যাখ্যান করতে পারবেন?
রঙ-কনট্রাস্ট, স্ক্রিন-রিডার-সামঞ্জস্যপূর্ণ কাঠামো, শুধু রঙের উপর নির্ভর না করে (যেমন লাল/সবুজ দিয়ে "সঠিক/ভুল" না দেখিয়ে আইকন+টেক্সটও যোগ করা)।
প্রতিটি AI-সাজেশন/অ্যাকশন শুধু মাউস নয়, কীবোর্ড দিয়েও সম্পূর্ণভাবে ব্যবহারযোগ্য হতে হবে, যথেষ্ট বড় ট্যাপ-টার্গেট সহ।
ভয়েস-ভিত্তিক AI ইন্টারফেসের জন্য টেক্সট বিকল্প এবং ক্যাপশন থাকা আবশ্যক।
হঠাৎ পপ-আপ হওয়া AI সাজেশন বা দ্রুত পরিবর্তনশীল কনটেন্ট মনোযোগ-সংক্রান্ত অক্ষমতাযুক্ত ব্যবহারকারীর জন্য বিভ্রান্তিকর হতে পারে — L24-এর কগনিটিভ-লোড ধারণার সাথে সম্পর্কিত।
২ · WCAG কনট্রাস্ট-রেশিও — আসল ফর্মুলা
WCAG-এর মতে প্রতিটি রঙের একটি রিলেটিভ লুমিনেন্স (relative luminance) থাকে, যা গণনা করা হয় প্রতিটি RGB চ্যানেলকে (০-২৫৫ থেকে ০-১ স্কেলে) "লিনিয়ারাইজ" করে, তারপর মানব-চোখের সংবেদনশীলতা অনুযায়ী ওজন দিয়ে যোগ করে:
প্রতিটি চ্যানেল c (০ থেকে ১ স্কেলে) লিনিয়ারাইজ হয় এভাবে:
যদি c <= 0.04045 হয়, c_lin = c / 12.92; নাহলে
c_lin = ((c + 0.055) / 1.055) ** 2.4। তারপর:
$$L = 0.2126 \cdot R_{lin} + 0.7152 \cdot G_{lin} + 0.0722 \cdot B_{lin}$$
দুটি রঙের কনট্রাস্ট-রেশিও তখন গণনা হয় উজ্জ্বলতর লুমিনেন্স L1 ও গাঢ়তর লুমিনেন্স L2
দিয়ে:
$$\text{contrast} = \frac{L1 + 0.05}{L2 + 0.05}$$
সাধারণ টেক্সটের জন্য WCAG AA মানদণ্ড হলো এই রেশিও অন্তত ৪.৫:১ হতে হবে (AAA মানদণ্ড আরও কড়া — ৭:১)। নিচের কোড সেলে এই ঠিক একই ফর্মুলা প্রয়োগ করা হয়েছে বাস্তব রঙ-জোড়ায়।
def linearize(channel_255):
c = channel_255 / 255
if c <= 0.04045:
return c / 12.92
return ((c + 0.055) / 1.055) ** 2.4
def relative_luminance(rgb):
r, g, b = rgb
R, G, B = linearize(r), linearize(g), linearize(b)
return 0.2126 * R + 0.7152 * G + 0.0722 * B
def contrast_ratio(rgb1, rgb2):
L1 = relative_luminance(rgb1)
L2 = relative_luminance(rgb2)
lighter = max(L1, L2)
darker = min(L1, L2)
return (lighter + 0.05) / (darker + 0.05)
AA_NORMAL_TEXT = 4.5
pairs = [
("কালো টেক্সট / সাদা ব্যাকগ্রাউন্ড", (0, 0, 0), (255, 255, 255)),
("গাঢ় ধূসর টেক্সট #595959 / সাদা ব্যাকগ্রাউন্ড", (89, 89, 89), (255, 255, 255)),
("হালকা ধূসর টেক্সট #999999 / সাদা ব্যাকগ্রাউন্ড", (153, 153, 153), (255, 255, 255)),
("সাদা টেক্সট / নীল বাটন #2563EB", (255, 255, 255), (37, 99, 235)),
("হলুদ টেক্সট #FFD400 / সাদা ব্যাকগ্রাউন্ড", (255, 212, 0), (255, 255, 255)),
]
for label, fg, bg in pairs:
ratio = contrast_ratio(fg, bg)
passes = ratio >= AA_NORMAL_TEXT
print(f"{label}: contrast = {ratio:.2f}:1 -> AA (4.5:1) {'PASS' if passes else 'FAIL'}")
৩ · কনট্রাস্টের বাইরেও — কীবোর্ড ও মোশন
রঙ-কনট্রাস্ট একটি পরিমাপযোগ্য, স্পষ্ট নিয়ম বলে এটি প্রায়ই সবচেয়ে বেশি আলোচিত হয় — কিন্তু AI ইন্টারফেসে আরও দুটি বিষয় সমান গুরুত্বপূর্ণ। প্রথমত, প্রতিটি AI-চালিত অ্যাকশন (সাজেশন গ্রহণ, ব্যাখ্যা সম্প্রসারণ, ওভাররাইড — L23) শুধু মাউস/টাচ নয়, কীবোর্ড দিয়েও সম্পূর্ণভাবে করা যেতে হবে। দ্বিতীয়ত, AI-জেনারেটেড কনটেন্ট প্রায়ই অ্যানিমেশন দিয়ে "টাইপ হচ্ছে" এফেক্ট দেখায় — এটি মোশন-সংবেদনশীল ব্যবহারকারীর জন্য বন্ধ করার অপশন থাকা উচিত।
অ্যাক্সেসিবিলিটি একটি "পরে যোগ করার" ফিচার নয় — এটি একটি পরিমাপযোগ্য মানদণ্ড, যেমন উপরের কনট্রাস্ট-রেশিও ফর্মুলা দেখায়। AI ইন্টারফেসে এই একই কঠোরতা কনফিডেন্স-স্কোর, ব্যাখ্যা ও নিয়ন্ত্রণ-উপাদানেও প্রয়োগ করতে হবে — শুধু স্ট্যাটিক টেক্সটে নয়। পরবর্তী পাঠে (L31) দেখা যাবে কীভাবে বৈচিত্র্যময় ব্যবহারকারীদের সরাসরি ডিজাইন-প্রক্রিয়ায় যুক্ত করে এই সমস্যাগুলো আগেভাগে ধরা যায়।
ভাবনার প্রশ্ন
প্রতিটি প্রশ্ন নিজে কিছুক্ষণ ভাবুন — তারপর "→ উত্তর" চাপুন।
প্র ০১ হালকা ধূসর টেক্সট (#999999) দেখতে "পড়া যাচ্ছে" মনে হলেও কেন এটি WCAG AA ফেইল করে?
চোখ পরিস্থিতি অনুযায়ী মানিয়ে নেয় (adaptive), তাই একটি ভালো স্ক্রিনে ভালো আলোতে হালকা কনট্রাস্টও পড়া "সম্ভব" মনে হতে পারে। কিন্তু WCAG-এর মানদণ্ড সেট করা হয়েছে বৈচিত্র্যময় পরিস্থিতির জন্য — কম-দৃষ্টিশক্তি সম্পন্ন ব্যবহারকারী, রোদে থাকা স্ক্রিন, বা সস্তা মনিটর। ২.৮৫:১ রেশিও এসব পরিস্থিতিতে অনেকের জন্য পড়া কঠিন করে তোলে, যদিও ডিজাইনারের নিজের স্ক্রিনে এটি "ঠিকঠাক" মনে হতে পারে।
প্র ০২ AI-জেনারেটেড কনফিডেন্স স্কোর যদি শুধু লাল/হলুদ/সবুজ রঙ দিয়ে দেখানো হয় (কোনো টেক্সট ছাড়া), এটি কেন একটি অ্যাক্সেসিবিলিটি সমস্যা?
এটি WCAG-এর একটি মূল নীতি লঙ্ঘন করে: "শুধু রঙের উপর নির্ভর করে তথ্য জানানো যাবে না।" রঙ-অন্ধ (color blind) ব্যবহারকারী লাল ও সবুজের মধ্যে পার্থক্য নাও করতে পারেন, স্ক্রিন-রিডার ব্যবহারকারী রঙ একেবারেই "দেখেন" না। সমাধান হলো রঙের পাশাপাশি টেক্সট লেবেল ("উচ্চ কনফিডেন্স") ও/অথবা আইকন (✓/⚠) যোগ করা, যাতে তথ্যটি একাধিক চ্যানেলে পাওয়া যায়।
প্র ০৩ AI ইন্টারফেসে "টাইপ হচ্ছে" এনিমেশন এফেক্ট কেন কিছু ব্যবহারকারীর জন্য সমস্যা তৈরি করতে পারে?
স্ক্রিন-রিডার সফটওয়্যার প্রায়ই টেক্সট ধীরে ধীরে পরিবর্তিত হওয়ার সময় বারবার পুরো লাইন পুনরায় পড়ার চেষ্টা করতে পারে, যা বিভ্রান্তিকর ও ধীরগতির অভিজ্ঞতা তৈরি করে। এছাড়া কিছু ব্যবহারকারীর ভেস্টিবুলার (vestibular) সংবেদনশীলতা থাকে, যেখানে ক্রমাগত নড়াচড়াকারী কনটেন্ট শারীরিক অস্বস্তি সৃষ্টি করে। তাই এনিমেশন সম্পূর্ণ বন্ধ করার বা তাৎক্ষণিকভাবে সম্পূর্ণ টেক্সট দেখানোর অপশন থাকা উচিত।
অনুশীলন
-
চিন্তা করুন: যদি
AA_NORMAL_TEXT-এর বদলে AAA মানদণ্ড (7.0) দিয়ে উপরের ৫টি জোড়া যাচাই করা হয়, ৫টির মধ্যে কয়টি পাস করবে বলে আপনার ধারণা?যেহেতু কালো/সাদা (২১.০০) ও গাঢ় ধূসর/সাদা (৭.০০) দুটোই ইতিমধ্যে ৭.০-এর সমান বা বেশি, বাকি তিনটি (২.৮৫, ৫.১৭, ১.৪৩) সবই ৭.০-এর নিচে — তাই অনুমান করা যায় মাত্র ২টি পাস করবে।
-
পরীক্ষা করুন: উপরের কোড সেলে
AA_NORMAL_TEXT = 4.5লাইনটিAA_NORMAL_TEXT = 7.0-এ পরিবর্তন করে Run চেপে আপনার অনুমান যাচাই করুন।থ্রেশহোল্ড ৭.০-এ পরিবর্তন করার পর ফলাফল: কালো/সাদা (২১.০০) পাস, গাঢ় ধূসর/সাদা (৭.০০) ঠিক পাস (কারণ
>=ব্যবহার হয়েছে), আর বাকি তিনটি — হালকা ধূসর (২.৮৫), নীল বাটন (৫.১৭), হলুদ (১.৪৩) — সবই ফেইল করে। ফলাফল ঠিক অনুমান অনুযায়ী: ৫টির মধ্যে ২টি পাস করে, অর্থাৎ AA-তে যেটি পাস করেছিল (নীল বাটনের ৫.১৭:১) সেটিও AAA-তে ফেইল করে যায়।
আরও পড়ুন · ABCL TECH-এ আপনার পরবর্তী পদক্ষেপ
- কোর্সের সম্পূর্ণ সিলেবাস দেখুন ৫৭টি পাঠ ব্যবহারকারী ও প্রেক্ষাপট, ট্রাস্ট ক্যালিব্রেশন, এক্সপ্লেইনেবিলিটি, হিউম্যান-ইন-দ্য-লুপ ডিজাইন, কগনিটিভ লোড, অ্যাক্সেসিবিলিটি, হিউম্যান-AI টিমিং, ইউজেবিলিটি ইভালুয়েশন, ইন্ডাস্ট্রি ফ্রেমওয়ার্ক ও ক্যাপস্টোন।
- AI Ethics কোর্স সহোদর কোর্স ফেয়ারনেস মেট্রিক্স, বায়াস পরিমাপ, প্রাইভেসি ও নিয়ন্ত্রণ-বিধির গভীর কভারেজ — এই পাঠের ডিজাইন-দৃষ্টিকোণের পরিপূরক।
- সব Courses দেখুন ABCL TECH C, C++, Python, Java, JavaScript, DSA, Machine Learning, Deep Learning, System Design, Cybersecurity, Cloud Computing & DevOps, এবং আরও অনেক কোর্স — সব এক জায়গায়।