Accessibility Fundamentals (a11y)
অ্যাক্সেসিবিলিটি বেসিক্স
1. Why Accessibility Matters
Accessibility (often shortened to a11y — "a", 11 letters, "y") means building websites that people with disabilities can actually use: people who are blind or low-vision and rely on a screen reader, people who cannot use a mouse and navigate entirely by keyboard, people with color blindness, and many more. This isn't a niche concern — the World Health Organization estimates over a billion people live with some form of disability. A beautiful site that only some visitors can use isn't actually finished.
By the end of this module you will know several free, purely-HTML techniques that make a real difference for real users.
2. Alt Text & Labels — Revisited
You met alt in Module 05 and <label for> in Module 07 — both are
accessibility features. A screen reader cannot "see" an image, so it reads the alt text
aloud instead. A screen reader cannot guess what an empty input is for, so it reads the connected
<label>. Good alt text is descriptive (what the image conveys), not just
"image123.jpg" or "photo".
alt এবং Module ০৭-এ <label for> শিখেছেন — দুটোই accessibility ফিচার। স্ক্রিন রিডার একটি ছবি "দেখতে" পারে না, তাই এর বদলে alt টেক্সট পড়ে শোনায়। স্ক্রিন রিডার অনুমান করতে পারে না একটি খালি input কীসের জন্য, তাই এটি সংযুক্ত <label> পড়ে। ভালো alt টেক্সট বর্ণনামূলক (ছবি কী বোঝায়), শুধু "image123.jpg" বা "photo" নয়।
3. Keyboard Navigation
Many people cannot use a mouse and navigate a page entirely with Tab, Shift+Tab,
and Enter. Every interactive element — links, buttons, form fields — must be reachable and
operable this way. Native HTML elements like <a>, <button>, and
<input> get this behavior for free. This is one of the strongest reasons to prefer a
real <button> over a styled <div> pretending to be one.
<a>, <button>, <input>-এর মতো native HTML এলিমেন্ট বিনামূল্যে এই আচরণ পায়। এটিই সবচেয়ে বড় কারণ কেন স্টাইল করা একটি <div>-কে বাটনের ভান করানোর বদলে একটি প্রকৃত <button> ব্যবহার করা উচিত।
<!-- Good: focusable, clickable with Enter, and readable by screen readers -->
<button type="button">Add to Cart</button>
<!-- Bad: a div with no keyboard support or announced role -->
<!-- <div onclick="addToCart()">Add to Cart</div> -->4. Basic ARIA Roles & Attributes
ARIA (Accessible Rich Internet Applications) attributes add extra information for assistive technology
when semantic HTML alone isn't enough. role can describe a widget's purpose,
aria-label gives an accessible name to an element with no visible text (like an icon-only
button), and aria-hidden="true" hides purely decorative content from screen readers. The
golden rule: use semantic HTML first — ARIA is a supplement, not a substitute.
role একটি widget-এর উদ্দেশ্য বর্ণনা করতে পারে, aria-label কোনো দৃশ্যমান টেক্সট নেই এমন এলিমেন্টকে (যেমন শুধু-আইকন বাটন) একটি accessible নাম দেয়, এবং aria-hidden="true" শুধু সাজসজ্জামূলক কনটেন্ট স্ক্রিন রিডার থেকে লুকিয়ে রাখে। সোনালী নিয়ম — প্রথমে সিমান্টিক HTML ব্যবহার করুন — ARIA একটি সম্পূরক, বিকল্প নয়।
<button type="button" aria-label="Close dialog">
<i class="fas fa-times" aria-hidden="true"></i>
</button>
<nav aria-label="Main navigation">
<a href="#">Home</a>
<a href="#">About</a>
</nav>5. Color Contrast Basics
Text needs enough contrast against its background to be readable — for people with low vision, color blindness, or simply anyone using their phone in bright sunlight. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 for normal body text. Light gray text on a white background is a classic accessibility failure.
✗ Poor Contrast (দুর্বল contrast)
- Light gray text on white (~2:1)
- Hard to read in sunlight
- Fails WCAG AA
✅ Good Contrast (ভালো contrast)
- Dark gray/black text on white (7:1+)
- Readable in any lighting
- Passes WCAG AA and AAA
6. Glossary (শব্দকোষ)
| Term | Meaning | বাংলায় |
|---|---|---|
| a11y | Shorthand for "accessibility" (a + 11 letters + y). | "Accessibility"-এর সংক্ষিপ্ত রূপ (a + ১১ অক্ষর + y)। |
| Screen reader | Software that reads page content aloud for blind/low-vision users. | দৃষ্টিহীন/কম-দৃষ্টি ব্যবহারকারীদের জন্য পেজের কনটেন্ট জোরে পড়া সফটওয়্যার। |
aria-label | Gives an accessible name when there's no visible text. | দৃশ্যমান টেক্সট না থাকলে একটি accessible নাম দেয়। |
aria-hidden | Hides purely decorative content from assistive tech. | সাজসজ্জামূলক কনটেন্ট সহায়ক প্রযুক্তি থেকে লুকায়। |
| Focus | The currently active, keyboard-reachable element. | বর্তমানে সক্রিয়, কিবোর্ড-পৌঁছানো যোগ্য এলিমেন্ট। |
| Contrast ratio | Measures how distinguishable text is from its background. | টেক্সট তার ব্যাকগ্রাউন্ড থেকে কতটা আলাদা তা পরিমাপ করে। |
| WCAG | Web Content Accessibility Guidelines — the standard rulebook. | Web Content Accessibility Guidelines — মানদণ্ড নির্দেশিকা। |
একটি ওয়েবসাইট শুধু দেখতে সুন্দর হলেই যথেষ্ট নয় — এটি স্ক্রিন রিডার ও কিবোর্ড দিয়েও ব্যবহারযোগ্য হতে হবে, তবেই এটি প্রকৃতপক্ষে সম্পূর্ণ।
7. Practice Problems
Every problem has a Show Answer button. Try the problem yourself first, then check.
-
Write an img tag for a photo of a red bicycle with a genuinely descriptive alt attribute.একটি লাল সাইকেলের ছবির জন্য একটি img ট্যাগ লিখুন, যাতে সত্যিকারের বর্ণনামূলক alt অ্যাট্রিবিউট থাকবে।
✨ Show Answer (উত্তর দেখুন)
ans1.html<img src="bicycle.jpg" alt="A red bicycle parked against a brick wall"> -
Rewrite a <div onclick="...">Save</div> button as a real, keyboard-accessible HTML button.একটি <div onclick="...">Save</div> বাটনকে একটি প্রকৃত, কিবোর্ড-অ্যাক্সেসযোগ্য HTML বাটন হিসেবে পুনরায় লিখুন।
✨ Show Answer (উত্তর দেখুন)
ans2.html<button type="button" onclick="save()">Save</button> -
Add an aria-label to an icon-only trash/delete button so it is announced correctly.একটি শুধু-আইকন trash/delete বাটনে একটি aria-label যোগ করুন, যাতে এটি সঠিকভাবে ঘোষিত হয়।
✨ Show Answer (উত্তর দেখুন)
ans3.html<button type="button" aria-label="Delete item"> <i class="fas fa-trash" aria-hidden="true"></i> </button> -
Between #333333 text on a #ffffff background and #cccccc text on a #ffffff background, which is more accessible, and why?#ffffff ব্যাকগ্রাউন্ডে #333333 টেক্সট এবং #ffffff ব্যাকগ্রাউন্ডে #cccccc টেক্সট — কোনটি বেশি accessible, এবং কেন?
✨ Show Answer (উত্তর দেখুন)
Answer: #333333 on white is far more accessible. Its contrast ratio is well above the WCAG AA minimum of 4.5:1, while #cccccc on white is extremely low-contrast and would fail for most users, especially those with low vision or in bright light.
সাদা ব্যাকগ্রাউন্ডে #333333 অনেক বেশি accessible। এর contrast ratio WCAG AA-এর ন্যূনতম ৪.৫:১-এর চেয়ে অনেক বেশি, যেখানে সাদা ব্যাকগ্রাউন্ডে #cccccc অত্যন্ত কম contrast-এর, যা বেশিরভাগ ব্যবহারকারীর জন্য, বিশেষত কম দৃষ্টিশক্তি বা উজ্জ্বল আলোতে, ব্যর্থ হবে।
-
In two or three sentences, explain why ARIA should supplement semantic HTML rather than replace it.দুই বা তিন বাক্যে ব্যাখ্যা করুন কেন ARIA-কে সিমান্টিক HTML-এর বিকল্প না হয়ে সম্পূরক হওয়া উচিত।
✨ Show Answer (উত্তর দেখুন)
Answer: Native semantic elements like <button> and <nav> already come with correct keyboard behavior, focus handling, and announced roles built in for free. Recreating that behavior manually with ARIA on a generic <div> is error-prone and easy to get wrong, so the rule is: use real HTML elements first, and add ARIA only to fill genuine gaps HTML can't express on its own.
<button> ও <nav>-এর মতো native সিমান্টিক এলিমেন্টে ইতিমধ্যেই সঠিক কিবোর্ড আচরণ, focus হ্যান্ডলিং, ও ঘোষিত role বিনামূল্যে বিল্ট-ইন থাকে। একটি সাধারণ <div>-এ ARIA দিয়ে ম্যানুয়ালি সেই আচরণ পুনরায় তৈরি করা ভুল-প্রবণ, তাই নিয়ম হলো — প্রথমে প্রকৃত HTML এলিমেন্ট ব্যবহার করুন, এবং শুধু সেই ফাঁক পূরণে ARIA যোগ করুন যা HTML নিজে থেকে প্রকাশ করতে পারে না।
Summary — Module 09
Accessibility means every visitor — including screen reader and keyboard-only users — can actually use your page. Descriptive alt text, connected labels, native focusable elements, careful ARIA, and strong color contrast are the free, purely-HTML foundations of a11y.