আগের পর্বে আমরা SVG দিয়ে ভেক্টর গ্রাফিক্স শিখেছিলাম। এই পর্বে আমরা এমন একটা টপিক দেখব যেটা প্রায়ই অবহেলিত থাকে, কিন্তু ওয়েব ডেভেলপমেন্টের একটা গুরুত্বপূর্ণ অংশ — Accessibility (a11y)। যাদের দৃষ্টি সমস্যা আছে, বা যারা কীবোর্ড দিয়ে সাইট ব্যবহার করেন, তাদের জন্য সাইট ব্যবহারযোগ্য বানানোই এই টপিকের মূল লক্ষ্য।
Accessibility কেন গুরুত্বপূর্ণ?
অনেক ব্যবহারকারী স্ক্রিন রিডার দিয়ে ওয়েবসাইট ব্যবহার করেন — এটা একটা সফটওয়্যার যা পেজের কন্টেন্ট জোরে পড়ে শোনায়। আবার অনেকে মাউস ছাড়া শুধু কীবোর্ড দিয়ে ব্রাউজ করেন। যদি সাইট শুধু "দেখতে সুন্দর" কিন্তু সেমান্টিক্যালি ভুলভাবে বানানো হয়, তাহলে এই ব্যবহারকারীদের কাছে সাইটটা পুরোপুরি অকার্যকর হয়ে যেতে পারে।
সেমান্টিক HTML — প্রথম ধাপ
Accessibility-এর সবচেয়ে বড় ভিত্তি হলো সঠিক সেমান্টিক ট্যাগ ব্যবহার করা। <div> দিয়ে সব বানানো যায়, কিন্তু স্ক্রিন রিডার তাতে কিছুই বুঝতে পারে না।
<!-- ❌ খারাপ — স্ক্রিন রিডার কিছু বুঝবে না -->
<div class="header">
<div class="nav-item" onclick="goHome()">হোম</div>
</div>
<div class="title">আমার ব্লগ</div>
<!-- ✅ ভালো — সেমান্টিক ট্যাগ ব্যবহার করা -->
<header>
<nav>
<a href="/">হোম</a>
</nav>
</header>
<h1>আমার ব্লগ</h1>
<a> ট্যাগ স্বয়ংক্রিয়ভাবে কীবোর্ড দিয়ে ফোকাস করা যায়, Enter চাপলে কাজ করে, স্ক্রিন রিডার একে "লিংক" হিসেবে ঘোষণা করে। কিন্তু onclick-ওয়ালা <div>-এ এসবের কিছুই হয় না।
ARIA অ্যাট্রিবিউট
যখন সেমান্টিক HTML দিয়ে কিছু প্রকাশ করা যায় না (যেমন একটা কাস্টম ড্রপডাউন বা মোডাল), তখন ARIA (Accessible Rich Internet Applications) অ্যাট্রিবিউট ব্যবহার করা হয় — এগুলো স্ক্রিন রিডারকে অতিরিক্ত তথ্য দেয়।
| অ্যাট্রিবিউট | কাজ |
|---|---|
aria-label |
এলিমেন্টের নাম বলে দেয় (দৃশ্যমান টেক্সট না থাকলে) |
aria-hidden |
স্ক্রিন রিডার থেকে এলিমেন্ট লুকায় (যেমন ডেকোরেটিভ আইকন) |
aria-expanded |
ড্রপডাউন/অ্যাকর্ডিয়ন খোলা না বন্ধ তা জানায় |
aria-live |
কন্টেন্ট পরিবর্তন হলে স্বয়ংক্রিয়ভাবে জানায় |
role |
এলিমেন্টের ভূমিকা বলে দেয় (যেমন role="button") |
<!-- শুধু আইকন থাকা বাটনে aria-label জরুরি --> <button aria-label="সার্চ করুন"> 🔍 </button> <!-- ডেকোরেটিভ আইকন স্ক্রিন রিডার থেকে লুকানো --> <span aria-hidden="true">✨</span> <!-- অ্যাকর্ডিয়নের অবস্থা জানানো --> <button aria-expanded="false" id="faqBtn"> প্রশ্ন দেখুন </button>
নিয়ম মনে রাখো: "No ARIA is better than bad ARIA" — যদি সেমান্টিক HTML (যেমন <button>) দিয়ে কাজ চলে, ARIA-র দরকার নেই। ভুল ARIA ব্যবহার না করার চেয়েও খারাপ হতে পারে।
কীবোর্ড নেভিগেশন
মাউস ছাড়া শুধু Tab কী দিয়ে পুরো সাইট ব্যবহারযোগ্য হওয়া উচিত। কাস্টম বাটন বা ইন্টারঅ্যাক্টিভ এলিমেন্ট বানালে tabindex আর কীবোর্ড ইভেন্ট হ্যান্ডেল করতে হয়।
<!-- কাস্টম div-ভিত্তিক বাটন হলে (যদিও <button> ব্যবহার করাই ভালো) --> <div role="button" tabindex="0" onclick="handleClick()" onkeydown="if(event.key === 'Enter' || event.key === ' ') handleClick()" > আমাকে চাপো </div>
tabindex="0" দিলে এলিমেন্টটা স্বাভাবিক Tab-অর্ডারে ঢুকে যায়। tabindex="-1" দিলে এটা Tab দিয়ে পৌঁছানো যাবে না, কিন্তু JavaScript দিয়ে ফোকাস করা যাবে।
লাইভ ডেমো — কীবোর্ড দিয়ে চালাও
মাউস ব্যবহার না করে শুধু Tab কী চেপে নিচের বাটনগুলোতে যাও, তারপর Enter বা Space চেপে দেখো ফোকাস রিং আর কাজ কেমন হয়।
খেয়াল করো — দুইটা বাটনই স্বাভাবিক <button> ট্যাগ, তাই এমনিতেই কীবোর্ড-ফ্রেন্ডলি।
ছবির alt টেক্সট
প্রতিটা অর্থবহ ছবিতে alt টেক্সট থাকা উচিত। ছবিটা যদি শুধু ডেকোরেশনের জন্য হয়, তাহলে alt="" (খালি) দিতে হয় — যাতে স্ক্রিন রিডার সেটা স্কিপ করে যায়।
<!-- অর্থবহ ছবি — বর্ণনামূলক alt দরকার --> <img src="chart.png" alt="২০২৫ সালের মাসিক বিক্রয় বৃদ্ধির লাইন চার্ট" /> <!-- শুধু ডেকোরেটিভ ছবি — খালি alt --> <img src="decorative-border.png" alt="" />
ফর্ম Accessibility
প্রতিটা ইনপুটের সাথে <label> যুক্ত থাকা জরুরি — এতে স্ক্রিন রিডার বলে দেয় কোন ইনপুটে কী তথ্য দিতে হবে, আর লেবেলে ক্লিক করলেও ইনপুট ফোকাস হয়।
<!-- ❌ খারাপ — label ইনপুটের সাথে যুক্ত নয় --> <p>ইমেইল</p> <input type="email" /> <!-- ✅ ভালো — for আর id দিয়ে যুক্ত --> <label for="emailInput">ইমেইল</label> <input id="emailInput" type="email" />
একটা সম্পূর্ণ উদাহরণ — অ্যাক্সেসিবল মডাল
চলো একটা মডাল (পপ-আপ) বানাই যেটা কীবোর্ড আর স্ক্রিন রিডার দুটোতেই ঠিকমতো কাজ করে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8" />
<title>অ্যাক্সেসিবল মডাল</title>
</head>
<body>
<button id="openModal">মডাল খুলুন</button>
<div
aria-hidden="true"
aria-labelledby="modalTitle"
aria-modal="true"
id="myModal"
role="dialog"
style="display: none;"
>
<h2 id="modalTitle">নিশ্চিত করুন</h2>
<p>আপনি কি নিশ্চিত?</p>
<button id="closeModal">বন্ধ করুন</button>
</div>
<script>
const openBtn = document.getElementById("openModal");
const closeBtn = document.getElementById("closeModal");
const modal = document.getElementById("myModal");
openBtn.addEventListener("click", () => {
modal.style.display = "block";
modal.setAttribute("aria-hidden", "false");
closeBtn.focus(); // মডাল খুললেই ফোকাস তার ভেতরে যাওয়া উচিত
});
closeBtn.addEventListener("click", () => {
modal.style.display = "none";
modal.setAttribute("aria-hidden", "true");
openBtn.focus(); // বন্ধ হলে ফোকাস আগের বাটনে ফিরিয়ে দেওয়া
});
// Escape চাপলেও মডাল বন্ধ হবে
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && modal.style.display === "block") {
closeBtn.click();
}
});
</script>
</body>
</html>
এখানে তিনটা গুরুত্বপূর্ণ জিনিস আছে — role="dialog" স্ক্রিন রিডারকে বলে এটা একটা ডায়ালগ, ফোকাস ম্যানেজমেন্ট (খুললে ভেতরে, বন্ধ হলে বাইরে ফিরে যাওয়া), আর Escape কী দিয়ে বন্ধ করার সুবিধা।
নিজে চেষ্টা করো
Exercise:
- তোমার আগের কোনো পোস্ট বা প্রজেক্টে
<div>দিয়ে বানানো বাটন খুঁজে বের করো, সেগুলো<button>-এ পরিবর্তন করো। - একটা ফর্ম বানাও যেখানে প্রতিটা ইনপুটের সাথে সঠিকভাবে
<label>যুক্ত আছে। - শুধু কীবোর্ড (মাউস স্পর্শ না করে) দিয়ে তোমার Pathok Ghar বা অন্য কোনো প্রজেক্ট ব্যবহার করার চেষ্টা করো — কোথায় আটকে যাচ্ছ সেটা লিখে রাখো।
- উপরের মডাল উদাহরণটা নিজে বানাও, আর Escape কী চেপে বন্ধ হয় কিনা পরীক্ষা করো।
পরের পর্বে যা থাকছে
পরের পর্বে আমরা শিখব Meta Tags ও SEO Optimization — কীভাবে Open Graph ট্যাগ আর structured data ব্যবহার করে সাইটকে সার্চ ইঞ্জিন আর সোশ্যাল মিডিয়ার জন্য অপ্টিমাইজ করা যায়।