Alt টেক্সট হল আমার পেশী মেমরির সেই জিনিসগুলির মধ্যে একটি যা আমি যখনই একটি চিত্র উপাদানের সাথে কাজ করছি তখন পপ আপ হয়। অ্যাট্রিবিউট প্রায় নিজেই লিখে।
<img src="https://css-tricks.com/alt-text-not-always-needed/image.jpg" alt="">অথবা আপনি যদি Emmet ব্যবহার করেন, তাহলে সেটি আপনার জন্য স্বয়ংসম্পূর্ণ। ভুলবেন না alt পাঠ্য এটির কোন প্রয়োজন না থাকলেও এটি ব্যবহার করুন, কারণ একটি খালি স্ট্রিং স্ক্রিন রিডার দ্বারা এড়িয়ে যায়। এটিকে বিকল্প পাঠ্যকে “নুলিং” বলা হয় এবং অনেক স্ক্রিন রিডার কেবল ইমেজ ফাইলের নাম ঘোষণা করে। শুধু নিশ্চিত হন যে এটি সত্যিই একটি খালি স্ট্রিং কারণ এমনকি একটি স্থান কিছু সহায়ক প্রযুক্তি দ্বারা বাছাই করা হয়, যার ফলে একটি স্ক্রিন রিডার ছবিটি সম্পূর্ণভাবে এড়িয়ে যায়:
<!-- Not empty -->
<img src="https://css-tricks.com/alt-text-not-always-needed/image.jpg" alt=" ">কিন্তু অপেক্ষা করুন… এমন পরিস্থিতি আছে যেখানে একটি চিত্রের জন্য Alt পাঠ্যের প্রয়োজন নেই? আমি এরিকের সাথে একমত হতে চাই ইমেজ বিশাল সংখ্যাগরিষ্ঠ আলংকারিক বেশী এবং বর্ণনা করা প্রয়োজন. আপনার ছবি হয় সম্ভবত আলংকারিক নয় এবং এর সাথে বর্ণনা করা উচিত alt পাঠ্য
সম্ভবত সেখানে অনেক উত্তোলন করছে কারণ বিষয়বস্তু এবং প্রসঙ্গের ক্ষেত্রে সব ছবি সমান নয়। এমা সিওনকা এবং ট্যানার কোহলারের সেই পরিস্থিতিতে একটি নতুন গবেষণা আছে যেখানে আপনি সম্ভবত প্রয়োজন নেই alt. এটি একটি ভাল লেখা এবং গবেষণা করা অংশ এবং আমি এটি থেকে কিছু নাগেট সংগ্রহ করছি।
ব্যবহারকারীদের Alt টেক্সট থেকে যা প্রয়োজন
এটি একটি ইমেজ থেকে অন্য যে কারোর প্রয়োজনের মতোই: মৌলিক কাজগুলি সম্পন্ন করার একটি সহজ পথ। একটি পণ্য ইমেজ যে একটি ভাল উদাহরণ. একটি ভিজ্যুয়াল প্রদান ক্রয় করার পথকে মসৃণ করে কারণ এটি আইটেমটি দেখতে কেমন এবং আপনি যখন এটি পাবেন তখন কী আশা করবেন তার প্রসঙ্গ। একটি ইমেজ প্রদান না করা প্রায় অভিজ্ঞতায় ঘর্ষণ যোগ করে যদি আপনাকে থামতে হয় এবং আপনার পছন্দের শার্টের আকার এবং রঙ সম্পর্কে গ্রাহক সহায়তার মৌলিক প্রশ্ন জিজ্ঞাসা করতে হয়।
তাই, হ্যাঁ। এই চিত্রটি বর্ণনা করুন alt! তবে সম্ভবত “বর্ণনা” সর্বোত্তম শব্দ নয় কারণ নিবন্ধটি পরবর্তী পয়েন্ট তৈরি করতে এগিয়ে যায়…
চিত্রগুলি দেখতে কেমন তা বর্ণনা করা বন্ধ করুন৷
নিবন্ধটি একটি সাধারণ ফাঁদে পড়ে যেটির জন্য আমি খুব দোষী, যা একটি চিত্রকে এমনভাবে বর্ণনা করছে যে আমি সহায়ক খুঁজুন অথবা, নিবন্ধটি যেমন বলে, এটা অনেকটা আমি নিজেকে বলছি, “আমি এটিকে অল্ট টেক্সটে বর্ণনা করব যাতে স্ক্রিন-রিডার ব্যবহারকারীরা কল্পনা করতে পারে যে তারা কী দেখছে না।”
যে এটা সম্পর্কে যাচ্ছে ভুল উপায়. একটি পণ্যের চিত্রের উদাহরণে ফিরে গিয়ে, নিবন্ধটি রূপরেখা দেয় যে কীভাবে একজন স্ক্রিন রিডার এটির কাছে যেতে পারে:
উদাহরণস্বরূপ, এখানে একটি স্ক্রিন-রিডার ব্যবহারকারী কিভাবে যোগাযোগ করতে পারে পণ্য পৃষ্ঠা:
- পৃষ্ঠার গঠন সম্পর্কে ধারণা পেতে পৃষ্ঠা শিরোনামগুলির মধ্যে ঝাঁপ দিন।
- শিরোনাম লেবেল সহ একটি নির্দিষ্ট বিভাগের বিবরণ অন্বেষণ করুন পণ্য বিবরণ.
- একটি চিত্রের মুখোমুখি হন এবং আশ্চর্য হন “এই চিত্রটি পণ্য সম্পর্কে যোগাযোগ করে এমন কোন তথ্য যা আমি অন্য কোথাও মিস করেছি?“
আকর্ষণীয়! যেখানে আমি একটি চিত্রের সম্মুখীন হতে পারি এবং এটির চারপাশের পাঠ্যের উপর ভিত্তি করে এটি মূল্যায়ন করতে পারি, একজন স্ক্রিন রিডার ইতিমধ্যেই প্রশ্ন করছে যে এটির চারপাশে কোন বিষয়বস্তু মিস হয়েছে। এই অনুচ্ছেদটি এমন একটি যা আমাকে প্রতিফলিত করতে হবে (জোর আমার):
বেশিরভাগ সময়, স্ক্রিন-রিডার ব্যবহারকারীরা ভাবতে পারেন না যে চিত্রগুলি কেমন দেখাচ্ছে। পরিবর্তে, তারা তাদের উদ্দেশ্য জানতে চায়। (এই নিয়মের ব্যতিক্রমগুলির মধ্যে ছবিগুলি উপস্থাপন করা ওয়েবসাইটগুলি অন্তর্ভুক্ত থাকতে পারে, যেমন আর্টওয়ার্ক, সম্পূর্ণরূপে ভিজ্যুয়াল উপভোগের জন্য, বা ব্যবহারকারীরা যারা আগে দেখতে এবং তাদের দৃষ্টিশক্তি হারিয়েছেন৷)
ঠিক আছে, তাই কিভাবে আমরা জানি যখন একটি চিত্র বর্ণনা করা প্রয়োজন? এটি শেষ পর্যন্ত একটি বিষয়গত সিদ্ধান্ত যা করা খুব বিশ্রী লাগে। তবুও, নিবন্ধটি সেরা রুট নির্ধারণের জন্য নিজেদের কাছে তিনটি প্রশ্ন উপস্থাপন করে।
- চিত্র কি পুনরাবৃত্তিমূলক? ছবিতে টাস্ক-সম্পর্কিত তথ্য কি পৃষ্ঠার অন্য কোথাও পাওয়া যায়?
- ছবি কি রেফারেন্সিয়াল? পৃষ্ঠা অনুলিপি সরাসরি ইমেজ উল্লেখ করে?
- ইমেজ দক্ষ? পারে
altপাঠ্য ব্যবহারকারীদের আরও দক্ষতার সাথে একটি টাস্ক সম্পূর্ণ করতে সাহায্য করে?
এটি নিবন্ধের মাংস, তাই আমি সেগুলি ভেঙে ফেলব।
চিত্র কি পুনরাবৃত্তিমূলক?
এই অর্থে পুনরাবৃত্তিমূলক যে এটির চারপাশের বিষয়বস্তু ইতিমধ্যেই একটি ছবি আঁকার কাজ করছে। যদি ইমেজটি ইতিমধ্যেই বিষয়বস্তু দ্বারা যথাযথভাবে “বর্ণিত” হয়ে থাকে, তাহলে সম্ভবত এটি বাতিল করে দূরে থাকা সম্ভব। alt বৈশিষ্ট্য
এই চিত্রটি নিবন্ধটি পয়েন্ট তৈরি করতে ব্যবহার করে (এবং, হ্যাঁ, আমি alt-এটা):
এই ছবির ক্যাপশনটি বর্ণনা করে যে চিত্রটি ঠিক কী যোগাযোগ করে৷ তাই, ছবির জন্য যেকোনো অল্ট টেক্সট অপ্রয়োজনীয় হবে এবং স্ক্রিন-রিডার ব্যবহারকারীদের জন্য সময় নষ্ট হবে। এই ক্ষেত্রে, প্রকৃত অল্ট টেক্সট ক্যাপশনের মতই ছিল। পরপর দুবার একই তথ্য জুড়ে আসা আরও বিভ্রান্তিকর এবং অপ্রয়োজনীয় বোধ করে।
সুখের পথ:
<img src="https://css-tricks.com/alt-text-not-always-needed/image.jpg" alt="">
তবে অনানুষ্ঠানিক/আধা-আনুষ্ঠানিক টেবিল সেটিং সম্পর্কে এই চিত্রটি দেখুন যে এটি কীভাবে এটির চারপাশের পাঠ্য দ্বারা বর্ণনা করা হয় না (এবং, না, আমি নই alt-এটা):
যদি আমি এই চিত্রটি বর্ণনা করতে চাই, তবে আমি চিত্রটি বর্ণনা করতে এবং কিংবদন্তিতে বর্ণিত সমস্ত পয়েন্ট বর্ণনা করতে পারতাম। আমি যদি সব পড়তে পারি, তাহলে একজন স্ক্রিন রিডারও, তাই না? ঠিক না। আমি সত্যিই নিবন্ধে প্রদত্ত উদাহরণ কয়েক প্রশংসা. একটি নমুনা:
- ব্রেড প্লেট এবং মাখনের ছুরি, উপরের বাম কোণে অবস্থিত।
- ডেজার্ট কাঁটা, উপরের কেন্দ্রে অনুভূমিকভাবে স্থাপন করা হয়।
- ডেজার্ট চামচ, ডেজার্ট ফর্কের নীচে, উপরের কেন্দ্রে অনুভূমিকভাবে স্থাপন করা হয়।
যে উপায় কম শব্দভাষা আমি যেতে হবে. কথা বলছি কতক্ষণ (বা ছোট) alt হওয়া উচিত সম্পূর্ণ অন্য বিষয়.
ছবি কি রেফারেন্সিয়াল?
সেই শেষ বিভাগে আমি যে দ্বিতীয় ছবিটি বাদ দিয়েছি সেটি একটি রেফারেন্সিয়াল ইমেজের একটি ভালো উদাহরণ কারণ আমি এটির পূর্ববর্তী বিষয়বস্তুতে সরাসরি উল্লেখ করেছি। আমি বাতিল alt যে কারণে বৈশিষ্ট্য. কিন্তু আমি যা জগাখিচুড়ি করেছি তা হল স্ক্রীন রিডারদের কাছে ইমেজটি স্বীকৃত নয়। যদি alt বৈশিষ্ট্য নাল, তারপর স্ক্রিন রিডার এটি এড়িয়ে যায়। কিন্তু স্ক্রিন রিডারের এখনও জানা উচিত যে এটি যথাযথভাবে বর্ণনা করা হলেও এটি সেখানে আছে।
সুখের পথ:
<img src="https://css-tricks.com/alt-text-not-always-needed/image.jpg" alt="">মনে রাখবেন যে একটি স্ক্রিন রিডার ছবির ফাইলের নাম ঘোষণা করতে পারে। তাই হয়তো ইমেজ কল আউট এবং সংক্ষিপ্তভাবে বর্ণনা উভয় একটি সুযোগ হিসাবে এটি ব্যবহার করুন. আবার, আমরা চাই যে স্ক্রিন রিডার ছবিটি ঘোষণা করুক যদি আমরা এটির আশেপাশের বিষয়বস্তুতে উল্লেখ করি। শুধু এড়িয়ে যাওয়া স্বচ্ছতার চেয়ে বেশি বিভ্রান্তির কারণ হতে পারে।
ইমেজ দক্ষ?
শব্দটি দেখলে আমার মন সবসময় পারফরম্যান্সে যায় দক্ষ ইমেজ রেফারেন্স পপ আপ. কিন্তু এই প্রেক্ষাপটে নিবন্ধটির অর্থ হল ছবিটি দর্শকদের দক্ষতার সাথে একটি কাজ সম্পূর্ণ করতে সাহায্য করতে পারে কিনা।
ইমেজ একটি কাজ সম্পূর্ণ করতে সাহায্য করে, একটি পণ্য ক্রয় বলুন, তারপর হ্যাঁ, ছবির প্রয়োজন alt পাঠ্য কিন্তু যদি এটির আশেপাশের বিষয়বস্তু ইতিমধ্যে কাজ করে তবে আমরা এটিকে শূন্য রেখে দিতে পারি (alt="") অথবা এড়িয়ে যান (alt=" ") যদি এটির কোন উল্লেখ না থাকে।
মোড়ানো
আমি কয়েকটি ভিন্ন স্ক্রীন রিডার থেকে কিছু পরীক্ষার ফলাফলের সাথে একসাথে একটি ছোট ডেমো রেখেছি যাতে দেখা যায় যে সমস্ত কিছু কীভাবে কাঁপছে।
