Accessibility মানে একটি পেজ সবার জন্য কাজ করে, একটি screen reader ব্যবহার করা, মাউসের বদলে একটি কীবোর্ড ব্যবহার করা, বা 100%-এর অনেক বেশি zoom করা একটি ব্রাউজার ব্যবহার করা মানুষ সহ। এর বেশিরভাগ হাতেগোনা কিছু সাধারণ HTML habit থেকে আসে, একটি আলাদা দক্ষতা না।
alt attribute ছবির জায়গায় একটি screen reader জোরে পড়ে। ছবিটা আক্ষরিকভাবে কী দেখায় শুধু তা না, এটা কী বোঝায় তা বর্ণনা করুন।
<img src="chart.png" alt="Bar chart showing sales doubling from January to June">একটি মিলে যাওয়া for আর id-এর মাধ্যমে এর input-এর সাথে যুক্ত একটি <label> একটি screen reader-কে একটি field কীসের জন্য তা ঘোষণা করতে দেয়, আর label-এর যেকোনো জায়গায় click করে input-এ focus করতে দেয়।
<label for="email">Email address</label>
<input type="email" id="email" name="email">সবকিছুর জন্য generic <div>-এর বদলে <nav>, <main>, <button>, আর <header> ব্যবহার করলে একটি screen reader-কে লাফ দেওয়ার জন্য আসল landmark দেয় — এটা এই কোর্সের আগে কভার করা একই semantic element, আর accessibility-ই এগুলো থাকার প্রধান কারণ।
একটি icon-only button-এর কোনো visible টেক্সট না থাকলে, aria-label এটাকে একটি accessible নাম দেয়।
<button aria-label="Close menu">✕</button>| Habit | কাকে সাহায্য করে |
|---|---|
| ছবিতে alt text | Screen reader user |
| প্রতিটি input-এর সাথে যুক্ত label | Screen reader user, আর একটি field focus করতে click করা যে কেউ |
| Generic div-এর বদলে semantic ট্যাগ | landmark দিয়ে navigate করা screen reader user |
| Visible focus state, কীবোর্ড-দিয়ে-পৌঁছানো control | শুধু কীবোর্ড ব্যবহারকারী, কোনো মাউস নেই |
এটা একটা শুরু, পুরো subject না
এই lesson ইচ্ছাকৃতভাবে basic — একটি পূর্ণ accessibility audit (color contrast, focus order, জটিল ARIA pattern) নিজেই একটি গভীর topic। এই চারটা habit একাই real-world accessibility সমস্যার একটা বড় অংশ কভার করে।