অ্যাক্সেসিবল CSS — focus, contrast, reduced motion আর বড় লেখা

১ · অ্যাক্সেসিবিলিটির অর্ধেক কাজ CSS-এর

পর্ব ১২-এ (অ্যাক্সেসিবিলিটি — সবার জন্য ওয়েব, screen reader আর ARIA-র সঠিক ব্যবহার) আপনি দেখেছেন, সঠিক HTML দিলে screen reader বুঝতে পারে কোনটি বোতাম, কোনটি heading, কোন ঘরের নাম কী। সেসব এখানে আবার বলব না। এই পর্বের প্রশ্ন: সঠিক HTML-কে CSS দিয়ে সাজাতে গিয়ে আমরা কীভাবে তাকে অব্যবহারযোগ্য করে ফেলি — আর কীভাবে আরও বেশি মানুষের ব্যবহারযোগ্য করি।

একটি দৃশ্য ভাবুন। নাসরিন আপা ষাটোর্ধ্ব, চশমা পরেন, ফোনের লেখা বড় করে রাখেন। তিনি একটি অনলাইন দোকানে ওষুধ অর্ডার করছেন। দাম লেখা হালকা ধূসরে — পড়তে কষ্ট। “অর্ডার করুন” বোতামটি দেখতে সুন্দর, কিন্তু লেখা বড় করায় বোতামের লেখা কেটে গেছে। পাশে রঙিন ব্যানার একটানা নড়ছে, তাঁর মাথা ঝিমঝিম করছে। আর তাঁর ছেলে, যে কবজির ব্যথার জন্য মাউস নয় কি-বোর্ড ব্যবহার করে, Tab চেপে কোথায় আছে বুঝতেই পারছে না, কারণ ডিজাইনার focus-এর দাগ মুছে দিয়েছেন। HTML-এ একটিও ভুল নেই — সব ভুল CSS-এ।

পর্ব ১২-এ দেখা WCAG 2.2-এর বহু success criterion সরাসরি CSS-এর হাতে। নিচের টেবিলটি এই পর্বের মানচিত্র — প্রতিটি সারি সামনের কোনো না কোনো অংশে বিস্তারিত আসবে:

২ · রঙের contrast — ৪.৫:১, ৩:১ আর শুধু রঙে অর্থ নয়

“হালকা ধূসর লেখা দেখতে মার্জিত” — এই ধারণা ওয়েবের সবচেয়ে প্রচলিত অ্যাক্সেসিবিলিটি ভুলের জন্ম দেয়। Contrast ratio হলো লেখা আর পটভূমির আপেক্ষিক উজ্জ্বলতার অনুপাত — ১:১ (একই রং, অদৃশ্য) থেকে ২১:১ (কালোয় সাদা) পর্যন্ত। পর্ব ২০-এ এর পরিচয় পেয়েছেন; এখানে দেখব WCAG ঠিক কী চায়:

বড় লেখার সীমা WCAG-এ লেখা আছে point-এ — ১৮pt আর ১৪pt বোল্ড, যা CSS-এ মোটামুটি 24px আর 18.66px. নিচের এডিটরে একই সাদা পটভূমিতে কয়েকটি ধূসর আর একটি ইনপুটের সীমানা আছে; প্রতিটির পাশে মাপা ratio লেখা:

body { font-family: sans-serif; background: #ffffff; }
.a   { color: #959595; }   /* সাধারণ লেখায় ফেল */
.b   { color: #767676; }   /* AA-র একেবারে সীমায় */
.c   { color: #595959; }   /* AAA পাস */
.big { color: #949494; font-size: 24px; }  /* বড় লেখা: ৩:১ যথেষ্ট */
input { font: inherit; padding: 6px 8px; border-radius: 6px; width: 16em; }
.f1  { border: 1px solid #d4d4d8; }  /* ঘরের সীমানা প্রায় অদৃশ্য */
.f2  { border: 1px solid #8a8a8a; }  /* ৩:১ পার — ঘরটি চেনা যায় */

ratio আসে কোথা থেকে — ধাপে ধাপে

চোখ সব রঙের উজ্জ্বলতা সমানভাবে টের পায় না — সবুজ আমাদের কাছে সবচেয়ে উজ্জ্বল, নীল সবচেয়ে কম। তাই WCAG প্রথমে প্রতিটি রঙের relative luminance বের করে, তারপর দুটি মিলিয়ে ratio. #767676 সাদায় কেন ঠিক ৪.৫৪:১, দেখুন:

এই সূত্র একবার বুঝলে নিজেই একটি ছোট contrast checker লেখা যায়। নিচের কোডটি কয়েক জোড়া রং মেপে বলে দেয় কোনটি কোন কাজে চলবে — লেখা, বড় লেখা, না শুধু UI-এর সীমানা:

function lum(hex) {                       // WCAG relative luminance
  const [r, g, b] = hex.match(/\w\w/g).map(h => parseInt(h, 16) / 255)
    .map(c => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}
function ratio(a, b) {
  const [hi, lo] = [lum(a), lum(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
}
const pairs = [
  ['ধূসর লেখা',            '#767676', '#ffffff'],
  ['সবুজ বোতামে সাদা লেখা', '#ffffff', '#16a34a'],
  ['ফিকে ঘরের সীমানা',      '#d4d4d8', '#ffffff'],
  ['নীল লিংক বনাম গাঢ় লেখা', '#1d4ed8', '#1f2937'],
  ['গাঢ় পটভূমিতে নীল focus', '#1d4ed8', '#111827'],
];
for (const [label, fg, bg] of pairs) {
  const r = ratio(fg, bg);
  const v = r >= 4.5 ? 'সব লেখায় AA' : r >= 3 ? 'শুধু বড় লেখা/UI' : 'ফেল';
  console.log(label + ': ' + r.toFixed(2) + ':1 → ' + v);
}

শুধু রঙে অর্থ নয় — 1.4.1

প্রতি বারোজন পুরুষের মধ্যে মোটামুটি একজনের কোনো না কোনো ধরনের বর্ণান্ধতা (color vision deficiency) আছে — সবচেয়ে সাধারণ লাল-সবুজ গুলিয়ে ফেলা। তাই WCAG-এর use of color শর্ত বলে: রং যেন একমাত্র সংকেত না হয়। রং থাকুক, কিন্তু সাথে আকার, লেখা, আইকন বা দাগ:

<style>
  body { font-family: sans-serif; color: #1f2937; }
  a { color: #1d4ed8; }
  .bad a  { text-decoration: none; }
  .good a { text-underline-offset: 3px; }
  input { font: inherit; padding: 6px; border: 2px solid #8a8a8a; border-radius: 6px; }
  .bad input  { border-color: #dc2626; }
  .good input { border-color: #b91c1c; border-width: 3px; }
  .msg { color: #b91c1c; margin: 4px 0 0; }
</style>
<div class="bad">
  <p>ফেরতের নিয়ম জানতে <a href="#rules">এখানে দেখুন</a>, তারপর অর্ডার দিন।</p>
  <label>মোবাইল নম্বর <input value="01712"></label>
</div>
<hr>
<div class="good">
  <p>ফেরতের নিয়ম জানতে <a href="#rules">এখানে দেখুন</a>, তারপর অর্ডার দিন।</p>
  <label>মোবাইল নম্বর <input value="01712" aria-invalid="true" aria-describedby="m"></label>
  <p class="msg" id="m">⚠ ভুল: ১১ অঙ্কের নম্বর দিন</p>
</div>

WCAG-এর একটি স্বীকৃত বিকল্পও আছে: লিংকের রং পাশের লেখার সাথে অন্তত ৩:১ পার্থক্যে থাকলে, আর hover ও focus-এ বাড়তি সংকেত দেখালে, underline ছাড়াও চলে। কিন্তু checker-এ দেখেছেন, সাধারণ নীল আর গাঢ় লেখার পার্থক্য মাত্র ২.১৯:১। তাই লেখার ভেতরের লিংকে underline রাখাই নিরাপদ; মেনুর মতো জায়গায়, যেখানে অবস্থান দেখেই লিংক চেনা যায়, সেখানে না থাকলেও চলে।

৩ · Focus — কি-বোর্ড ব্যবহারকারীর কার্সর

মাউস ব্যবহারকারী দেখেন তীর কোথায়। কি-বোর্ড ব্যবহারকারীর কাছে সেই তীরের কাজ করে focus-এর দাগ — কোন লিংক বা বোতাম এই মুহূর্তে Enter চাপলে কাজ করবে। পর্ব ১২-এ দেখেছেন Tab কোন ক্রমে চলে; এখানে প্রশ্ন হলো সেই অবস্থানটি দেখা যায় কি না। WCAG 2.4.7 (AA) এটুকুই চায়: কি-বোর্ডে চালানো যায় এমন প্রতিটি জিনিসে focus দৃশ্যমান হবে।

সেই বিরক্তির সমাধান হলো পর্ব ৩৪-এ দেখা :focus-visible. :focus সত্য হয় যেকোনোভাবে focus এলে; :focus-visible সত্য হয় শুধু তখন, যখন ব্রাউজারের মনে হয় ব্যবহারকারীর দাগটি দেখা দরকার। ব্রাউজার কীভাবে সেই সিদ্ধান্ত নেয়, ধাপে ধাপে দেখুন:

ভালো focus-এর নকশা — outline, outline-offset আর দুই রঙের দাগ

focus-এর দাগের জন্য সবচেয়ে নির্ভরযোগ্য হাতিয়ার outline: এটি জায়গা নেয় না, তাই লেআউট নড়ে না; আর আধুনিক ব্রাউজারে এটি border-radius-এর বাঁক মেনে চলে। outline-offset দাগটিকে বাক্স থেকে একটু দূরে সরায়, ফলে বোতামের নিজের রঙের সাথে মিশে যায় না। নিচের প্রিভিউর সাদা অংশে একবার ক্লিক করুন, তারপর Tab চেপে চেপে এগোন:

body { font-family: sans-serif; }
button { font: inherit; padding: 8px 14px; margin: 4px;
         border: 1px solid #8a8a8a; border-radius: 8px; background: #f8fafc; }
.dark { background: #111827; padding: 12px; border-radius: 8px; }

.b2:focus { outline: none; }          /* ভুল — দাগ উধাও */

.b3:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }

/* ভেতরে গাঢ় outline, বাইরে সাদা ছায়া — যেকোনো পটভূমিতে চোখে পড়ে */
.b4:focus-visible { outline: 3px solid #111827; outline-offset: 2px;
                    box-shadow: 0 0 0 7px #ffffff; }

শুধু box-shadow দিয়ে দাগ আঁকলে কী সমস্যা? অংশ ৫-এ দেখবেন, Windows-এর contrast theme চালু থাকলে ব্রাউজার সব box-shadow মুছে দেয় — ছায়ায় আঁকা focus তখন অদৃশ্য। নিয়ম তাই: মূল দাগ outline-এ, ছায়া শুধু বাড়তি সাজ। একান্তই ছায়া দিতে চাইলে সাথে outline: 2px solid transparent রাখুন — সাধারণ অবস্থায় স্বচ্ছ, কিন্তু forced colors-এ ব্রাউজার একে দৃশ্যমান রং দেয়।

WCAG 2.2-এ AAA স্তরে একটি নতুন শর্ত এসেছে — 2.4.13 Focus Appearance. মোটামুটি বললে: দাগের ক্ষেত্রফল অন্তত বাক্সের চারপাশে 2 CSS px পুরু একটি রেখার সমান, আর focus থাকা ও না-থাকা অবস্থার রঙে অন্তত ৩:১ পার্থক্য। AAA বাধ্যতামূলক না হলেও ভালো মাপকাঠি — অন্তত 2px পুরু, স্পষ্ট রঙের outline দিলে সাধারণত সহজেই মেলে।

sticky header-এর নিচে হারানো focus — 2.4.11

পর্ব ২৪-এর sticky header কাজের, কিন্তু একটি ফাঁদও। Shift+Tab চেপে ওপরে উঠলে ব্রাউজার focus পাওয়া লিংকটিকে স্ক্রল করে একেবারে ওপরের কিনারায় আনে — ঠিক যেখানে header বসে আছে। লিংক focus পেল, কিন্তু চোখে পড়ল না। WCAG 2.2-এর 2.4.11 Focus Not Obscured (Minimum, AA) বলে, focus পাওয়া জিনিস লেখকের বানানো কোনো কিছুর নিচে পুরোপুরি ঢাকা পড়বে না (AAA স্তরের 2.4.12 বলে, একটুও না)। নিচে একটি ছোট “পাতা” আছে, যার নিজের স্ক্রল আছে:

<style>
  .page { height: 210px; overflow: auto; border: 1px solid #8a8a8a;
          font-family: sans-serif; scroll-padding-top: 0; }
  .page header { position: sticky; top: 0; padding: 12px;
                 background: #0f766e; color: #fff; }
  .page header a { color: #fff; }
  .page p { margin: 0; padding: 10px 12px; border-bottom: 1px solid #e5e7eb; }
  .page a:focus-visible, .page p:target { outline: 3px solid #b45309; outline-offset: -3px; }
</style>
<div class="page">
  <header>রহিম স্টোর · <a href="#p7">৭ নম্বর পণ্যে যান</a></header>
  <p id="p1"><a href="#p1">১ · মিনিকেট চাল</a></p>  <p id="p2"><a href="#p2">২ · মসুর ডাল</a></p>
  <p id="p3"><a href="#p3">৩ · সয়াবিন তেল</a></p>   <p id="p4"><a href="#p4">৪ · আটা</a></p>
  <p id="p5"><a href="#p5">৫ · চিনি</a></p>          <p id="p6"><a href="#p6">৬ · লবণ</a></p>
  <p id="p7"><a href="#p7">৭ · খাঁটি মধু</a></p>     <p id="p8"><a href="#p8">৮ · গুঁড়া দুধ</a></p>
  <p id="p9"><a href="#p9">৯ · চা-পাতা</a></p>      <p id="p10"><a href="#p10">১০ · সুজি</a></p>
</div>

আসল পাতায় এই scroll-padding বসে html-এ: html { scroll-padding-top: 4rem; } — header-এর উচ্চতা জানা থাকলে সেটুকু, অথবা একটি CSS variable থেকে। WCAG-এর নিজস্ব কৌশল-তালিকাতেও (Technique C43) ঠিক এই পদ্ধতি আছে। cookie ব্যানার, নিচে আটকে থাকা “চ্যাট করুন” বোতাম বা মোবাইলের নিচের মেনুর জন্য একইভাবে scroll-padding-bottom. আর ব্যানার যদি অনেক জায়গা নেয়, ব্যবহারকারীকে বন্ধ করার সুযোগ দিন।

৪ · নড়াচড়া — prefers-reduced-motion আর “আগে স্থির” নীতি

পর্ব ৩৮–৪২-এ transition, animation, transform আর স্ক্রল ইফেক্ট শিখেছেন। এগুলো পাতাকে প্রাণবন্ত করে — কিন্তু সবার জন্য নয়। ভেতরের কানের ভারসাম্য-ব্যবস্থার সমস্যা, অর্থাৎ vestibular disorder থাকলে, পর্দার বড় নড়াচড়া — বিশেষ করে জুম, ঘূর্ণন আর parallax (স্ক্রলের সময় পেছনের স্তর আলাদা গতিতে সরা) — মাথা ঘোরা, বমিভাব, মাইগ্রেন এমনকি কয়েক ঘণ্টার অসুস্থতা আনতে পারে। মনোযোগের সমস্যায় একটানা নড়া ব্যানার পড়াই কঠিন করে।

ব্যবহারকারীরা অপারেটিং সিস্টেমে এ জন্য একটি সেটিং চালু রাখেন — Windows-এ “Animation effects” বন্ধ, macOS ও iOS-এ “Reduce motion”, Android-এ “Remove animations”. ব্রাউজার সেটি prefers-reduced-motion media query দিয়ে CSS-কে জানায়; মান reduce অথবা no-preference. এটি Baseline Widely available. CSS লেখার দুটি দর্শন আছে:

body { font-family: sans-serif; }
.banner { padding: 10px; background: #fef3c7; border-radius: 8px; }
.card { margin: 12px 0; padding: 10px; border: 1px solid #8a8a8a; border-radius: 8px; }
button { font: inherit; padding: 8px 14px; border-radius: 8px; }

/* আগে স্থির: নড়াচড়া শুধু যাঁরা আপত্তি জানাননি তাঁদের জন্য */
@media (prefers-reduced-motion: no-preference) {
  .banner { animation: slide 1s ease-in-out 4 alternate; }
  .card   { animation: pop .7s ease-out both; }
  button:hover { transform: scale(1.06); transition: transform .2s; }
}
/* কম নড়াচড়া চাইলেও অর্থ থাকুক — জায়গা বদল নয়, শান্ত fade */
@media (prefers-reduced-motion: reduce) {
  .card { animation: fade .7s ease-out both; }
}
@keyframes slide { to { transform: translateX(40px); } }
@keyframes pop   { from { transform: scale(.5) translateY(40px); opacity: 0; } }
@keyframes fade  { from { opacity: 0; } }

“reduce” মানে “remove” নয়। অ্যানিমেশন প্রায়ই অর্থ বহন করে, তাই কম মোশন চাইলে জায়গা বদল, জুম, ঘূর্ণন আর parallax বাদ দিন, কিন্তু শান্ত fade বা ছোট রং-বদল রাখতে পারেন। অনেক reset-এ একটি “সব বন্ধ” নিয়ম দেখবেন:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

এটি জরুরি অবস্থার জাল হিসেবে কাজের — 0-এর বদলে 0.01ms রাখা হয় যাতে animationend-এর মতো ঘটনার ওপর নির্ভর করা JavaScript ভেঙে না যায়। কিন্তু এটি fade-এর মতো উপকারী সংকেতও মুছে দেয়, আর পর্ব ৪২-এর scroll-driven animation-এ ফল অপ্রত্যাশিত হতে পারে। তাই নতুন কাজে “আগে স্থির” নীতিই ভালো। আর scroll-behavior: smooth-ও media query-র ভেতরে রাখুন — দীর্ঘ মসৃণ স্ক্রল নিজেও একটি বড় নড়াচড়া।

৫ · prefers-contrast আর forced colors — ব্যবহারকারীর রং

কেউ কেউ শুধু বেশি contrast চান — ফিকে সীমানা আর হালকা ধূসর তাঁদের কাছে অদৃশ্য। macOS ও iOS-এ “Increase contrast”-এর মতো সেটিং চালু থাকলে prefers-contrast media query more হয় (মানগুলো no-preference, more, less, custom). এখানে আপনার কাজ সহজ: নিজের নকশাকে আরও স্পষ্ট করা।

@media (prefers-contrast: more) {
  :root { --text-muted: #374151; --border: #4b5563; }   /* ধূসর আরও গাঢ় */
  .card { border-width: 2px; }
  .glass { backdrop-filter: none; background: Canvas; }  /* ঝাপসা কাচ বাদ */
}

অন্যরা আরও এক ধাপ এগিয়ে নিজের রং-ই চাপিয়ে দেন। Windows-এ “Contrast themes” (আগের নাম High Contrast) চালু করলে ব্রাউজার forced colors mode-এ যায়, আর @media (forced-colors: active) সত্য হয়। কম দৃষ্টিশক্তি বা আলোর প্রতি তীব্র সংবেদনশীলতার কারণে অনেকে এটি ব্যবহার করেন। তখন ব্রাউজার কী করে:

• color, background-color, border-color, outline-color, SVG-র fill/stroke-এর মতো রঙের property-তে আপনার রং বাদ দিয়ে ব্যবহারকারীর থিমের অল্প কয়েকটি রং বসায়।
• box-shadow আর text-shadow পুরো মুছে দেয়; gradient-এর মতো তৈরি করা background-image-ও বাদ পড়ে (url() দিয়ে আনা আসল ছবি থাকে)।
• শুধু পটভূমির রঙে আলাদা করা বোতাম বা ছায়ায় আঁকা focus একাকার হয়ে যায়।

এই রংগুলো আসে নাম দেওয়া system color থেকে, যা পর্ব ৩৬-এ color-scheme-এর প্রসঙ্গে দেখেছেন। forced colors-এ এদের মান ব্যবহারকারীর থিম ঠিক করে। নিচের এডিটরে প্রধান system color-গুলো সাজানো আছে, আর দুটি বোতাম — একটির সীমানা ছায়ায়, অন্যটির border-এ:

:root { color-scheme: light; }        /* dark করে দেখুন */
body  { font-family: sans-serif; }
.sw { padding: 6px 10px; margin: 4px 0; border: 1px solid CanvasText; }
.c1 { background: Canvas;     color: CanvasText; }
.c2 { background: Canvas;     color: LinkText; }
.c3 { background: ButtonFace; color: ButtonText; border-color: ButtonBorder; }
.c4 { background: Field;      color: FieldText; }
.c5 { background: Highlight;  color: HighlightText; }
.c6 { background: Canvas;     color: GrayText; }
button { font: inherit; padding: 8px 14px; border-radius: 8px; background: #dbeafe; }
.shadow { border: 0; box-shadow: 0 0 0 2px #2563eb; }      /* forced colors-এ উধাও */
.real   { border: 2px solid #2563eb; }                     /* forced colors-এ থাকে */

@media (forced-colors: active) {
  .shadow { border: 2px solid ButtonBorder; }   /* সাহায্য: আসল সীমানা যোগ */
}

forced colors-এ ভালো নাগরিক হওয়ার কয়েকটি নিয়ম:

1. সীমানা border বা outline-এ রাখুন, শুধু পটভূমির রঙে বা ছায়ায় নয়। নকশায় border না চাইলে border: 1px solid transparent দিন — সাধারণ অবস্থায় অদৃশ্য, forced colors-এ দৃশ্যমান।
2. রং দরকার হলে system color — CanvasText, LinkText, Highlight, ButtonBorder, GrayText. নিজের hex নয়।
3. SVG আইকনে currentColor (পর্ব ৪৪) — তাহলে আইকন লেখার রং মেনে নিজেই বদলায়।
4. forced-color-adjust: none শুধু বিরল ক্ষেত্রে — যেমন রঙের নমুনা দেখানোর ঘর (কাপড়ের দোকানে “লাল শাড়ি”-র রঙের বৃত্ত), যেখানে রংটাই তথ্য।

forced-colors media query প্রধান ব্রাউজারগুলো চেনে; বাস্তবে forced colors মোড চালু হয় মূলত Windows-এ, Chromium-ভিত্তিক ব্রাউজার আর Firefox-এ। পুরোনো -ms-high-contrast media query আজ শুধু ইতিহাস (প্র ০৪ দেখুন)।

৬ · বড় লেখা — rem, zoom, reflow আর text spacing

বয়স চল্লিশ পেরোলে প্রায় সবারই কাছের লেখা পড়তে কষ্ট হতে থাকে। তাই বিপুল সংখ্যক মানুষ লেখা বড় করে ওয়েব দেখেন — দুইভাবে: পুরো পাতা zoom (Ctrl++, যা সব কিছু বড় করে) আর ব্রাউজারের ডিফল্ট font size বদল (Chrome-এ Settings → Appearance → Font size, যা শুধু লেখার মূল মাপ বদলায়)।

ব্রাউজারের zoom আসলে একটি CSS px-কে বেশি ডিভাইস pixel দিয়ে আঁকে। ফল হলো, পাতার কাছে জানালা “ছোট” হয়ে যায় — আর আপনার media query সেই অনুযায়ী সাড়া দেয়। ধাপে ধাপে দেখুন:

Text spacing — 1.4.12-এর চাপ পরীক্ষা

ডিসলেক্সিয়া বা কম দৃষ্টিশক্তির অনেকে extension দিয়ে লাইন, অক্ষর আর শব্দের ফাঁক বাড়িয়ে পড়েন। WCAG 1.4.12 Text Spacing (AA) চায়, ব্যবহারকারী নিচের চারটি মান দিলেও কোনো লেখা কেটে, ঢেকে বা হারিয়ে যাবে না: line-height লেখার মাপের ১.৫ গুণ, অনুচ্ছেদের পরে ফাঁক ২ গুণ, letter-spacing ০.১২ গুণ, word-spacing ০.১৬ গুণ। এই মানগুলো বসানোর জনপ্রিয় টুল হলো Steve Faulkner-এর “text spacing bookmarklet”; নিচের এডিটরের শেষ চার লাইন সেই কাজটিই করছে:

body   { font-family: sans-serif; }
.cards { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.card  { width: 13rem; padding: .75rem; border: 1px solid #8a8a8a; border-radius: 8px; }
.card h4 { margin: 0 0 .4rem; }
.card p  { margin: 0 0 .5rem; }
button { font: inherit; padding: .4rem .8rem; }

.fixed { height: 150px; overflow: hidden; }   /* ভঙ্গুর */
.fluid { min-height: 9rem; }                  /* মজবুত */

/* WCAG 1.4.12 পরীক্ষা — text spacing bookmarklet-এর মান */
* { line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important; }
p { margin-bottom: 2em !important; }

বাংলা লেখার একটি বিশেষ কথা মনে রাখুন: বাংলায় মাত্রা আর ওপর-নিচের কার (যেমন ি, ু, ৃ) লাইনের উচ্চতা বেশি চায়, তাই পর্ব ২১-এ দেখেছেন বাংলায় line-height সাধারণত ১.৬–১.৮ রাখা ভালো। স্থির উচ্চতার বাক্সে বাংলা লেখা তাই ইংরেজির চেয়ে আগে কাটে।

৭ · আঙুল, মাউস আর hover — target size আর pointer-নির্ভর নকশা

পর্ব ৩০-এ touch target-এর কথা বলেছিলাম; WCAG 2.2 এখন এর একটি সংখ্যা দিয়েছে। 2.5.8 Target Size (Minimum, AA): ক্লিক বা চাপার জায়গা অন্তত 24×24 CSS px — অথবা ছোট হলে আশপাশে এতটা ফাঁক যে প্রতিটির কেন্দ্রে 24px ব্যাসের একটি বৃত্ত আঁকলে বৃত্তগুলো অন্য লক্ষ্যকে বা একে অপরকে ছোঁয় না। লেখার ভেতরের লিংক, ব্রাউজারের নিজের কন্ট্রোল, আর যেখানে মাপটাই অপরিহার্য (যেমন মানচিত্রের পিন), সেখানে ছাড় আছে। AAA স্তরে (2.5.5) মাপটি 44×44.

আরেকটি ফাঁদ hover. যে নকশা শুধু মাউস রাখলে কাজের বোতাম দেখায়, তা টাচস্ক্রিনে আর কি-বোর্ডে অদৃশ্য। পর্ব ৩১-এর hover / pointer media feature দিয়ে যন্ত্র চেনা যায়, কিন্তু নিরাপদ পথ হলো এমনভাবে লেখা যাতে hover শুধু একটি “বাড়তি সুবিধা” থাকে:

body { font-family: sans-serif; }
.pager a { outline: 1px dashed #f97316; margin-right: 2px; }
.tiny a  { font-size: 12px; padding: 0 2px; }
.ok a    { display: inline-grid; place-items: center;
           min-width: 24px; min-height: 24px; padding: 4px 8px; }

.orders li { padding: 8px; border-bottom: 1px solid #e5e7eb; }
/* ভুল: বোতাম শুধু মাউস রাখলে দেখা যায় */
.actions { opacity: 0; }
.orders li:hover .actions { opacity: 1; }

/* ঠিক: কি-বোর্ডে ভেতরে focus এলে, আর hover-হীন যন্ত্রে সবসময় */
.orders li:focus-within .actions { opacity: 1; }
@media (hover: none) { .actions { opacity: 1; } }

hover-এ যা আসে — tooltip, ড্রপডাউন মেনু, ছোট পপআপ — তার জন্য আছে 1.4.13 Content on Hover or Focus (AA): (ক) বন্ধ করা যায় — মাউস না সরিয়েই Esc চাপলে চলে যায়; (খ) ধরা যায় — মাউস tooltip-এর ওপর নিলেও সেটি হারায় না; (গ) থাকে — ব্যবহারকারী সরিয়ে না দেওয়া পর্যন্ত নিজে থেকে মিলিয়ে যায় না। শুধু CSS-এর :hover দিয়ে বানানো tooltip প্রায়ই (ক) পূরণ করে না; পর্ব ১১-এর popover বা ছোট JavaScript লাগে।

৮ · লুকানো, ক্রম আর প্রিন্ট — চেনা নিয়ম, নতুন চোখে

পর্ব ২৩-এ লুকানোর ছয় উপায় দেখেছেন। অ্যাক্সেসিবিলিটির চোখে সংক্ষেপে আবার দেখি, কারণ ভুল উপায়ে লুকানো সবচেয়ে নীরব বাগগুলোর একটি:

শেষ সারিটি অংশ ৭-এর “বাতিল” বোতামে দেখেছেন — opacity: 0-এ বোতাম অদৃশ্য কিন্তু Tab-এ আসে। স্ক্রিনের বাইরে সরানো বন্ধ মেনুর লিংকও তাই Tab-এ ধরা দেয় — বন্ধ মেনু display: none বা visibility: hidden দিয়ে লুকান।

চোখের ক্রম বনাম পড়ার ক্রম

পর্ব ২৫–২৮-এ order, flex-direction: row-reverse, grid-এর জায়গা বদল আর grid-auto-flow: dense দেখেছেন। এগুলো শুধু চোখের ক্রম বদলায়; screen reader আর Tab চলে HTML-এর ক্রমে। ফলে visual order আর DOM-এর ক্রম আলাদা হলে কি-বোর্ড ব্যবহারকারী পাতায় এলোমেলো লাফ দেন — WCAG 1.3.2 আর 2.4.3-এর লঙ্ঘন। নিয়মটি সহজ: অর্থের ক্রম HTML-এ ঠিক করুন, CSS-এ নয়।

এই সমস্যার CSS-সমাধান হিসেবে নতুন reading-flow property প্রস্তাবিত হয়েছে — যেমন reading-flow: grid-rows লিখলে focus আর screen reader grid-এর চোখের সারি মেনে চলবে। এটি এখন শুধু Chromium-ভিত্তিক ব্রাউজারের নতুন সংস্করণে আছে, not yet Baseline — অন্য ব্রাউজারে কোনো প্রভাব নেই। তাই একে বাড়তি সুরক্ষা ভাবুন, HTML-এর ক্রম ঠিক করার বিকল্প নয়।

প্রিন্টেও অ্যাক্সেসিবিলিটি

রশিদ, টিকিট, ভর্তির ফর্ম, রেসিপি — এখনো অনেকে ওয়েবপেজ প্রিন্ট করেন, আর কাগজে hover নেই, লিংকে ক্লিক নেই, রঙিন প্রিন্টারও সবার নেই। পর্ব ৩১-এর print stylesheet-এ অ্যাক্সেসিবিলিটির চোখে কয়েকটি কাজ:

@media print {
  nav, .ads, .chat-button, video { display: none; }       /* কাগজে অপ্রয়োজনীয় */
  body { color: #000; background: #fff; font-size: 12pt; line-height: 1.5; }
  a[href^="http"]::after { content: " (" attr(href) ")"; }  /* লিংকের ঠিকানা লেখা */
  .status-paid::before { content: "✔ পরিশোধিত — "; }        /* রঙের অর্থ লেখায় */
  h2, h3 { break-after: avoid; }   table, figure { break-inside: avoid; }
}

সাদা-কালো প্রিন্টে সবুজ “পরিশোধিত” আর লাল “বাকি” একই ধূসর হয়ে যায় — অংশ ২-এর 1.4.1 কাগজেও খাটে। আর পটভূমির রং ডিফল্টভাবে প্রিন্ট হয় না, তাই প্রিন্টে লেখা গাঢ় রাখুন।

৯ · পরীক্ষা — DevTools, Lighthouse আর নিজের কি-বোর্ড

অ্যাক্সেসিবল CSS লেখা অর্ধেক কাজ; বাকি অর্ধেক হলো যাচাই। এর জন্য সেটিং বদলে ঘুরে বেড়ানোর দরকার নেই — DevTools প্রায় সব অবস্থা অনুকরণ করতে পারে:

1. Rendering প্যানেল (Chrome বা Edge-এ F12, তারপর Ctrl+Shift+P চেপে “Show Rendering”): Emulate CSS media feature থেকে prefers-reduced-motion: reduce, prefers-contrast: more, forced-colors: active, prefers-color-scheme — প্রতিটি আলাদা করে চালু করে পাতা দেখুন।
2. দৃষ্টির সীমাবদ্ধতার অনুকরণ: একই প্যানেলে Emulate vision deficiencies — ঝাপসা দৃষ্টি, কম contrast-এর দৃষ্টি, লাল-সবুজ ও নীল-হলুদ বর্ণান্ধতার কয়েকটি ধরন, আর পুরো সাদা-কালো দৃষ্টি।
3. zoom আর ৩২০px: Ctrl++ দিয়ে ২০০% ও ৪০০%; device toolbar-এ ৩২০px চওড়া।
4. স্বয়ংক্রিয় পরীক্ষা: Lighthouse-এর Accessibility অংশ, বা axe DevTools extension — contrast, নামহীন বোতাম, ভুল ARIA-র মতো ধরা যায় এমন ভুল ধরে। Lighthouse-এর অ্যাক্সেসিবিলিটি পরীক্ষাগুলো ভেতরে axe-core-এর ওপরই দাঁড়িয়ে আছে।
5. নিজের হাতে: মাউস সরিয়ে রেখে শুধু Tab, Shift+Tab, Enter, Space আর Esc দিয়ে পুরো কাজটি (খোঁজা, কার্টে নেওয়া, অর্ডার) শেষ করুন।

১০ · AI-এর যুগে — অ্যাক্সেসিবল CSS-এর কাজ AI-কে দিলে

AI-কে “সুন্দর একটি কার্ড বানাও” বললে সে প্রায়ই দেয় হালকা ধূসর লেখা, ফিকে সীমানা, outline: none, px-এ স্থির উচ্চতা, আর হোভারে লাফানো অ্যানিমেশন — কারণ ইন্টারনেটের বহু জনপ্রিয় নমুনাই এমন। AI নিজের কোড Tab চেপে দেখে না, contrast মাপে না — তাই শর্ত আগেই বলুন, পরে যাচাই করুন।

AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া CSS হাতে পেলে — যাচাইয়ের চেকলিস্ট

• মাউস সরিয়ে শুধু Tab আর Shift+Tab দিয়ে পুরো পাতা ঘুরেছি — প্রতিটি জায়গায় focus স্পষ্ট, sticky header-এর নিচে হারায় না
• DevTools-এর color picker-এ লেখা, লিংক, বোতামের সীমানা আর focus-এর দাগের contrast দেখেছি
• Rendering প্যানেলে prefers-reduced-motion: reduce আর forced-colors: active চালু করে পাতা দেখেছি; লাল-সবুজ বর্ণান্ধতার অনুকরণেও অর্থ বোঝা যায়
• ২০০% ও ৪০০% zoom, ৩২০px চওড়া আর text spacing-এর চার লাইনের CSS দিয়ে দেখেছি — কিছু কাটে না, পাশাপাশি স্ক্রল নেই
• Lighthouse বা axe চালিয়েছি, HTML validator.w3.org-এ দিয়েছি; নতুন কোনো ফিচার (যেমন reading-flow) পেলে MDN আর Can I use-এ Baseline অবস্থা দেখেছি