Screpy-এর Image Alt Text Checker একটি পৃষ্ঠার পাওয়া HTML-এ সমর্থিত ছবির উপাদান খুঁজে অনুপস্থিত alt attribute, ফাঁকা মান ও লেখা থাকা মান আলাদা করে। উৎসের প্রমাণ দিয়ে সম্পাদনার তালিকা বানিয়ে প্রতিটি ছবির অবদান দেখুন। টুল attribute খোঁজে; ছবির pixel বিশ্লেষণ, বিবরণ লেখা বা accessibility certification দেয় না।
যে পৃষ্ঠায় ছবি আছে সেটি পরীক্ষা করুন
ছবির ফাইলের ঠিকানা নয়, প্রকাশ্য HTTP/HTTPS পৃষ্ঠার URL দিন। উৎসে পাঠযোগ্য HTML থাকতে হবে। পণ্যের গ্যালারির জন্য সেই পণ্যের পৃষ্ঠা পরীক্ষা করুন। শুধু ছবির ফাইল দেখে কোন ব্যবহারে কী বিকল্প লেখা দেওয়া আছে জানা যায় না।
রিপোর্ট img এবং type image-যুক্ত input পড়ে। JavaScript না চালিয়ে HTML উত্তর ব্যবহার করে। পরে script দিয়ে যোগ করা ছবি বাদ পড়তে পারে; CSS background ও inline SVG-ও তালিকার বাইরে।
সর্বোচ্চ ১,০০০টি ছবির সারি রাখা হয় এবং দীর্ঘ প্রমাণ ছোট হতে পারে। এগুলো উপাদানের উপস্থিতি, স্বতন্ত্র ফাইল নয়। একই ছবি দুবার থাকলে দুটি সারি ও আলাদা কাজ থাকতে পারে। আংশিক কভারেজের নোট পড়ুন: বড় বা গতিশীল পৃষ্ঠার সব দৃশ্যমান বিষয় এই তালিকায় নেই। সমর্থিত উপাদান না পাওয়া মানে পর্দায় কোনো ছবি নেই নয়।
অনুপস্থিত, ফাঁকা ও লেখা থাকা alt আলাদা করুন
ফিল্টার দিয়ে একবারে একটি বিভাগ দেখুন। অনুপস্থিত মানে উপাদানে alt attribute নেই। ফাঁকা মানে attribute আছে কিন্তু অর্থপূর্ণ লেখা নেই, শুধু space থাকলেও তাই। লেখা থাকা মানে শুধু attribute পূরণ হয়েছে; বিবরণ সঠিক, উপকারী বা screen reader-এর উপযোগী এমন নিশ্চয়তা নয়।
আগে অনুপস্থিতগুলো, পরে ফাঁকা মান প্রসঙ্গসহ দেখুন। W3C WAI-এর decorative image নির্দেশিকা বোঝায়, তথ্য না বাড়ানো ছবিতে ফাঁকা বিকল্প কেন উপযুক্ত হতে পারে। attribute বাদ দেওয়া আর ফাঁকা রাখা এক নয়। পূর্ণ মানের সংখ্যা বাড়াতে সব ফাঁকা পূরণ করবেন না।
ছবির উৎস ও HTML line number দিয়ে template বা CMS output-এ উপাদান খুঁজুন। .jpg দিয়ে শেষ হওয়া বিবরণের মতো কিছু filename-সদৃশ মানও চিহ্নিত হয়। এটি পর্যালোচনার ইঙ্গিত, সম্পূর্ণ ভাষার মান বিচার নয়। সাধারণ, ভুল বা বারবার লেখা বিবরণ এই সীমিত নিয়ম এড়িয়েও সম্পাদনা চাইতে পারে।
ছবির কাজ অনুযায়ী বিকল্প লেখা বাছুন
ছবি না দেখলে কী হারিয়ে যাবে ভাবুন। W3C WAI-এর alt decision tree তথ্যপূর্ণ, আলংকারিক ও কার্যকরী ব্যবহার আলাদা করে। পাশের লেখা ও উদ্দেশ্য বদলালে একই ফাইলের আলাদা পৃষ্ঠায় আলাদা ব্যবহার হতে পারে।
নিচের কাল্পনিক উদাহরণ সম্পাদনাগত সিদ্ধান্ত বোঝায়। ছবি ও প্রসঙ্গ সত্যিই এমন হলেই বাক্যগুলো উপযুক্ত; টুল এসব ছবি দেখেনি।
| ছবির কাজ | সম্ভাব্য পদ্ধতি | যা সত্য কি না দেখবেন |
|---|---|---|
| পণ্যের বিবরণ দেখানো ছবি | “সামনে দুটি জিপ পকেটসহ নীল ব্যাকপ্যাক” | বৈশিষ্ট্যগুলো সঠিক এবং পছন্দের জন্য প্রাসঙ্গিক |
| সাজানোর divider | ফাঁকা alt attribute | কোনো তথ্য বা কাজ যোগ করে না |
| home link-এর একমাত্র উপাদান logo | “Example হোমপেজ” | লিংকের একমাত্র বিষয় ছবি এবং গন্তব্য হোমপেজ |
| গুরুত্বপূর্ণ মানযুক্ত chart | ছোট বিকল্প এবং কাছেই ব্যাখ্যা বা data table | চার্ট না দেখেও মূল সিদ্ধান্ত ও মান পাওয়া যায় |
লিংকযুক্ত ছবি বা image button-এর কাজ অন্যভাবে স্পষ্ট না হলে গন্তব্য বা action লিখুন। কাজের বদলে icon-এর আকৃতি বর্ণনা করবেন না। জটিল চার্টের পুরো dataset এক attribute-এ না ঢুকিয়ে পৃষ্ঠায় বিস্তারিত দিন।
Google-এর image নির্দেশিকা উপকারী, প্রসঙ্গভিত্তিক বিকল্প বলে এবং keyword stuffing এড়াতে বলে। প্রাসঙ্গিক অর্থ স্বাভাবিক ভাষায় লিখুন। কীওয়ার্ড তালিকা ব্যাখ্যার বিকল্প নয় এবং attribute পূরণে image search ranking নিশ্চিত হয় না।
উৎস ঠিক করে প্রকাশিত পৃষ্ঠা দেখুন
আক্রান্ত উপাদান তৈরি করা field বা component বদলান। template alt-এ না বসালে CMS media description কাজে আসে না। card বা gallery-তে সমস্যা পুনরাবৃত্ত হলে shared component ও একক entry দুটোই দেখুন। সব বিবরণ একই global default দিয়ে বদলাবেন না।
সংশোধন প্রকাশ করে একই পৃষ্ঠার URL আবার পরীক্ষা করুন। ফেরত HTML-এ কাঙ্ক্ষিত attribute আছে নিশ্চিত হয়ে দৃশ্যমান পৃষ্ঠা ও পাশের লেখা দেখুন। ইচ্ছাকৃত ফাঁকা বিকল্প রাখুন; তথ্যপূর্ণ ও কার্যকরী ছবির সঠিক অর্থ দেখুন। লক্ষ্য ব্যবহারযোগ্য বিষয়বস্তু, শুধু পূর্ণ মানের রিপোর্ট নয়।
তালিকায় না থাকা গুরুত্বপূর্ণ graphic এবং JavaScript-এর আচরণ নিজে দেখুন। পূর্ণ accessibility review এই attribute-এর চেয়ে বেশি কিছু। অন্য পৃষ্ঠার সংকেতের জন্য On-Page SEO Checker, আর শিরোনামের বিন্যাসের জন্য Heading Structure Analyzer ব্যবহার করুন। কোনোটিই এই পরীক্ষাকে certification বানায় না।