২০২৬ সালে ছবির alt text নিয়ে একটি বাস্তববাদী গাইড

কেন alt text এখনও গুরুত্বপূর্ণ

Alt text ১৯৯৫ সাল থেকে HTML spec-এর অংশ। ত্রিশ বছর পরও ওয়েবের অধিকাংশ ছবিতে হয় কোনো alt attribute নেই, নয়তো এমন alt text আছে যা পড়ে মনে হয় এটি এমন কেউ লিখেছে যে কখনও screen reader ব্যবহার করেনি।

সমস্যা এখন আর সচেতনতার নয়। অধিকাংশ content management system এখন alt field বাধ্যতামূলক করে। সমস্যা হলো alt text যোগাযোগের একটি হাতিয়ার না হয়ে compliance checkbox-এ পরিণত হয়েছে। মানুষ লেখে “একজন হাসিমুখ মানুষের ছবি”, অথচ প্রকৃত প্রেক্ষাপট হলো “CEO Q4 earnings ঘোষণা করছেন।”

Alt text-এর একটাই উদ্দেশ্য: যে ব্যক্তি ছবিটি দেখতে পারেন না, তাকে ছবিটির উদ্দেশ্য জানানো। এই উদ্দেশ্য প্রেক্ষাপট অনুযায়ী বদলে যায়। কোনো café-র homepage-এ একটি coffee cup-এর ছবি যে ভূমিকা রাখে, ceramic glazing techniques নিয়ে blog post-এ একই ছবির ভূমিকা তা নয়।

২০২৬ সালে আমাদের কাছে এমন AI tools-ও আছে যা স্বয়ংক্রিয়ভাবে alt text তৈরি করতে পারে। এসব tool উন্নত হচ্ছে, কিন্তু তারা এখনও প্রেক্ষাপট বোঝে না। তারা কী দেখছে তা বর্ণনা করে, ছবিটি সেখানে কেন আছে তা নয়।

সিদ্ধান্তের পথ: এই ছবির কি alt text দরকার?

প্রতিটি ছবির জন্য বর্ণনামূলক alt text দরকার হয় না। কিছু ছবি decorative। কিছু redundant। কিছু ছবির ক্ষেত্রে caption বা surrounding text আরও উপযোগী।

সিদ্ধান্ত নেওয়ার প্রক্রিয়াটি হলো:

ছবিটি কি এমন তথ্য দেয় যা আশপাশের লেখায় নেই? যদি হ্যাঁ হয়, এর alt text দরকার। যদি না হয়, এটি সম্ভবত decorative।

এই ছবি না থাকলে কি একজন blind user গুরুত্বপূর্ণ কিছু মিস করবেন? যদি হ্যাঁ হয়, alt text লিখুন। যদি না হয়, screen reader-কে এটি এড়িয়ে যেতে বলার জন্য empty alt attribute (alt="") ব্যবহার করুন।

ছবিটি কি link বা button? তখন alt text-ই link text হয়ে যায়। ছবিটি নয়, destination বর্ণনা করুন। “Pricing plans দেখুন” “arrow icon”-এর চেয়ে ভালো।

ছবিটি কি জটিল—chart, diagram, বা infographic? Alt text-এর ব্যবহারিক দৈর্ঘ্যসীমা আছে (অধিকাংশ screen reader-এর জন্য প্রায় ১২৫ characters আরামদায়ক)। জটিল ছবির জন্য দীর্ঘ বর্ণনা দরকার, হয় caption-এ, body text-এ, অথবা aria-describedby-এর মাধ্যমে।

ভালো alt text আসলে কেমন শোনায়

ভালো alt text নির্দিষ্ট, সংক্ষিপ্ত এবং context-aware। এটি প্রশ্নটির উত্তর দেয়: এই ছবিটি এখানে কেন আছে?

খারাপ: “একটি graph-এর ছবি”

ভালো: “Line graph-এ জানুয়ারি থেকে মার্চ ২০২৬ পর্যন্ত mobile traffic ২৩% বৃদ্ধি দেখানো হয়েছে”

খারাপ: “একজন ব্যক্তি laptop ব্যবহার করছেন”

ভালো: “Designer Figma-তে website mockup review করছেন”

খারাপ: “এখানে ক্লিক করুন”

ভালো: “সম্পূর্ণ accessibility audit checklist (PDF) download করুন”

খেয়াল করুন, ভালো alt text-এ প্রায়ই সংখ্যা, action, বা outcome থাকে। এটি প্রতিটি visual detail বর্ণনা করে না। এটি যা গুরুত্বপূর্ণ, সেটিই বর্ণনা করে।

Decorative images—hero background textures, ornamental borders, পুরোপুরি aesthetic illustrations—এর জন্য alt="" ব্যবহার করুন। এটি অলসতা নয়। এটি semantic honesty। Screen reader ছবিটি পুরোপুরি এড়িয়ে যাবে, এবং সেটাই আপনার চাওয়া।

সাধারণ ভুল, যা সবার সময় নষ্ট করে

“Image of” বা “Picture of” দিয়ে শুরু করা: Screen reader আগেই জানিয়ে দেয় যে এটি একটি image। সরাসরি বর্ণনায় যান।

SEO-র জন্য keyword stuffing: Alt text “best organic coffee beans Brooklyn artisan roasted” গুঁজে দেওয়ার জায়গা নয়। Google-এর image search বহু বছর ধরেই এটি শনাক্ত করতে ভালো। মানুষের জন্য লিখুন।

File name বর্ণনা করা: “IMG_3847.jpg” কারও সাহায্য করে না। “hero-banner-final-v3”-ও না।

উপন্যাস লেখা: আপনার alt text যদি দুই বাক্যের বেশি হয়, তথ্যটি সম্ভবত caption বা body text-এ থাকা উচিত।

পাশের text পুনরাবৃত্তি করা: যদি heading হয় “How to bake sourdough bread” এবং ছবিতে দেখা যায় কেউ dough shape করছেন, alt text-এ heading পুনরাবৃত্তি করার দরকার নেই। দৃশ্যত যা আলাদা তা বর্ণনা করুন: “ময়দা ছড়ানো surface-এ hands sourdough dough fold করছে।”

যেসব tool ও workflow সত্যিই সাহায্য করে

অধিকাংশ আধুনিক CMS-এ এখন alt text field built in থাকে। WordPress, Webflow, Contentful, এবং Sanity upload-এর সময় alt attribute স্পষ্টভাবে দেখায়। Field দৃশ্যমান হওয়ার অর্থ এই নয় যে সেটি ভালোভাবে পূরণ করা হয়।

আপনি যদি কোনো site-এ missing বা poor alt text audit করেন, Accessibility Insights বা axe DevTools-এর মতো browser extension alt attribute নেই এমন images flag করতে পারে। দ্রুত manual check-এর জন্য browser-এ images বন্ধ করুন (Firefox এবং Chrome দুটিতেই এটি করা যায়) এবং page পড়ুন। Alt text যদি প্রেক্ষাপটে অর্থবহ লাগে, তাহলে আপনি ঠিক পথে আছেন।

AI-generated alt text—Azure Computer Vision, Google Cloud Vision-এর মতো tools-এ পাওয়া যায়, বা Cloudflare Images-এর মতো platform-এ built in থাকে—বিশেষ করে বড় image library-র জন্য একটি যুক্তিসংগত starting point হতে পারে। কিন্তু AI alt text-কে first draft হিসেবে বিবেচনা করুন। এটি ছবির contents যথাযথভাবে বর্ণনা করবে, কিন্তু page-এ ছবিটি কেন আছে তা জানবে না। প্রেক্ষাপট যোগ করতে এখনও একজন human editor দরকার।

আপনি যদি heavy image use আছে এমন site-এ কাজ করেন এবং performance issue আগেভাগে ধরতে চান, Wux Webtools' Image Compressor-এর মতো tools upload-এর আগে file size optimize করতে সাহায্য করতে পারে—কারণ imageটি সত্যিই load না হলে alt text-ও কেবল তখনই উপযোগী।

২০২৬ সালে alt text এবং SEO

Google বহু বছর ধরে বলে আসছে যে image search-এর জন্য alt text একটি ranking factor। এটি এখনও সত্য। কিন্তু image search optimization এবং accessibility একই জিনিস নয়।

আপনি যদি প্রধানত SEO-র জন্য alt text লেখেন, শেষ পর্যন্ত keyword-stuffed অর্থহীন লেখা তৈরি হবে, যা screen reader users-এর জন্য page navigate করা আরও কঠিন করে তুলবে। আপনি যদি আগে accessibility-র জন্য alt text লেখেন, SEO benefit স্বাভাবিকভাবেই আসে, কারণ descriptive, contextual alt text-ই ঠিক সেটি যা Google-এর image search algorithm surface করতে চায়।

একটি সূক্ষ্ম বিষয়: Google Images এখন আগের তুলনায় surrounding page content অনেক বেশি ব্যবহার করে। আপনার alt text যদি ভালো কিন্তু generic হয় (“frosting সহ chocolate cake”), এবং আপনার page vegan baking নিয়ে হয়, Google প্রেক্ষাপট বুঝবে। ছবিতে সেই পার্থক্য visually obvious না হলে “dairy-free frosting সহ vegan chocolate cake” লেখার দরকার নেই।

মূল takeaway

• Alt text-এর উদ্দেশ্য হলো ছবির purpose জানানো, প্রতিটি visual detail বর্ণনা করা নয়
• Decorative images-এ alt="" ব্যবহার করা উচিত, যাতে screen reader সেগুলো পুরোপুরি এড়িয়ে যায়
• ভালো alt text নির্দিষ্ট, context-aware, এবং “এই ছবিটি এখানে কেন আছে?” প্রশ্নের উত্তর দেয়
• AI-generated alt text একটি উপকারী starting point, কিন্তু প্রেক্ষাপটের জন্য এখনও human editing দরকার
• আগে accessibility-র জন্য লিখুন; clear, descriptive text থেকে SEO benefit স্বাভাবিকভাবেই আসে

FAQ

Q: আমি কি শুধু AI দিয়ে আমার সব alt text তৈরি করতে পারি?

A: AI tools ছবির ভেতরে কী আছে তা বর্ণনা করতে ভালো, কিন্তু তারা প্রেক্ষাপট বোঝে না। আপনি যদি শত শত product image নিয়ে কাজ করেন এবং একটি baseline দরকার হয়, AI alt text ঠিক আছে। Editorial content, marketing pages, বা এমন কিছু যেখানে ছবিটির থাকার কারণ গুরুত্বপূর্ণ, সেখানে একজন মানুষের review ও edit করা দরকার।

Q: Alt text কত দীর্ঘ হওয়া উচিত?

A: অধিকাংশ screen reader ১২৫ characters বা তার কম নিয়ে আরামদায়ক। এর বেশি দরকার হলে তথ্যটি সম্ভবত caption-এ, body text-এ, বা aria-describedby দিয়ে link করা দীর্ঘ description-এ থাকা উচিত। কোনো কঠোর technical limit নেই, তবে দীর্ঘ alt text navigate করতে অস্বস্তিকর হয়ে ওঠে।

Q: Logo-র জন্য কি alt text দরকার?

A: হ্যাঁ, তবে সহজ রাখুন। আপনার logo যদি header-এ থাকে এবং homepage-এ link করে, alt text হওয়া উচিত আপনার company name: alt="Acme Corp"। alt="Acme Corp logo" লিখবেন না, যদি না এটি logo—এই তথ্যটি কোনোভাবে প্রেক্ষাপটে relevant হয়।

Q: Alt text এবং caption-এর পার্থক্য কী?

A: Alt text হলো ছবির direct replacement। Image encounter হলে screen reader এটি পড়ে। Caption হলো supplementary information, যা সবার কাছে visible, এবং context বা attribution যোগ করে। দুটিই থাকলে, তারা যেন একে অন্যকে repeat না করে।

Q: CSS-এ background image-এ কি alt text যোগ করা উচিত?

A: না। CSS background images সংজ্ঞা অনুযায়ী decorative এবং screen reader-এর কাছে expose করা হয় না। যদি কোনো background image গুরুত্বপূর্ণ তথ্য বহন করে, তাহলে সেটি proper alt text সহ HTML-এ একটি <img> element হওয়া উচিত।

Sources

• W3C Web Accessibility Initiative: Images Tutorial
• WebAIM: Alternative Text
• Nielsen Norman Group: Alt Text for Images
• Google Search Central: Image SEO Best Practices