চিত্রের জন্য পাঠ্য বিকল্প

ছবির জন্য টেক্সট বিকল্প প্রদান করতে alt অ্যাট্রিবিউট ব্যবহার করে

Alice Boxhall

Dave Gash

Meggin Kearney

চিত্রগুলি বেশিরভাগ ওয়েব পৃষ্ঠাগুলির একটি গুরুত্বপূর্ণ উপাদান, এবং অবশ্যই স্বল্প দৃষ্টিভঙ্গি ব্যবহারকারীদের জন্য একটি নির্দিষ্ট স্টিকিং পয়েন্ট। কোন ধরনের টেক্সট বিকল্প থাকা উচিত তা নির্ধারণ করার জন্য একটি চিত্র একটি পৃষ্ঠায় কী ভূমিকা পালন করে তা আমাদের অবশ্যই বিবেচনা করতে হবে। এই ছবিটি একবার দেখুন.

<article>
    <h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
    <img src="imgs/160204193356-01-cat-500.jpg">
</article>

গবেষণায় দেখা গেছে 10 টির মধ্যে 9টি বিড়াল তাদের ঘুমের সময় তাদের মালিকদের চুপচাপ বিচার করে

পৃষ্ঠায় আমাদের একটি বিড়ালের ছবি রয়েছে, যা বিড়ালদের সুপরিচিত বিচারমূলক আচরণের উপর একটি নিবন্ধ চিত্রিত করে। একজন স্ক্রিন রিডার এই ছবিটির আক্ষরিক নাম "/160204193356-01-cat-500.jpg" ব্যবহার করে ঘোষণা করবে। এটা সঠিক, কিন্তু সব দরকারী নয়.

আপনি এই চিত্রটির একটি দরকারী পাঠ্য বিকল্প প্রদান করতে alt বৈশিষ্ট্য ব্যবহার করতে পারেন — উদাহরণস্বরূপ, "একটি বিড়াল মহাশূন্যে ভয়ঙ্করভাবে তাকাচ্ছে।"

<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">

তারপরে স্ক্রিন রিডার চিত্রটির একটি সংক্ষিপ্ত বিবরণ ঘোষণা করতে পারে ( কালো ভয়েসওভার বারে দেখা যায়) এবং ব্যবহারকারী নিবন্ধে যেতে চান কিনা তা চয়ন করতে পারেন৷

alt সম্পর্কে কয়েকটি মন্তব্য:

• alt আপনাকে একটি সাধারণ স্ট্রিং নির্দিষ্ট করার অনুমতি দেয় যে কোনো সময় ইমেজটি উপলভ্য না থাকলে ব্যবহার করা যাবে, যেমন যখন ইমেজটি লোড হতে ব্যর্থ হয়, বা ওয়েব ক্রলিং বট দ্বারা অ্যাক্সেস করা হয়, বা স্ক্রিন রিডার দ্বারা সম্মুখীন হয়।
• alt title বা যেকোনো ধরনের ক্যাপশন থেকে আলাদা, যেটিতে এটি শুধুমাত্র তখনই ব্যবহার করা হয় যদি ছবি উপলব্ধ না হয়।

দরকারী অল্ট টেক্সট লেখা একটি শিল্প একটি বিট. একটি স্ট্রিংকে একটি ব্যবহারযোগ্য পাঠ্যের বিকল্প হওয়ার জন্য, এটিকে একই প্রসঙ্গে চিত্রের মতো একই ধারণা প্রকাশ করতে হবে।

উপরে দেখানো মত একটি পৃষ্ঠার মাস্টহেডে একটি লিঙ্ক করা লোগো ছবি বিবেচনা করুন। আমরা ছবিটিকে "দ্য ফানিওন লোগো" হিসাবে বেশ নির্ভুলভাবে বর্ণনা করতে পারি।

<img class="logo" src="logo.jpg" alt="The Funion logo">

এটি "হোম" বা "প্রধান পৃষ্ঠা" এর একটি সহজ পাঠ্য বিকল্প দিতে প্রলুব্ধ হতে পারে, তবে এটি স্বল্প-দৃষ্টি এবং দৃষ্টিসম্পন্ন ব্যবহারকারী উভয়ের জন্যই ক্ষতিকর।

কিন্তু কল্পনা করুন একজন স্ক্রিন রিডার ব্যবহারকারী যিনি পৃষ্ঠায় মাস্টহেড লোগোটি সনাক্ত করতে চান; এটিকে "হোম" এর একটি Alt মান দেওয়া আসলে একটি আরও বিভ্রান্তিকর অভিজ্ঞতা তৈরি করে। এবং একজন দৃষ্টিসম্পন্ন ব্যবহারকারী একই চ্যালেঞ্জের মুখোমুখি হন — সাইট লোগোতে ক্লিক করলে কী হয় তা খুঁজে বের করা — একজন স্ক্রিন রিডার ব্যবহারকারী হিসেবে।

অন্যদিকে, এটি একটি চিত্র বর্ণনা করা সবসময় দরকারী নয়। উদাহরণস্বরূপ, একটি অনুসন্ধান বোতামের ভিতরে একটি ম্যাগনিফাইং গ্লাস চিত্র বিবেচনা করুন যাতে "অনুসন্ধান" পাঠ্য রয়েছে৷ যদি পাঠ্যটি সেখানে না থাকে তবে আপনি অবশ্যই সেই চিত্রটিকে "অনুসন্ধান" এর একটি বিকল্প মান দিতেন। কিন্তু আমাদের কাছে দৃশ্যমান পাঠ্য থাকায়, স্ক্রিন রিডার "অনুসন্ধান" শব্দটি উচ্চস্বরে তুলে নেবে এবং পড়বে; সুতরাং, ইমেজে একটি অভিন্ন alt মান অপ্রয়োজনীয়।

যাইহোক, আমরা জানি যে যদি আমরা alt টেক্সট ছেড়ে চলে যাই, আমরা সম্ভবত এর পরিবর্তে ইমেজ ফাইলের নাম শুনতে পাব, যা অকেজো এবং সম্ভাব্য বিভ্রান্তিকর। এই ক্ষেত্রে আপনি শুধুমাত্র একটি খালি alt অ্যাট্রিবিউট ব্যবহার করতে পারেন, এবং স্ক্রিন রিডার ছবিটি সম্পূর্ণভাবে এড়িয়ে যাবে।

<img src="magnifying-glass.jpg" alt="">

সংক্ষেপে বলতে গেলে, সমস্ত ছবিতে একটি alt বৈশিষ্ট্য থাকা উচিত, তবে সেগুলির সবগুলিতে পাঠ্য থাকা উচিত নয়৷ গুরুত্বপূর্ণ চিত্রগুলিতে বর্ণনামূলক অল্ট টেক্সট থাকা উচিত যা সংক্ষিপ্তভাবে চিত্রটি কী তা বর্ণনা করে, যখন আলংকারিক চিত্রগুলিতে খালি alt বৈশিষ্ট্য থাকা উচিত — অর্থাৎ, alt="" ৷