অ্যাক্সেসিবিলিটির ভিত্তি — WCAG ও ডিজেবিলিটি ক্যাটাগরি

১ · অ্যাক্সেসিবিলিটি কী এবং কেন এটি গুরুত্বপূর্ণ

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

M4-এ আমরা ইউজেবিলিটি নিয়ে বিস্তারিত আলোচনা করেছি — লার্নেবিলিটি, এফিসিয়েন্সি, এরর রেট ইত্যাদি। অ্যাক্সেসিবিলিটিকে এই একই ফ্রেমের একটি সম্প্রসারণ হিসেবে ভাবা যায়: একটি ইন্টারফেস "ইউজেবল" তখনই সত্যিকারভাবে বলা যায় যখন এটি বিভিন্ন ক্ষমতার ব্যবহারকারীদের জন্যও ইউজেবল। একটি বাটন যা মাউস-ব্যবহারকারীর জন্য নিখুঁত কিন্তু স্ক্রিন-রিডার ব্যবহারকারীর কাছে সম্পূর্ণ অদৃশ্য — সেটি অর্ধেক কাজ করা একটি ডিজাইন।

২ · WCAG-এর POUR স্ট্রাকচার

WCAG (Web Content Accessibility Guidelines) হলো W3C-এর তৈরি সবচেয়ে ব্যাপকভাবে গৃহীত অ্যাক্সেসিবিলিটি স্ট্যান্ডার্ড, এবং এটি চারটি মূল নীতির উপর গঠিত — সংক্ষেপে POUR:

প্রতিটি POUR নীতির অধীনে WCAG-এর নির্দিষ্ট সাকসেস ক্রাইটেরিয়া আছে, যেগুলো তিনটি কনফরম্যান্স লেভেলে ভাগ করা — A (সর্বনিম্ন, মৌলিক), AA (বেশিরভাগ আইন ও অর্গানাইজেশনের বাস্তব লক্ষ্য — যেমন রঙের কনট্রাস্ট কমপক্ষে ৪.৫:১), এবং AAA (সর্বোচ্চ, সবসময় সব কনটেন্টে অর্জনযোগ্য নয় — যেমন কনট্রাস্ট কমপক্ষে ৭:১)। এই পাঠের কোড ডেমোতে আমরা ঠিক এই AA ও AAA কনট্রাস্ট থ্রেশহোল্ড দুটোই সত্যিকারের সূত্র দিয়ে যাচাই করব।

৩ · ইন্টারফেস ডিজাইনে প্রাসঙ্গিক প্রধান ডিজেবিলিটি ক্যাটাগরি

অ্যাক্সেসিবল ডিজাইনের জন্য বোঝা দরকার বিভিন্ন ধরনের ডিজেবিলিটি ইন্টারফেসের সাথে কীভাবে ভিন্নভাবে মিথস্ক্রিয়া করে। চারটি বিস্তৃত ক্যাটাগরি বিশেষভাবে প্রাসঙ্গিক:

গুরুত্বপূর্ণ একটি বিষয় — এই ক্যাটাগরিগুলো একে অপরের সাথে ওভারল্যাপ করতে পারে, এবং একজন ব্যক্তির একাধিক ধরনের ডিজেবিলিটি থাকতে পারে। এছাড়া, একই ডিজেবিলিটি-ক্যাটাগরির মধ্যেও তীব্রতা ও ধরনে বিশাল বৈচিত্র্য থাকে — তাই "ভিজ্যুয়াল ডিজেবিলিটি" মানেই শুধু "সম্পূর্ণ অন্ধ ব্যবহারকারী" নয়। L45-এ আমরা দেখব কীভাবে স্থায়ী (permanent), সাময়িক (temporary), ও পরিস্থিতিগত (situational) অ্যাক্সেস-চ্যালেঞ্জ — যেমন একটি ভাঙা হাত, একটি কোলাহলপূর্ণ পরিবেশ, বা রোদে ছোট ফোন স্ক্রিন — একই ডিজাইন সমাধান থেকে উপকৃত হয়।

৪ · একটি সত্যিকারের ডেমো — WCAG কনট্রাস্ট-রেশিও গণনা

WCAG-এর কনট্রাস্ট-রেশিও সূত্র শুরু হয় প্রতিটি রঙের রিলেটিভ লুমিনেন্স গণনা দিয়ে। প্রতিটি RGB চ্যানেল (0–255 রেঞ্জ থেকে 0–1 রেঞ্জে নরমালাইজ করার পর) প্রথমে লিনিয়ারাইজ করতে হয়:

$$c_{\text{lin}} = \begin{cases} c / 12.92 & \text{if } c \le 0.03928 \\ \left(\dfrac{c + 0.055}{1.055}\right)^{2.4} & \text{otherwise} \end{cases}$$

তারপর রিলেটিভ লুমিনেন্স ($L$) হলো এই লিনিয়ারাইজড চ্যানেলগুলোর ওজনযুক্ত যোগফল:

$$L = 0.2126 \cdot R + 0.7152 \cdot G + 0.0722 \cdot B$$

এবং দুটো রঙের মধ্যে কনট্রাস্ট রেশিও (যেখানে $L_1$ উজ্জ্বলতর রঙের লুমিনেন্স):

$$\text{Contrast} = \frac{L_1 + 0.05}{L_2 + 0.05}$$

নিচের কোড সেলে এই সূত্র দিয়ে ছয়টি ভিন্ন টেক্সট/ব্যাকগ্রাউন্ড রঙের জোড়া গণনা করে AA (৪.৫:১) ও AAA (৭:১) — নরমাল টেক্সটের জন্য দুটো থ্রেশহোল্ডের বিপরীতেই সত্যিকারের পাস/ফেল যাচাই করা হয়েছে।

def linearize(c):
    c = c / 255
    if c <= 0.03928:
        return c / 12.92
    return ((c + 0.055) / 1.055) ** 2.4

def relative_luminance(r, g, b):
    R = linearize(r)
    G = linearize(g)
    B = 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, darker = max(L1, L2), min(L1, L2)
    return (lighter + 0.05) / (darker + 0.05)

AA, AAA = 4.5, 7.0  # WCAG-এর নরমাল-টেক্সট থ্রেশহোল্ড

pairs = [
    ("কালো / সাদা BG",              (0, 0, 0),       (255, 255, 255)),
    ("নেভি #0F172A / সাদা BG",      (15, 23, 42),    (255, 255, 255)),
    ("ধূসর #767676 / সাদা BG",      (118, 118, 118), (255, 255, 255)),
    ("হালকা ধূসর #AAAAAA / সাদা BG", (170, 170, 170), (255, 255, 255)),
    ("নীল #2563EB / সাদা BG",       (37, 99, 235),   (255, 255, 255)),
    ("হলুদ #FFD400 / সাদা BG",       (255, 212, 0),   (255, 255, 255)),
]

for name, fg, bg in pairs:
    ratio = contrast_ratio(fg, bg)
    aa = "PASS" if ratio >= AA else "FAIL"
    aaa = "PASS" if ratio >= AAA else "FAIL"
    print(f"{name:24s} ratio={ratio:5.2f}:1   AA={aa:4s}   AAA={aaa:4s}")