ফ্রি অ্যাক্সেসিবিলিটি টুল

ছবির অল্ট টেক্সট চেকার

একটি পেজের ঠিকানা দিন, এবং সেখানকার প্রতিটি ছবি তার অল্ট টেক্সটসহ দেখুন, যা স্ক্রিপ্ট চলার পর একটি আসল ব্রাউজারে পড়া হয়। দেখুন কোন ছবিতে অল্ট টেক্সট নেই, কোনগুলো সাজসজ্জার হিসেবে চিহ্নিত, আর কোনগুলোর অল্ট টেক্সট কিছুই বর্ণনা করে না।

ফ্রি। আপনার দেওয়া ঠিকানা প্রায় 20 সেকেন্ডে যাচাই করে।

এই টুল কী যাচাই করে

  • অল্ট টেক্সট ছাড়া ছবি

    প্রতিটি img এলিমেন্ট ও ইমেজ বাটন, যাতে কোনো alt অ্যাট্রিবিউট নেই এবং aria-label-এর মতো অন্য কোনো অ্যাক্সেসিবল নামও নেই।

  • লিংক করা ছবি, যা লিংককে নামহীন করে রাখে

    লিংক বা বাটনের ভেতরের লোগো ও আইকন, যেগুলোর অল্ট টেক্সট নেই এবং অন্য কোনো লেখাও নেই, তাই স্ক্রিন রিডার শুধু “লিংক” ঘোষণা করতে পারে।

  • ফাইলের নামের মতো দেখতে অল্ট টেক্সট

    IMG_2041.jpg, DSC0042 বা লম্বা সংখ্যার সারির মতো মান, যা অনেক সিস্টেম আপলোডের সময় নিজে থেকেই বসিয়ে দেয়।

  • সাধারণ শব্দ

    যে অল্ট টেক্সট শুধু “image”, “photo”, “logo” বা “banner”, তা ছবিটি কী দেখায় সে বিষয়ে কাউকে কিছু বলে না।

  • অপ্রয়োজনীয় ও পুনরাবৃত্ত লেখা

    যেসব বর্ণনা “image of” দিয়ে শুরু হয়, পাশের লিংকের লেখা আবার বলে, বা তিন বা তার বেশি ভিন্ন ছবিতে আবার ব্যবহার করা হয়।

  • সাজসজ্জার ও লুকানো ছবি

    alt="" বা role="presentation" দিয়ে চিহ্নিত ছবি, এবং aria-hidden বা CSS দিয়ে লুকানো ছবি আলাদা করে তালিকাভুক্ত হয়, যাতে আপনি নিশ্চিত হতে পারেন প্রতিটি সত্যিই সাজসজ্জার।

  • প্রতিটি ছবির প্রিভিউ

    অল্ট টেক্সটের পাশে একটি থাম্বনেইল, যাতে কয়েক সেকেন্ডেই প্রতিটি বর্ণনা বিচার করতে পারেন। ফিল্টার দিয়ে শুধু সমস্যা বা শুধু যাচাই করার মতো ছবি দেখা যায়।

যা এটি যাচাই করতে পারে না

  • অল্ট টেক্সট সঠিক কি না তা বলা। এটি বিচার করতে পারেন কেবল সেই মানুষ, যিনি ছবিটি দেখতে পান এবং জানেন ছবিটি পেজে কেন আছে।
  • CSS ব্যাকগ্রাউন্ড হিসেবে বসানো ছবি, বা SVG ও canvas গ্রাফিক্সের টেক্সট বিকল্প যাচাই করা। এটি img এলিমেন্ট ও ইমেজ বাটন তালিকাভুক্ত করে।
  • ফ্রেমের ভেতরের ছবি যাচাই করা, যেমন এমবেড করা ভিডিও, ম্যাপ ও বিজ্ঞাপন।
  • 150টির বেশি ছবি তালিকাভুক্ত করা। খুব দীর্ঘ পেজে এটি প্রথম 150টি দেখায় এবং মোট কতগুলো আছে তা জানায়।
  • অন্য পেজ পরীক্ষা করা। পূর্ণ ফ্রি স্ক্যান সর্বোচ্চ পাঁচটি গুরুত্বপূর্ণ পেজে WCAG-এর বাকি অংশের সঙ্গে অল্ট টেক্সটও যাচাই করে।

কেন এটি গুরুত্বপূর্ণ

অল্ট টেক্সট হলো সেই লেখা, যা স্ক্রিন রিডার ছবির জায়গায় পড়ে, এবং ছবি লোড না হলে ব্রাউজার যা দেখায়। WCAG 2.2-এর সাফল্যের মানদণ্ড 1.1.1, লেভেল A-তে, তথ্য বহন করে এমন প্রতিটি ছবির জন্য একটি টেক্সট বিকল্প চায়, আর যেগুলো তথ্য বহন করে না সেগুলোর জন্য একটি খালি বিকল্প।

অল্ট টেক্সট না থাকা ওয়েবে অ্যাক্সেসিবিলিটির দ্বিতীয় সবচেয়ে সাধারণ ত্রুটি: WebAIM-এর 2026 সালের বিশ্লেষণে এটি শীর্ষ 10 লাখ হোম পেজের 53.1%-এ পাওয়া গেছে, এবং যাচাই করা সব ছবির 16.2%-এ কোনো অল্ট টেক্সট ছিল না।

সার্চ ইঞ্জিনও এটি পড়ে। Google বলে, ছবি বোঝার জন্য এটি কম্পিউটার ভিশন ও পেজের কনটেন্টের সঙ্গে অল্ট টেক্সট ব্যবহার করে, এবং লিংক করা ছবির অল্ট টেক্সট লিংকের anchor টেক্সটের মতো কাজ করে।

ফলাফল কীভাবে বুঝবেন

অল্ট টেক্সট নেই
ছবিটিতে কোনো alt অ্যাট্রিবিউট নেই এবং অন্য কোনো নামও নেই। সফটওয়্যারভেদে স্ক্রিন রিডার ফাইলের নাম পড়ে শোনাতে পারে বা ছবিটি এড়িয়ে যেতে পারে।
সাজসজ্জার
alt="" বা role="presentation": স্ক্রিন রিডার ছবিটি এড়িয়ে যায়। সাজসজ্জার ক্ষেত্রে এটি ঠিক; কিন্তু তথ্য বহন করে এমন ছবি, বা কোনো লিংকের একমাত্র কনটেন্ট হয়ে থাকা ছবির ক্ষেত্রে ভুল।
অল্ট টেক্সট আছে
ছবিটির একটি বর্ণনা আছে। যেগুলো ভুল মনে হয় সেগুলো আমরা চিহ্নিত করি; বাকিগুলো সঠিক কি না, তা-ও একজন মানুষকে যাচাই করতে হবে।
ARIA বা title দিয়ে নাম দেওয়া
alt অ্যাট্রিবিউট নেই, কিন্তু aria-label, aria-labelledby বা title থেকে একটি নাম আছে। এটি স্বয়ংক্রিয় পরীক্ষায় উত্তীর্ণ হয়; তবুও alt-ই বেশি নির্ভরযোগ্য বিকল্প।
লুকানো
দেখানো হয় না, বা aria-hidden দিয়ে সহায়ক প্রযুক্তি থেকে লুকানো। ছবিটি দেখা যাওয়ার কথা না হলে ঠিক করার কিছু নেই।
নামহীন লিংক
এমন লিংক বা বাটন, যার একমাত্র কনটেন্ট টেক্সট বিকল্প ছাড়া একটি ছবি। ছবিটি নিজে সাজসজ্জার হলেও এটি ব্যর্থ হয়।
যাচাই করুন
এমন অল্ট টেক্সট, যা ফাইলের নাম বা সাধারণ শব্দের মতো দেখায়, “image of” দিয়ে শুরু হয়, লিংকের লেখা আবার বলে, খুব লম্বা, বা কয়েকটি ছবিতে আবার ব্যবহার করা হয়েছে।

সবচেয়ে সাধারণ সমস্যাগুলো কীভাবে ঠিক করবেন

  • প্রোডাক্ট ও কনটেন্টের ছবি

    পেজের প্রেক্ষাপটে বর্ণনা করুন, ছবিটি না থাকলে কেউ কী হারাতেন। প্রোডাক্টের ক্ষেত্রে: জিনিসটি, এর রং ও দেখানো দিকটি। কোনো আর্টিকেলের ছবির ক্ষেত্রে: লেখায় যা নেই, ছবিটি তা কী দেখায়।

  • হোম পেজে লিংক করা লোগো

    লিংক করা ছবির বলা উচিত লিংকটি কোথায় নিয়ে যায়। হোম পেজে লিংক করা লোগোর জন্য “logo”-এর বদলে কোম্পানির নাম ব্যবহার করুন, যেমন alt="Acme হোম"।

  • লিংক ও বাটনের ভেতরের আইকন

    আইকনকে এমন অল্ট টেক্সট দিন যা কাজটির নাম বলে, যেমন “সার্চ” বা “কার্ট”, অথবা লিংকে একটি aria-label দিন এবং alt="" দিয়ে আইকনটিকে সাজসজ্জার হিসেবে চিহ্নিত করুন।

  • সাজসজ্জার ছবি

    ডিভাইডার, পটভূমির অলংকরণ এবং ঠিক পাশের লেখা আবার দেখায় এমন ছবির জন্য alt="" (একটি খালি মান, অনুপস্থিত অ্যাট্রিবিউট নয়) ব্যবহার করুন।

  • আপনার প্ল্যাটফর্মের বসানো ফাইলের নাম

    অনেক প্ল্যাটফর্ম আপলোডের সময় ফাইলের নাম alt ফিল্ডে কপি করে দেয়। ছবিটি যেখানে পরিচালনা করা হয়, সেখানেই এটি এডিট করুন: Shopify-তে প্রোডাক্টের মিডিয়ায়; WordPress-এ Media Library-র Alternative Text ফিল্ডে।

  • চার্ট ও ইনফোগ্রাফিক

    একটি ছোট alt দিন যা বলে চার্টটি কী দেখায়, এবং ডেটা বা তার সারাংশ পাশের লেখায় বা একটি টেবিলে রাখুন।

অল্ট টেক্সট ছাড়া ছবি: Shopify, WooCommerce ও যেকোনো সাইটে কীভাবে ঠিক করবেন

এই টুল নিয়ে প্রশ্ন

অল্ট টেক্সট কী?

ছবির alt অ্যাট্রিবিউটে থাকে তার টেক্সট বিকল্প। স্ক্রিন রিডার এটি জোরে পড়ে শোনায়, এবং ছবি দেখানো না গেলে ব্রাউজার এটি দেখায়।

প্রতিটি ছবিতেই কি অল্ট টেক্সট থাকা উচিত?

প্রতিটি img এলিমেন্টে একটি alt অ্যাট্রিবিউট থাকা উচিত। তথ্য বহন করে এমন ছবির ক্ষেত্রে এটি ছবিটি বর্ণনা করে; সাজসজ্জার ছবির ক্ষেত্রে এটি খালি (alt="") হওয়া উচিত, যাতে স্ক্রিন রিডার ছবিটি এড়িয়ে যায়।

অল্ট টেক্সট কতটা লম্বা হওয়া উচিত?

WCAG কোনো সীমা নির্ধারণ করে না। ভালো অল্ট টেক্সট সাধারণত একটি ছোট বাক্যাংশ বা বাক্য। কোনো ছবির আরও বর্ণনা দরকার হলে পেজের লেখায় বা ক্যাপশনে তা বর্ণনা করুন এবং alt ছোট রাখুন। আমরা 150 অক্ষরের বেশি লম্বা অল্ট টেক্সট আবার দেখার জন্য চিহ্নিত করি।

অল্ট টেক্সট কি SEO-তে সাহায্য করে?

Google বলে, ছবি বোঝার জন্য এটি কম্পিউটার ভিশন ও পেজের কনটেন্টের সঙ্গে অল্ট টেক্সট ব্যবহার করে, এবং লিংক করা ছবির অল্ট টেক্সট anchor টেক্সটের মতো কাজ করে। এটি আরও সতর্ক করে যে alt অ্যাট্রিবিউটে কীওয়ার্ড ঠেসে দিলে তা স্প্যাম হিসেবে গণ্য হতে পারে।

title অ্যাট্রিবিউট কি alt-এর মতোই?

না। title হোভার করলে টুলটিপ হিসেবে দেখা যায়, এবং স্ক্রিন রিডার এটি নির্ভরযোগ্যভাবে ঘোষণা করে না, টাচ স্ক্রিনেও এটি পাওয়া যায় না। alt না থাকলে স্বয়ংক্রিয় পরীক্ষা এটিকে নাম হিসেবে মেনে নেয়, কিন্তু নির্ভরযোগ্য বিকল্প হলো alt।

AI কি আমার অল্ট টেক্সট লিখে দিতে পারে?

এটি বর্ণনার খসড়া করে দিতে পারে, কিন্তু ছবিটি আপনার পেজে কেন আছে তা জানে না। প্রতিটি খসড়া পর্যালোচনা করুন: সঠিক অল্ট টেক্সট নির্ভর করে এমন প্রেক্ষাপটের ওপর, যা কেবল আপনিই জানেন।

সূত্র

সংশ্লিষ্ট টুল

অ্যাক্সেসিবিলিটি সংশোধন রিপোর্ট ($174, এককালীন) পুরো ফ্রি স্ক্যান থেকে শুরু করে এবং যোগ করে আরও পেজ, প্রতিটি সমস্যার জন্য করণীয় পরিবর্তন, একটি PDF এবং আপনার সংশোধন যাচাইয়ের জন্য রি-টেস্ট।

অ্যাক্সেসিবিলিটি সংশোধন রিপোর্ট সম্পর্কে