অ্যাক্সেসিবিলিটি — সবার জন্য ওয়েব, screen reader আর ARIA-র সঠিক ব্যবহার

১ · অ্যাক্সেসিবিলিটি কী — আর আসলে কার জন্য

ঢাকার মেট্রো রেলের স্টেশনে খেয়াল করেছেন? সিঁড়ির পাশে লিফট আর চলন্ত সিঁড়ি, মেঝেতে হলুদ খাঁজকাটা পথ। হলুদ পথটি দৃষ্টিপ্রতিবন্ধী যাত্রীর লাঠির জন্য, লিফট হুইলচেয়ারের জন্য। কিন্তু লিফটে ওঠেন ভারী ব্যাগ হাতে মানুষও, বাচ্চার স্ট্রলার নিয়ে মা, হাঁটুর ব্যথায় কষ্ট পাওয়া দাদু। ভবনকে সবার ব্যবহারযোগ্য করার এই চিন্তাকেই ওয়েবে বলে accessibility — বাংলায় প্রবেশযোগ্যতা বা ব্যবহারযোগ্যতা। ইংরেজিতে অনেকে সংক্ষেপে লেখেন a11y (a, তারপর ১১টি অক্ষর, তারপর y).

ওয়েবের জন্য সংজ্ঞাটা সহজ: যেকোনো মানুষ, যেকোনো উপায়ে — চোখে দেখে বা কানে শুনে, মাউসে বা কি-বোর্ডে, আঙুলে বা কণ্ঠে — পাতার তথ্য পেতে আর কাজ সারতে পারবেন। বিশ্ব স্বাস্থ্য সংস্থা (WHO)-র হিসাবে পৃথিবীর প্রায় প্রতি ছয়জনে একজন — প্রায় ১৩০ কোটি মানুষ — উল্লেখযোগ্য প্রতিবন্ধিতা নিয়ে বাঁচেন। এঁরা আপনার সাইটের সাধারণ পাঠক।

কারা উপকার পান

আর আছেন বয়স্ক মানুষ — বয়সের সাথে দৃষ্টি, শ্রবণ আর হাতের স্থিরতা সবই কমে। বাবা-মা যখন ফোনে লেখা বড় করে বিদ্যুৎ বিল দেখেন, তাঁরাও অ্যাক্সেসিবিলিটির সুবিধা নিচ্ছেন।

যে সফটওয়্যার বা যন্ত্র দিয়ে মানুষ এই বাধাগুলো পেরোন — screen reader, পর্দা বড় করার ম্যাগনিফায়ার, ব্রেইল ডিসপ্লে, কণ্ঠ দিয়ে নিয়ন্ত্রণ, সুইচ — এদের একসাথে বলে assistive technology (সহায়ক প্রযুক্তি)। এদের সবার কাজ নির্ভর করে একটি জিনিসের ওপর: আপনার HTML কতটা সঠিক।

২ · WCAG 2.2 — চারটি নীতি (POUR) আর তিনটি স্তর

“অ্যাক্সেসিবল” কথাটা মাপা হয় কীভাবে? W3C-র Web Accessibility Initiative (WAI) এর জন্য একটি আন্তর্জাতিক মান লিখেছে — WCAG (Web Content Accessibility Guidelines). প্রথম সংস্করণ ১৯৯৯ সালে, WCAG 2.0 ২০০৮ সালে, 2.1 ২০১৮ সালে, আর বর্তমান সংস্করণ WCAG 2.2 প্রকাশিত হয় ২০২৩ সালের অক্টোবরে। WCAG 3 নামে সম্পূর্ণ নতুন একটি কাঠামো নিয়ে কাজ চলছে, তবে সেটি এখনো খসড়া — আজকের কাজের মাপকাঠি 2.2.

WCAG-এ আছে কয়েক ডজন success criterion — প্রতিটি একটি যাচাইযোগ্য নিয়ম, নম্বর দিয়ে চেনা যায় (যেমন ১.১.১, ২.১.১)। সব নিয়ম চারটি বড় নীতির নিচে সাজানো, ইংরেজি আদ্যক্ষরে POUR. নিচের স্টেপারে একে একে দেখুন:

WCAG 2.2-এ নতুন কী

2.2-এ নয়টি নতুন নিয়ম যোগ হয়েছে, একটি বাদ পড়েছে। নতুনগুলোর কয়েকটি সরাসরি নকশায় লাগে: Focus Not Obscured (২.৪.১১, AA) — focus পাওয়া অংশ sticky হেডার বা কুকি-ব্যানারের নিচে পুরো ঢাকা পড়বে না; Target Size (Minimum) (২.৫.৮, AA) — ক্লিক বা ছোঁয়ার লক্ষ্য অন্তত 24×24 CSS পিক্সেল, বা আশেপাশে যথেষ্ট ফাঁকা; Accessible Authentication (৩.৩.৮, AA) — লগইনে স্মৃতি বা ধাঁধা-নির্ভর পরীক্ষা ছাড়াও উপায়, যেমন পাসওয়ার্ড পেস্ট করতে দেওয়া। বাদ পড়েছে পুরোনো ৪.১.১ “Parsing” — আধুনিক HTML parser ভুল কোডও একই নিয়মে সামলায় বলে।

৩ · মাউস ছাড়া ওয়েব — কি-বোর্ড, focus আর tabindex

মাউসটা সরিয়ে রেখে শুধু কি-বোর্ড দিয়ে এই পাতায় চলুন। Tab চাপলে পরের লিংক বা বোতামে যায়, Shift+Tab আগেরটায়; লিংকে Enter, বোতামে Enter বা Space; রেডিও বা মেনুর ভেতরে তীর-চিহ্ন; বন্ধ করতে Esc. Screen reader ব্যবহারকারী, হাত কাঁপে এমন মানুষ, দ্রুত কাজ করা প্রোগ্রামাররাও এভাবেই চলেন। WCAG-এর ২.১.১ নিয়ম বলে: মাউসে যা করা যায়, কি-বোর্ডেও তা করা যেতে হবে।

কি-বোর্ডের এই চলাচলের কেন্দ্রে আছে focus — পাতার কোন অংশটি এই মুহূর্তে কি-বোর্ডের কথা শুনছে। একসাথে একটিই element focus পায়। ব্রাউজার সেটিকে সাধারণত একটি দাগ বা আভা (focus ring) দিয়ে দেখায় — এটা মুছে ফেলা মানে কি-বোর্ড ব্যবহারকারীর চোখ বেঁধে দেওয়া। আর Tab চাপলে focus কোন ক্রমে ঘোরে, তাকে বলে tab order — সাধারণত HTML-এ যে ক্রমে লেখা, সেই ক্রমেই।

কে নিজে থেকেই focus পায়

লিংক (href থাকলে), <button>, <input>, <select>, <textarea>, <summary> — এরা জন্ম থেকেই কি-বোর্ড বোঝে। কিন্তু <div>, <span>, <p> কখনো focus পায় না, যত onclick-ই লাগান। focus-এর নিয়ম বদলানোর attribute হলো tabindex, যার তিন রকম মান:

নিচের এডিটরে এক পাতায় সব রকম জিনিস রাখা হয়েছে। এডিটরের নিচের “কপি” বোতামে Tab দিয়ে আসুন, তারপর বারবার Tab চাপুন — focus প্রিভিউতে ঢুকবে, আর কোথায় যাচ্ছে তা প্রিভিউর নিচে লেখা হবে:

<p>Tab চাপতে থাকুন:</p>
<a href="#news">খবর</a>
<button>খুঁজুন</button>
<div onclick="console.log('div-এ ক্লিক')">লগইন (div)</div>
<div tabindex="0">অফার (tabindex="0")</div>
<button tabindex="-1">বন্ধ (tabindex="-1")</button>
<input aria-label="ইমেইল" placeholder="ইমেইল">
<button tabindex="3">সাবস্ক্রাইব (tabindex="3")</button>

<script>
  document.addEventListener('focusin', (e) => {
    console.log('focus →', e.target.textContent || e.target.placeholder);
  });
</script>

এই কোডটিতেই প্রতিটি Tab চাপার সময় ব্রাউজার মনে মনে কী হিসাব করে, দেখুন:

1<a href="#news">খবর</a>2<button>খুঁজুন</button>3<div onclick="…">লগইন (div)</div>4<div tabindex="0">অফার</div>5<button tabindex="-1">বন্ধ</button>6<input aria-label="ইমেইল">7<button tabindex="3">সাবস্ক্রাইব</button>

div দিয়ে বানানো “বোতাম” কেন অর্ধেক বোতাম

অনেকে ভাবেন, div-এ tabindex="0" আর role="button" দিলেই সমস্যা শেষ। দেখুন সত্যিই শেষ কি না। প্রথমে তিনটিতেই মাউসে ক্লিক করুন, তারপর Tab দিয়ে প্রতিটিতে গিয়ে Enter আর Space চাপুন:

<div onclick="console.log('১: শুধু div — কাজ করল')">
  ১. শুধু div
</div>

<div role="button" tabindex="0"
     onclick="console.log('২: role + tabindex — কাজ করল')">
  ২. div + role="button" + tabindex="0"
</div>

<button type="button"
        onclick="console.log('৩: আসল button — কাজ করল')">
  ৩. আসল &lt;button&gt;
</button>

৪ · প্রতিটি কন্ট্রোলের একটি নাম চাই — label, alt আর aria-*

পর্ব ০৫-এ লিংকের প্রসঙ্গে accessible name শব্দটা শুনেছেন। এবার পুরো ছবিটা দেখুন। Screen reader একটি কন্ট্রোলে এলে তিনটি জিনিস বলে: নাম (কী এটা), ভূমিকা (কোন ধরনের জিনিস — বোতাম, লিংক, ঘর) আর অবস্থা (চেক করা, খোলা, অনুপলব্ধ)। যেমন: “মোবাইল নম্বর, সম্পাদনা ঘর, আবশ্যক”। নাম না থাকলে শোনা যায় শুধু “বোতাম” — কিসের বোতাম, কেউ জানে না। ভাবুন bKash-এর মতো একটি অ্যাপে চারটি বোতাম, সবগুলো শুধু “বোতাম, বোতাম, বোতাম, বোতাম” — টাকা পাঠাবেন কোনটায়?

নামের উৎসগুলো

• ভেতরের লেখা: <button>জমা দিন</button> — বোতাম আর লিংকের নাম নিজের লেখা থেকেই আসে। সবচেয়ে সহজ আর সবচেয়ে ভালো উৎস।
• <label>: ফর্মের ঘরের নাম (পর্ব ০৮)। label-এ ক্লিক করলে ঘরটিতে focus যায় — হাত কাঁপে যাঁদের, তাঁদের বড় উপকার।
• alt: ছবির নাম (পর্ব ০৬)। তথ্য বহন করা ছবিতে অর্থ লিখুন; সাজসজ্জার ছবিতে alt="", screen reader তখন এড়িয়ে যায়। লিংকের ভেতরে শুধু ছবি থাকলে alt-ই লিংকের নাম — তাই লিখুন লিংক কোথায় নেয়।
• aria-label: চোখে দেখা যায় না এমন নাম, সরাসরি attribute-এ লেখা। দরকার পড়ে যখন পর্দায় কোনো লেখাই নেই — যেমন শুধু 🛒 আইকনের বোতাম: aria-label="কার্ট খুলুন".
• aria-labelledby: “পাতার ওই লেখাটিই আমার নাম” — এক বা একাধিক element-এর id ফাঁকা দিয়ে লেখা হয়। পর্দার লেখা আর নাম তখন সব সময় এক থাকে।
• aria-describedby: নাম নয়, বাড়তি বিবরণ — নাম আর ভূমিকার পরে একটু থেমে পড়া হয়। পাসওয়ার্ডের নিয়ম, নম্বরের ফরম্যাট বা ভুলের বার্তার জন্য আদর্শ।

একটি কন্ট্রোলে একাধিক উৎস থাকলে কে জেতে? ব্রাউজার একটি নির্দিষ্ট ক্রমে খোঁজে। একটি খোঁজার ঘরে ধাপে ধাপে উৎস যোগ করে দেখুন:

<input type="search">

<input type="search" title="খোঁজার ঘর">

<label for="q">পণ্য খুঁজুন</label>
<input type="search" id="q" title="খোঁজার ঘর">

<label for="q">পণ্য খুঁজুন</label>
<input type="search" id="q" title="খোঁজার ঘর"
       aria-label="সার্চ">

<h2 id="offer">আজকের অফার</h2>
<label for="q">পণ্য খুঁজুন</label>
<input type="search" id="q" title="খোঁজার ঘর"
       aria-label="সার্চ" aria-labelledby="offer">

এবার একটি ছোট পরীক্ষাগার। নিচের স্ক্রিপ্টটি ওপরের নিয়মের একটি সরল রূপ মেনে প্রতিটি কন্ট্রোলের নাম আর বিবরণ বের করে লিখে দেয় — screen reader মোটামুটি এগুলোই শোনাবে:

// accessible name খোঁজার সরল নিয়ম (আসল নিয়মের ছোট রূপ)
function accName(el) {
  const ids = el.getAttribute('aria-labelledby');
  if (ids) return ids.split(' ').map(i => document.getElementById(i).textContent.trim()).join(' ');
  if (el.hasAttribute('aria-label')) return el.getAttribute('aria-label');
  if (el.labels && el.labels.length) return el.labels[0].textContent.trim();
  if (el.tagName === 'IMG') return el.alt;
  return el.textContent.trim() || el.title || el.placeholder || '';
}
document.querySelectorAll('input, button, a[href], img').forEach((el) => {
  const nm = accName(el);
  const descId = el.getAttribute('aria-describedby');
  let line = el.tagName.toLowerCase() + ' → নাম: ' + (nm ? '"' + nm + '"' : '(নাম নেই!)');
  if (el.tagName === 'IMG' && el.alt === '') line = 'img → ফাঁকা alt: সাজসজ্জা, screen reader এড়িয়ে যাবে';
  if (descId) line += ' | বিবরণ: "' + document.getElementById(descId).textContent.trim() + '"';
  console.log(line);
});

৫ · Accessibility tree — screen reader আসলে কী পড়ে

প্রচলিত ভুল ধারণা: screen reader পাতার HTML পড়ে। আসলে NVDA, VoiceOver বা TalkBack আপনার HTML দেখেই না — পড়ে ব্রাউজারের বানানো একটি গাছ, যার নাম accessibility tree. পর্ব ০১-এ দেখেছেন ব্রাউজার HTML থেকে DOM বানায়; DOM থেকে সে বানায় আরেকটি ছোট, পরিষ্কার গাছ — যেখানে শুধু অর্থবহ জিনিস থাকে, প্রত্যেকের নাম, ভূমিকা আর অবস্থাসহ। পুরো যাত্রাটা ধাপে ধাপে দেখুন:

এই গাছ নিজের চোখে দেখতে পারেন: Chrome বা Edge-এ যেকোনো element-এ রাইট-ক্লিক করে “Inspect”, তারপর Elements প্যানেলের পাশের Accessibility ট্যাব। সেখানে দেখাবে element-টির Name, Role, আর নামটি কোন উৎস থেকে এসেছে। Firefox-এ আছে আলাদা “Accessibility” প্যানেল; DevTools নিয়ে পুরো আলোচনা পর্ব ৪৭-এ।

৬ · ARIA — প্রথম নিয়ম, আর কেন খারাপ ARIA-র চেয়ে ARIA না থাকা ভালো

২০০০-এর দশকের মাঝামাঝি ওয়েব হঠাৎ “অ্যাপ” হয়ে উঠল — Gmail, Google Maps, ড্রপডাউন মেনু, ট্যাব, স্লাইডার, সবই JavaScript আর div দিয়ে বানানো। HTML-এ তখন এসব কন্ট্রোলের element ছিল না, ফলে screen reader-এর কাছে এগুলো অর্থহীন div. সমস্যা মেটাতে W3C বানাল WAI-ARIA (Accessible Rich Internet Applications) — কিছু attribute, যা দিয়ে কোনো element-কে accessibility tree-তে বাড়তি অর্থ দেওয়া যায়। ২০১৪ সালে ARIA 1.0 আনুষ্ঠানিক মান হয়, আর এখনকার সংস্করণ ARIA 1.2.

ARIA-র তিন রকম জিনিস আছে:

• Role (ভূমিকা): role="button", role="dialog", role="tablist", role="alert" — “আমি কী”।
• Property (বৈশিষ্ট্য): aria-label, aria-describedby, aria-controls — সাধারণত খুব বেশি বদলায় না।
• State (অবস্থা): aria-expanded, aria-checked, aria-pressed, aria-current — ব্যবহারকারীর কাজে বদলায়, আর বদলানোর দায়িত্ব আপনার JavaScript-এর।

role="button" দিলে screen reader বলবে “বোতাম”, কিন্তু element-টি focus পাবে না, Enter-এ চলবে না — অংশ ৩-এর এডিটরেই দেখেছেন। তাই W3C-র “Using ARIA” নির্দেশিকায় পাঁচটি নিয়ম আছে, যার প্রথমটি সবচেয়ে বিখ্যাত:

বাকি চারটি নিয়ম সংক্ষেপে: (২) একান্ত দরকার না হলে নিজস্ব element-এর অর্থ বদলাবেন না (<h2 role="tab"> নয়); (৩) ARIA দিয়ে বানানো প্রতিটি ইন্টারঅ্যাকটিভ কন্ট্রোল কি-বোর্ডে চলতে হবে; (৪) focus পায় এমন element-এ কখনো aria-hidden="true" বা role="presentation" দেবেন না; (৫) প্রতিটি ইন্টারঅ্যাকটিভ element-এর একটি accessible name থাকতে হবে।

W3C-র ARIA Authoring Practices Guide-এর শুরুতেই একটি সতর্কবাণী লেখা: “No ARIA is better than bad ARIA” — খারাপ ARIA-র চেয়ে ARIA না থাকা ভালো। কেন? ARIA ছাড়া div-কে screen reader অন্তত সাধারণ লেখা হিসেবে পড়ে। কিন্তু ভুল ARIA মিথ্যা প্রতিশ্রুতি দেয় — “আমি বোতাম” বলে চলে না, “খোলা” বলে আসলে বন্ধ। মিথ্যা তথ্য অনুপস্থিত তথ্যের চেয়ে বেশি বিপজ্জনক। WebAIM প্রতি বছর ১০ লাখ জনপ্রিয় ওয়েবসাইটের হোমপেজ পরীক্ষা করে (WebAIM Million) — সেখানে বারবার দেখা গেছে, যেসব পাতায় ARIA বেশি, সেগুলোতে গড়ে ধরা-পড়া ভুলও বেশি। ARIA নিজে খারাপ নয়; সমস্যা হলো না বুঝে ব্যবহার।

৭ · role আর state — aria-expanded, aria-current, aria-hidden আর live region

প্রথম নিয়ম মেনেও কিছু জায়গায় ARIA লাগে — যেখানে HTML-এ সেই অর্থ প্রকাশের উপায় নেই। সবচেয়ে বেশি কাজে লাগে চারটি।

aria-expanded — খোলা না বন্ধ

প্রশ্ন-উত্তরের (FAQ) একটি অংশ, যেখানে বোতাম চাপলে উত্তর খোলে। চোখে দেখা পাঠক তীর-চিহ্নের দিক দেখে বোঝেন খোলা না বন্ধ। Screen reader-কে সেটি জানায় aria-expanded — আর মানটি বদলাতে হয় আপনার স্ক্রিপ্টকেই। বোতামটি আসল <button>, তাই কি-বোর্ড বিনামূল্যে:

<h3>
  <button id="faqBtn" type="button" aria-expanded="false" aria-controls="faq1">
    <span aria-hidden="true">▸</span> ডেলিভারি চার্জ কত?
  </button>
</h3>
<div id="faq1" hidden>
  ঢাকার ভেতরে ৬০ টাকা, বাইরে ১২০ টাকা (উদাহরণ)।
</div>

<script>
  const faqBtn = document.getElementById('faqBtn');
  faqBtn.addEventListener('click', () => {
    const isOpen = faqBtn.getAttribute('aria-expanded') === 'true';
    faqBtn.setAttribute('aria-expanded', String(!isOpen));
    document.getElementById('faq1').hidden = isOpen;
    faqBtn.firstElementChild.textContent = isOpen ? '▸' : '▾';
    console.log('aria-expanded =', faqBtn.getAttribute('aria-expanded'));
  });
</script>

aria-current — “আপনি এখানে”

পর্ব ০৭-এ মেনুতে দেখেছেন: <a href="/contact.html" aria-current="page"> জানায় এটি বর্তমান পাতা। মান হতে পারে page (মেনুতে বর্তমান পাতা), step (ধাপে ধাপে ফর্মের বর্তমান ধাপ), location (breadcrumb বা মানচিত্রে), date (ক্যালেন্ডারে আজকের দিন)। একটি তালিকায় একটিই “বর্তমান” থাকবে। আর একই attribute ধরে CSS-এ স্টাইল দেওয়া যায় ([aria-current="page"]) — ফলে চেহারা আর অর্থ কখনো আলাদা হয়ে যায় না।

aria-hidden — শুধু screen reader থেকে লুকানো

aria-hidden="true" একটি অংশকে accessibility tree থেকে সরিয়ে দেয়, কিন্তু পর্দায় রেখে দেয়। কাজে লাগে সাজসজ্জার আইকনে, যার পাশে আগে থেকেই লেখা আছে — এই পাতার প্রতিটি Font Awesome আইকনেও তাই এটি দেওয়া। সাবধান: এটি focus আটকায় না, তাই লিংক-বোতামে বা তাদের পূর্বপুরুষে কখনো নয়; আর সবার কাছ থেকে লুকাতে চাইলে hidden attribute বা CSS-এর display: none. উল্টো কাজটি — পর্দায় না দেখিয়ে শুধু screen reader-কে পড়ানো — একটি CSS কৌশল (“visually hidden”), যা পর্ব ৪৫-এ শিখবেন।

Live region — না সরেও খবর পাওয়া

অনলাইন দোকানে “কার্টে যোগ করুন” চাপলেন, পাতার কোণে লেখা এল “কার্টে যোগ হয়েছে”। কিন্তু screen reader-এর focus বোতামেই — সে জানেই না অন্য কোথাও কিছু বদলেছে। এর সমাধান live region: পাতার একটি অংশকে আগেই চিহ্নিত করে রাখা, “এখানে লেখা বদলালে শ্রোতাকে জানিও”।

• aria-live="polite" বা role="status" — শ্রোতা এখন যা শুনছেন, তা শেষ হলে বলবে। বেশিরভাগ খবরের জন্য এটিই ঠিক।
• aria-live="assertive" বা role="alert" — যা চলছে থামিয়ে সঙ্গে সঙ্গে বলবে। শুধু জরুরি ভুল বা সতর্কতার জন্য; বেশি দিলে বিরক্তিকর।

<p>খাঁটি সরিষার তেল, ১ লিটার</p>
<button type="button" id="addBtn">কার্টে যোগ করুন</button>

<!-- পাতা খোলার সময়েই থাকবে, শুরুতে ফাঁকা -->
<p role="status" id="cartMsg"></p>

<script>
  let cartCount = 0;
  document.getElementById('addBtn').addEventListener('click', () => {
    cartCount++;
    const msg = 'কার্টে যোগ হয়েছে। কার্টে এখন মোট ' + cartCount + 'টি পণ্য';
    document.getElementById('cartMsg').textContent = msg;
    console.log('status-এ লেখা হলো →', msg);
  });
</script>

৮ · কাঠামো আর ভাষা — heading, landmark, skip link আর lang

চোখে দেখা পাঠক পাতায় ঢুকে এক পলকে চোখ বুলিয়ে নেন। Screen reader ব্যবহারকারী একই কাজ করেন কাঠামো দিয়ে — NVDA-তে H চাপলে পরের heading-এ, D চাপলে পরের landmark-এ লাফ। WebAIM-এর screen reader ব্যবহারকারী জরিপে বারবার দেখা গেছে, লম্বা পাতায় তথ্য খুঁজতে বেশিরভাগ ব্যবহারকারী প্রথমে heading ধরেই চলেন।

• Heading (পর্ব ০৪): পাতায় একটি <h1>, তারপর ক্রম না ভেঙে h2, h3 — বইয়ের সূচিপত্রের মতো। লেখা বড় দেখানোর জন্য heading নয়; অংশের শিরোনাম বলেই heading.
• Landmark (পর্ব ১০): <header>, <nav>, <main>, <aside>, <footer> — পাতার বড় অঞ্চলগুলো। একই ধরনের দুটি থাকলে aria-label দিয়ে আলাদা নাম দিন (“প্রধান মেনু”, “পাদদেশের মেনু”)।
• Skip link: পাতার একদম শুরুতে একটি লিংক — “সরাসরি মূল লেখায় যান”। প্রতিটি পাতায় ২০টি মেনু-লিংক Tab দিয়ে পেরিয়ে তবে লেখায় পৌঁছানো কি-বোর্ড ব্যবহারকারীর জন্য ক্লান্তিকর; WCAG ২.৪.১ (Bypass Blocks) এই শর্টকাট চায়। এই পাতারও একদম শুরুতে একটি আছে — পাতা খুলে প্রথমবার Tab চাপলেই দেখবেন।

ভাষা — বাংলা আর ইংরেজির মিশ্রণে lang

Screen reader-এর কণ্ঠ জানে না লেখাটি কোন ভাষার — জানে lang attribute থেকে। <html lang="bn"> না থাকলে সে হয়তো ইংরেজি কণ্ঠে বাংলা পড়তে চেষ্টা করবে, বা অংশটি বাদ দেবে। বাংলা পাতার মাঝে পুরো একটি ইংরেজি বাক্য থাকলে তাকে <span lang="en"> দিয়ে চিহ্নিত করুন — ভাষা বদলাতে পারে এমন screen reader (যেমন NVDA) তখন ঠিক উচ্চারণে পড়ে। WCAG ৩.১.১ পাতার ভাষা আর ৩.১.২ অংশের ভাষা চায়। (“HTML”, “Wi-Fi”-এর মতো বাংলায় মিশে যাওয়া শব্দের জন্য আলাদা lang দরকার নেই।) বাংলা লেখার বাকি দিক — UTF-8, ফন্ট — পর্ব ১৪-এ।

<!doctype html>
<html lang="bn">
<head><meta charset="utf-8"><title>ভর্তি বিজ্ঞপ্তি</title>
  <style> :target { outline: 3px solid orange; } </style>
</head>
<body>
  <a href="#main">সরাসরি মূল লেখায় যান</a>
  <header>
    <nav aria-label="প্রধান মেনু">
      <a href="#home">হোম</a> · <a href="#notice">নোটিশ</a> · <a href="#help">সাহায্য</a>
    </nav>
  </header>
  <main id="main" tabindex="-1">
    <h1>ভর্তি বিজ্ঞপ্তি (উদাহরণ)</h1>
    <p>আবেদন করতে <span lang="en">Online Application Form</span> পূরণ করুন।</p>
  </main>
  <footer>যোগাযোগ: হেল্পলাইন</footer>
  <script>
    console.log('পাতার ভাষা:', document.documentElement.lang);
    document.querySelectorAll('[lang]').forEach((n) => console.log(n.tagName, '→', n.lang));
  </script>
</body>
</html>

৯ · পরীক্ষা করবেন কীভাবে — কি-বোর্ড, screen reader, DevTools আর automated টুল

অ্যাক্সেসিবিলিটি মুখস্থ করার বিষয় নয়, পরীক্ষা করে দেখার বিষয়। পেশাদাররা চার স্তরে পরীক্ষা করেন — সহজ থেকে গভীরে।

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

AI টুলকে “একটা লগইন ফর্ম আর মেনু বানিয়ে দাও” বললে কয়েক সেকেন্ডে সুন্দর কোড পাবেন। কিন্তু অ্যাক্সেসিবিলিটির ভুল প্রায় সব সময় অদৃশ্য। আর AI শিখেছে ইন্টারনেটের কোড থেকে, যেখানে WebAIM-এর হিসাবে প্রতি বছর প্রায় ৯৫ শতাংশ জনপ্রিয় হোমপেজেই ধরা-পড়া WCAG ভুল থাকে — “গড়পড়তা” কোড মানে ভুলে ভরা কোড।

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

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

• মাউস ছাড়া শুধু কি-বোর্ডে পুরো কাজটা করে দেখেছি — সব জায়গায় পৌঁছানো যায়, focus সব সময় দেখা যায়, কোথাও আটকাই না
• DevTools-এর Accessibility ট্যাবে প্রতিটি বোতাম-লিংক-ঘরের Name আর Role দেখেছি — কোনোটি ফাঁকা বা “button”-এর মতো অর্থহীন নয়
• প্রতিটি ARIA attribute-এর জন্য প্রশ্ন করেছি: “এর কাজ কি কোনো নিজস্ব HTML element করতে পারত?” — পারলে সরিয়ে দিয়েছি
• Lighthouse বা axe চালিয়ে সব ভুল ঠিক করেছি — আর মনে রেখেছি, স্কোর ১০০ মানেই কাজ শেষ নয়
• NVDA বা TalkBack দিয়ে একবার শুনেছি; validator.w3.org-এ HTML যাচাই করেছি; সন্দেহ হলে MDN আর Can I use দেখেছি