HTML Accessibility Basics (Mid-Level)

🔹 1. Labels & Form Accessibility

Form input ব্যবহার করার সময় label use করা must

Example:

          <label for="email">Email</label>
          <input type="email" id="email" name="email">
        

✅ কেন গুরুত্বপূর্ণ?

• Screen reader label পড়ে input explain করে
• User click করলে label → input focus হয়
• Form usability improve হয়

---

❌ Wrong way:

          
            <input type="text" placeholder="Enter your name">
          
        

Placeholder label না ❗
User typing করলে placeholder disappear হয়ে যায়

✅ Better (Accessible):

          <label for="name">Name</label>
          <input type="text" id="name" name="name">
        

---

🔹 2. Semantic Landmarks

Website structure clear করার জন্য semantic tags use করা হয়

Common Landmarks:

• <header> → top section
• <nav> → navigation
• <main> → main content
• <section> → grouped content
• <footer> → bottom

Example:

          
<header>Logo & Title</header>

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
</nav>

<main>
  <section>
    <h2>Blog Post</h2>
    <p>Content...</p>
  </section>
</main>

<footer>Copyright 2026</footer>
          
        

✅ Benefits:

• Screen reader easily navigate করতে পারে
• SEO-তে content structure clear হয়

---

🔹 3. Keyboard-Friendly Structure

• অনেক user mouse use করতে পারে না
• তারা keyboard (Tab, Enter) দিয়ে site navigate করে

✅ Ensure these:

✔️ Tab navigation works

          <button>Click Me</button>
          <a href="#">Go to page</a>
        

✔️ Avoid non-clickable div

          <div onclick="alert('Hi')">Click</div>
        

❌ এটা keyboard-friendly না

✅ Better:

<button onclick="alert('Hi')">Click</button>

✅ Focus visible রাখা:

CSS দিয়ে remove কোরো না

        :focus {
        outline: 2px solid blue;
        }
        

---

🔹 4. Common Accessibility Mistakes

এই ভুলগুলো beginner থেকে mid-level সবাই করে

❌ 1. Missing alt in images

          <img src="image.jpg">
        

👉 Screen reader কিছু বুঝবে না

❌ 2. Using only color for meaning

Example: red = error
color blind user বুঝবে না

অনেক developer শুধু color ব্যবহার করে message বোঝায়; যেমন:🔴 Red = error. 🟢 Green = success. 👉 কিন্তু এটা accessible না ❗

কেন এটা সমস্যা?
সব user একইভাবে color দেখতে পারে না| 👉 কিছু মানুষ color blind (রং আলাদা করতে পারে না)
Example : Red vs Green differentiate করতে পারে না; তাই error vs success বুঝতে পারে না

✅ Better Way (Accessible)
👉 Color + Text/Icon একসাথে use করো

• ❌ icon → visual hint
• "Error:" text → clear meaning
• Color → extra support

❌ 3. No label in form

👉 Form use করা কঠিন হয়ে যায়

❌ 4. Using <div> instead of semantic tags

👉 Structure unclear হয়ে যায়

❌ 5. Removing focus outline

          :focus {
          outline: none;
          }
        

👉 Focus invisible হয়ে যায়, Keyboard user completely lost হয়ে যায়
Mouse user → cursor দেখে বুঝে
Keyboard user → focus outline দেখে বুঝে
👉 যদি focus visible না থাকে, user বুঝতেই পারবে না সে কোথায় আছে 😐

---

🔚 Conclusion

Accessibility মানে শুধু rule follow না — এটা better UX + better SEO

🔥 Bonus Tip (Mid-Level Insight)

• Google এখন accessibility signals consider করে
• Accessible site = more reach + better ranking